Mobile App
Starter Kit V1.0

Search…

Mobile App
Starter Kit V1.0

Search…

Menu

Mobile App
Starter Kit V1.0

Go back

Card

Live in Codebase

The Card component groups related content and actions i
nto a clear, scannable unit. By combining text, media, and interactions within a defined boundary, cards create hierarchy and focus, making information easier to browse and engage with across layouts and devices.

AA

WCAG 2.1 accessibility compliant

Go back

Card

Live in Codebase

The Card component groups related content and actions i
nto a clear, scannable unit. By combining text, media, and interactions within a defined boundary, cards create hierarchy and focus, making information easier to browse and engage with across layouts and devices.

AA

WCAG 2.1 accessibility compliant

Go back

Card

The Card component groups related content and actions i
nto a clear, scannable unit. By combining text, media, and interactions within a defined boundary, cards create hierarchy and focus, making information easier to browse and engage with across layouts and devices.

Github Repo

This is currently live in the Github Codebase

Github Repo

This is currently live in the Github Codebase

Github Repo

This is currently live in the Github Codebase

Figma Designs

View Figma Component Designs

Figma Designs

View Figma Component Designs

Figma Designs

View Figma Component Designs

When to use

When not to use

✅ Use cards to group content and actions around a single topic.

⛔️ Avoid nesting cards within other cards, use a divider instead to separate sections.

✅ Wrap forms, such as a login form, inside a card for clarity.

⛔️ Don’t use cards for drawing strong attention; they aren’t meant for alerts or highlights.

✅ Always include a header when placing a Table component inside a card.

⛔️ Don’t rely on cards to communicate important changes or conditions in the interface.

Select Card

Specialized forms centered around dropdown selections with supporting descriptive content. Perfect for preference settings, category selection, or configuration screens where users need context and explanation alongside their choices.

Anatomy

Element

Description

  1. Image

Card component Image

  1. Title

Card component title text

  1. Description

Text

  1. Select

Select component

  1. Body

Text

  1. Button Group

Secondary / Primary button

Spacing

Card components use a structured spacing system with consistent padding tokens across different sections, providing visual hierarchy and content organization.

p-lg (24px) - CardHeader and CardFooter main padding

px-lg (24px) - CardContent horizontal padding

pt-xxs (4px) - CardContent top padding

pt-md (16px) - CardFooter top padding when combined with content

pb-xs (8px) - CardHeader bottom padding reduction

gap-xs (8px) - CardOverline icon and text spacing

mb-xs, mb-xxs, mb-none - Various bottom margins for text elements

An accordion-style UI component with two sections. The top section, labeled ‘More info,’ has a red circle with a slash icon indicating a poor label choice. The bottom section, labeled ‘Shipping & Returns,’ has a green checkmark icon indicating a good label choice. Both sections have a ‘+’ icon on the right, suggesting they can be expanded.

Commerce Card

Product-centric cards displaying items with pricing, availability badges, and purchase actions. Designed for e-commerce workflows with clear product information and dual action buttons for cart and direct purchase options.

Anatomy

Element

Description

  1. Image

Card component Image

  1. Title

Card component title text

  1. Badge

Badge component

  1. Description

Text

  1. Button Group

Secondary / Primary button

Spacing

An accordion-style UI component with two sections. The top section, labeled ‘More info,’ has a red circle with a slash icon indicating a poor label choice. The bottom section, labeled ‘Shipping & Returns,’ has a green checkmark icon indicating a good label choice. Both sections have a ‘+’ icon on the right, suggesting they can be expanded.

Log In Card

Traditional input forms featuring header imagery, titles, and multiple form fields like email and password inputs. These cards are ideal for login, signup, and data collection workflows with clear call-to-action buttons for form submission or cancellation.

Anatomy

Element

Description

  1. Image

Card component Image

  1. Title

Card component title text

  1. Description

Text

  1. Text Input

Text Input Component

  1. Text Input

Text Input Component

  1. Button Group

Secondary / Primary button

Spacing

An accordion-style UI component with two sections. The top section, labeled ‘More info,’ has a red circle with a slash icon indicating a poor label choice. The bottom section, labeled ‘Shipping & Returns,’ has a green checkmark icon indicating a good label choice. Both sections have a ‘+’ icon on the right, suggesting they can be expanded.

Entertainment Card

Media-focused cards showcasing TV shows, movies, or content with category overlines, badges for genres or status, and action buttons for favoriting or interaction. These cards emphasize visual hierarchy and content discovery.

Anatomy

Element

Description

  1. Image

Card component Image

  1. Icon

Lucide Icon TV

  1. Overline

Text

  1. Title

Card component title text

  1. Badge

Badge Component

  1. Description

Text

  1. Button

Secondary Button component

Spacing

