Skip to main content

    Components

    Qwik M3 Card

    This component implements the Material Design 3 card with proper styling and accessibility support. Cards can be elevated, filled, or outlined, and support various content layouts.

    Prop Controls

    Basic Cards

    Elevated Card

    Elevated Card

    This is an elevated card with a subtle shadow

    Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information.

    Filled Card

    Filled Card

    This is a filled card with a solid background

    Filled cards use a solid background color to create hierarchy and draw attention to specific content.

    Outlined Card

    Outlined Card

    This is an outlined card with a border

    Outlined cards have a visual boundary that helps separate them from their background while maintaining a lighter visual weight.

    Advanced Cards

    Card with Image

    Random nature image

    Card with Image

    Cards can include rich media content

    Images can help provide visual context and make cards more engaging. They can be placed at the top of the card.

    Centered Content Card

    Centered Layout

    This card uses centered content layout

    
<Card.Root variant="elevated">
  <Card.Header>
    <Card.Title>Card Title</Card.Title>
    <Card.Description>Optional card description</Card.Description>
  </Card.Header>
  <Card.Content>
    <p>Card content goes here.</p>
  </Card.Content>
  <Card.Footer>
    <button>Action 1</button>
    <button>Action 2</button>
  </Card.Footer>
</Card.Root>