Skip to content
StudioCMS
UI
Docs

Card

A simple card component to wrap other stuff in!

Usage

'Read the “', Usage, '” section'

Content

Variants New!

'Read the “', Variants , '” section'

Instead of just having a bordered card, you can use the variant prop to change the card’s appearance. Set it to filled to have a card with a filled background:

Content

Full Width & Full Height

'Read the “', Full Width & Full Height, '” section'

You can set the card to grow to its parent containers width using the fullWidth param:

Content

Additionally, you can set the card to grow to its parent containers height using the fullHeight param:

Content

Header & Footer New!

'Read the “', Header & Footer , '” section'

The card component supports a header and footer slot:

Header Content

Lorem ipsum dolor sit amet. Et nulla cumque et suscipit molestiae est quam eaque et placeat iste est velit dignissimos aut totam voluptatum qui eveniet nostrum. Aut neque reprehenderit est vero debitis in inventore voluptas ut dolores facilis et voluptatibus quibusdam aut dolorum sunt non vitae sequi.

Footer Content

Polymorphic

'Read the “', Polymorphic, '” section'

A card can be anything you want it to be, literally! Cards support Astro’s Polymorphic type, meaning you can render the card as whatever you want by passing the as attribute. Here’s a card that renders as an <a> tag instead of a <div>: