Card

A simple card component to wrap other stuff in!

Usage

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

Preview

Content

Code

CardExample.astro

---
import { Card } from '@studiocms/ui/components';
---

<Card>
  Content
</Card>

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:

Preview

Content

Code

FullVariantExample.astro

---
import { Card } from '@studiocms/ui/components';
---

<Card variant='filled'>
  Content
</Card>

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:

Preview

Content

Code

FullVariantExample.astro

---
import { Card } from '@studiocms/ui/components';
---

<Card fullWidth>
  Content
</Card>

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

Preview

Content

Code

FullHeightCardExample.astro

---
import { Card } from '@studiocms/ui/components';
---

<Card fullHeight>
  Content
</Card>

Header & Footer New!

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

The card component supports a header and footer slot:

Preview

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

Code

CardSlotsExample.astro

---
import { Card } from '@studiocms/ui/components';
---

<Card>
  <h4 slot='header'>Header Content</h4>
  <p>
    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.
  </p>
  <span slot='footer'>Footer Content</span>
</Card>

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>:

Preview

studiocms.dev

Code

CardPolymorphicExample.astro

---
import { Card } from '@studiocms/ui/components';
---

<Card as='a' href='https://studiocms.dev'>
  studiocms.dev
</Card>