An accordion-style UI component with two sections. The top section, labeled ‘More info,’ has a red circle with a slash icon indicating a poor label choice. The bottom section, labeled ‘Shipping & Returns,’ has a green checkmark icon indicating a good label choice. Both sections have a ‘+’ icon on the right, suggesting they can be expanded.

Array Card

Time-based or option-based cards featuring arrays of selectable badges for scheduling, booking, or choice-making interfaces. Commonly used for appointment booking, event scheduling, or preference selection workflows.

Anatomy

Time/option-based cards with badge arrays for booking and scheduling

Element

Description

  1. Image

Card component Image

  1. Title

Text

  1. Badge

Badge component

  1. Description

Text

  1. Badge array

Badge Component

  1. Button

Primary Button

Spacing


When to use

When not to use

✅ Use cards to group content and actions around a single topic.

⛔️ Avoid nesting cards within other cards, use a divider instead to separate sections.

✅ Wrap forms, such as a login form, inside a card for clarity.

⛔️ Don’t use cards for drawing strong attention; they aren’t meant for alerts or highlights.

✅ Always include a header when placing a Table component inside a card.

⛔️ Don’t rely on cards to communicate important changes or conditions in the interface.

Select Card

Specialized forms centered around dropdown selections with supporting descriptive content. Perfect for preference settings, category selection, or configuration screens where users need context and explanation alongside their choices.

Anatomy

Element

Description

  1. Image

Card component Image

  1. Title

Card component title text

  1. Description

Text

  1. Select

Select component

  1. Body

Text

  1. Button Group

Secondary / Primary button

Spacing

Card components use a structured spacing system with consistent padding tokens across different sections, providing visual hierarchy and content organization.

p-lg (24px) - CardHeader and CardFooter main padding

px-lg (24px) - CardContent horizontal padding

pt-xxs (4px) - CardContent top padding

pt-md (16px) - CardFooter top padding when combined with content

pb-xs (8px) - CardHeader bottom padding reduction

gap-xs (8px) - CardOverline icon and text spacing

mb-xs, mb-xxs, mb-none - Various bottom margins for text elements

An accordion-style UI component with two sections. The top section, labeled ‘More info,’ has a red circle with a slash icon indicating a poor label choice. The bottom section, labeled ‘Shipping & Returns,’ has a green checkmark icon indicating a good label choice. Both sections have a ‘+’ icon on the right, suggesting they can be expanded.

Commerce Card

Product-centric cards displaying items with pricing, availability badges, and purchase actions. Designed for e-commerce workflows with clear product information and dual action buttons for cart and direct purchase options.

Anatomy

Element

Description

  1. Image

Card component Image

  1. Title

Card component title text

  1. Badge

Badge component

  1. Description

Text

  1. Button Group

Secondary / Primary button

Spacing

An accordion-style UI component with two sections. The top section, labeled ‘More info,’ has a red circle with a slash icon indicating a poor label choice. The bottom section, labeled ‘Shipping & Returns,’ has a green checkmark icon indicating a good label choice. Both sections have a ‘+’ icon on the right, suggesting they can be expanded.

Log In Card

Traditional input forms featuring header imagery, titles, and multiple form fields like email and password inputs. These cards are ideal for login, signup, and data collection workflows with clear call-to-action buttons for form submission or cancellation.

Anatomy

Element

Description

  1. Image

Card component Image

  1. Title

Card component title text

  1. Description

Text

  1. Text Input

Text Input Component

  1. Text Input

Text Input Component

  1. Button Group

Secondary / Primary button

Spacing

An accordion-style UI component with two sections. The top section, labeled ‘More info,’ has a red circle with a slash icon indicating a poor label choice. The bottom section, labeled ‘Shipping & Returns,’ has a green checkmark icon indicating a good label choice. Both sections have a ‘+’ icon on the right, suggesting they can be expanded.

Entertainment Card

Media-focused cards showcasing TV shows, movies, or content with category overlines, badges for genres or status, and action buttons for favoriting or interaction. These cards emphasize visual hierarchy and content discovery.

Anatomy

Element

Description

  1. Image

Card component Image

  1. Icon

Lucide Icon TV

  1. Overline

Text

  1. Title

Card component title text

  1. Badge

Badge Component

  1. Description

Text

  1. Button

Secondary Button component

Spacing

An accordion-style UI component with two sections. The top section, labeled ‘More info,’ has a red circle with a slash icon indicating a poor label choice. The bottom section, labeled ‘Shipping & Returns,’ has a green checkmark icon indicating a good label choice. Both sections have a ‘+’ icon on the right, suggesting they can be expanded.

Array Card

Time-based or option-based cards featuring arrays of selectable badges for scheduling, booking, or choice-making interfaces. Commonly used for appointment booking, event scheduling, or preference selection workflows.

Anatomy

