Promad

Component Showcase

Explore our design system

This is a showcase page demonstrating all available MDX components:

  • CtaCard: Call-to-action cards with features list
  • CalloutBoxes: Success, error, warning, and info variants
  • Feature Grids: Display features in grid layouts (icon-based and image-based showcase variants)
  • Stats: Display data with impact
  • Video embeds: YouTube video integration
  • Quotes: Attributed quotes with roles
  • NewsletterCard: Email subscription forms
  • ImageGallery: Adaptive image layouts with captions and a lightbox
  • Itinerary: Compact route and duration timelines
  • ParallaxHero: Full-width editorial section dividers
  • FAQ: Accessible question-and-answer groups
  • ContentCard: Intent-matched paths into destinations, gear, and the newsletter

First Section - CTA Card

CTA Cards display a title, description, features list, and call-to-action button with a gradient background.

Explore Our Features

Discover powerful tools and insights to help you achieve your goals. Get started today with our comprehensive platform.

  • 100% Free: No credit card required, ever
  • Anonymous & Private: Your data is processed securely and never shared
  • Compare with Demographics: See how you stack up against others worldwide
  • Instant Insights: Get your personalized dating statistics in seconds

With custom features:

Try Premium Free for 30 Days

Experience all premium features with our risk-free trial. No credit card required.

  • 30 day trial: No credit card required
  • All premium features: Access advanced tools and analytics
  • Cancel anytime: Full control over your subscription

Second Section - CalloutBoxes

CalloutBoxes come in different types for different contexts.

Success! Your changes have been saved successfully. All systems are functioning normally.

Error: Unable to process your request. Please check your input and try again. Common issues include invalid data formats or missing required fields.

Warning: This action cannot be undone. Please review your changes carefully before proceeding. Make sure you have a backup of important data.

Did you know? You can customize these callout boxes to match your brand. They support markdown formatting and can include links, lists, and emphasis.

Third Section - Video Embed

Here's how video embeds work:

Fourth Section - Feature Grids

Feature grids are great for displaying multiple options. Supports two variants: default (icon-based cards) and showcase (image-based cards).

Default variant (icon-based):

Smart Analytics

Track your progress with intelligent insights and data-driven recommendations tailored to your goals

Time Tracking

Monitor your productivity with precise time tracking and automated reporting tools

Business Tools

Access a comprehensive suite of professional tools designed for modern entrepreneurs

Advanced Search

Find what you need instantly with our powerful search engine and smart filters

Showcase variant (image-based cards):

Editor templates preview

Templates

Get started fast with prebuilt editor templates that include commonly used features.

Component library preview

Components

Already using our system? Drop in just the pieces you need with our modular components.

Fifth Section - Quotes

Quotes with attribution and roles:

Great design is about creating experiences that feel natural and intuitive. Every element should have a purpose and enhance the user's journey.

Jane Smith
Product Designer

Sixth Section - Stats Component

Show data with impact using the Stats component:

Platform Performance Metrics

3x
Productivity Increase
faster workflows
98%
Customer Satisfaction
approval rating
95
Performance Score
system reliability

Seventh Section - Newsletter Card

Capture email subscriptions with a conversion-optimized card.

Stay in the loop with dating insights

Get the latest dating tips, stats, and insights delivered to your inbox. No spam, just valuable content.

  • Dating tips & tricks: Improve your profile and conversation game
  • Latest statistics: Stay updated with dating trends and insights
  • Exclusive content: Get access to premium guides and resources

Eighth Section - Image Gallery

Galleries balance one to five images automatically and open into a keyboard-navigable lightbox.

Ninth Section - Content Cards

Content cards connect an article to the next useful Promad surface without falling back to one generic CTA.

Tenth Section - Itinerary

Three-base test route

  1. Lisbon4 weeks

    Settle in, establish a work rhythm, and test the social layer.

  2. Mexico City6 weeks

    Compare cost, pace, neighborhoods, and long-stay logistics.

  3. Tokyo3 weeks

    Finish with a dense city that rewards preparation.

Eleventh Section - Editorial Divider

Build a life that travels well

The useful details start after the arrival photo.

Twelfth Section - FAQ

Practical details

Questions worth answering

Should every article include a content card?+

No. Use one when the reader has reached a real decision point and the destination, gear, or newsletter path is a useful continuation.

Can the default copy be changed?+

Yes. Override the title, description, button text, destination, or badge while keeping the reusable visual and analytics contract.


All components showcased.

About the Author

Kristian Boe

Kristian Boe

Founder of Promad, writing about the places, tools, and tradeoffs behind a serious life across borders.

5 min read

Keep reading

More field notes, fewer highlight reels

View every article →

The Promad Brief

A useful destination and something worth packing. Sometimes a tool sneaks in. Five minutes, every Tuesday.

We care about your data. Read our privacy policy.

© 2026 Promad.life