Time/option-based cards with badge arrays for booking and scheduling

Element

Description

  1. Image

Card component Image

  1. Title

Text

  1. Badge

Badge component

  1. Description

Text

  1. Badge array

Badge Component

  1. Button

Primary Button

Spacing


When to use

When not to use

✅ Use cards to group content and actions around a single topic.

⛔️ Avoid nesting cards within other cards, use a divider instead to separate sections.

✅ Wrap forms, such as a login form, inside a card for clarity.

⛔️ Don’t use cards for drawing strong attention; they aren’t meant for alerts or highlights.

✅ Always include a header when placing a Table component inside a card.

⛔️ Don’t rely on cards to communicate important changes or conditions in the interface.

Select Card

Specialized forms centered around dropdown selections with supporting descriptive content. Perfect for preference settings, category selection, or configuration screens where users need context and explanation alongside their choices.

Anatomy

Element

Description

  1. Image

Card component Image

  1. Title

Card component title text

  1. Description

Text

  1. Select

Select component

  1. Body

Text

  1. Button Group

Secondary / Primary button

Spacing

Card components use a structured spacing system with consistent padding tokens across different sections, providing visual hierarchy and content organization.

p-lg (24px) - CardHeader and CardFooter main padding

px-lg (24px) - CardContent horizontal padding

pt-xxs (4px) - CardContent top padding

pt-md (16px) - CardFooter top padding when combined with content

pb-xs (8px) - CardHeader bottom padding reduction

gap-xs (8px) - CardOverline icon and text spacing

mb-xs, mb-xxs, mb-none - Various bottom margins for text elements

An accordion-style UI component with two sections. The top section, labeled ‘More info,’ has a red circle with a slash icon indicating a poor label choice. The bottom section, labeled ‘Shipping & Returns,’ has a green checkmark icon indicating a good label choice. Both sections have a ‘+’ icon on the right, suggesting they can be expanded.

Commerce Card

Product-centric cards displaying items with pricing, availability badges, and purchase actions. Designed for e-commerce workflows with clear product information and dual action buttons for cart and direct purchase options.

Anatomy

Element

Description

  1. Image

Card component Image

  1. Title

Card component title text

  1. Badge

Badge component

  1. Description

Text

  1. Button Group

Secondary / Primary button

Spacing

An accordion-style UI component with two sections. The top section, labeled ‘More info,’ has a red circle with a slash icon indicating a poor label choice. The bottom section, labeled ‘Shipping & Returns,’ has a green checkmark icon indicating a good label choice. Both sections have a ‘+’ icon on the right, suggesting they can be expanded.

Log In Card

Traditional input forms featuring header imagery, titles, and multiple form fields like email and password inputs. These cards are ideal for login, signup, and data collection workflows with clear call-to-action buttons for form submission or cancellation.

Anatomy

Element

Description

  1. Image

Card component Image

  1. Title

Card component title text

  1. Description

Text

  1. Text Input

Text Input Component

  1. Text Input

Text Input Component

  1. Button Group

Secondary / Primary button

Spacing

An accordion-style UI component with two sections. The top section, labeled ‘More info,’ has a red circle with a slash icon indicating a poor label choice. The bottom section, labeled ‘Shipping & Returns,’ has a green checkmark icon indicating a good label choice. Both sections have a ‘+’ icon on the right, suggesting they can be expanded.

Entertainment Card

Media-focused cards showcasing TV shows, movies, or content with category overlines, badges for genres or status, and action buttons for favoriting or interaction. These cards emphasize visual hierarchy and content discovery.

Anatomy

Element

Description

  1. Image

Card component Image

  1. Icon

Lucide Icon TV

  1. Overline

Text

  1. Title

Card component title text

  1. Badge

Badge Component

  1. Description

Text

  1. Button

Secondary Button component

Spacing

An accordion-style UI component with two sections. The top section, labeled ‘More info,’ has a red circle with a slash icon indicating a poor label choice. The bottom section, labeled ‘Shipping & Returns,’ has a green checkmark icon indicating a good label choice. Both sections have a ‘+’ icon on the right, suggesting they can be expanded.

Array Card

Time-based or option-based cards featuring arrays of selectable badges for scheduling, booking, or choice-making interfaces. Commonly used for appointment booking, event scheduling, or preference selection workflows.

Anatomy

Time/option-based cards with badge arrays for booking and scheduling

Element

Description

  1. Image

Card component Image

  1. Title

Text

  1. Badge

Badge component

  1. Description

Text

  1. Badge array

Badge Component

  1. Button

Primary Button

Spacing


Continue reading

Previous

Calendar

Next

Checkbox

Previous

Calendar

Next

Checkbox

Previous

Calendar

Next

Checkbox

Get in touch

Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.

Send a message

Get in touch

Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.

Send a message

Get in touch

Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.

Send a message