Card

<cs-card>

Stable

Since 0.1

Cards group related content and actions inside a bordered container. Use them to present products, articles, user profiles, or any self-contained unit of information.

A kitten sits patiently between a terracotta pot and decorative grasses.

Mittens
This kitten is as cute as he is playful. Bring him home today!
6 weeks old

More Info

<cs-card class="card-overview">
  <img
    slot="media"
    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
  />

  <strong>Mittens</strong><br />
  This kitten is as cute as he is playful. Bring him home today!<br />
  <small class="cs-caption-s">6 weeks old</small>

  <cs-button slot="footer" variant="brand" pill>More Info</cs-button>
  <cs-rating slot="footer-actions" label="Rating"></cs-rating>
</cs-card>

<style>
  .card-overview {
    width: 300px;
  }
</style>

A kitten between a terracotta pot and decorative grasses.

Mittens This kitten is as cute as he is playful. Bring him home today! More Info

<cs-card>
  <img
    slot="media"
    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
    alt="A kitten between a terracotta pot and decorative grasses."
  />
  <strong slot="header">Mittens</strong>
  This kitten is as cute as he is playful. Bring him home today!
  <cs-button slot="footer" variant="brand" pill>More Info</cs-button>
  <cs-button slot="actions" variant="neutral" appearance="plain">
    <cs-icon name="more_horiz" label="Actions"></cs-icon>
  </cs-button>
</cs-card>

Examples

Basic Card

A card can hold any content. Media, a header, and a footer are all optional.

  This is just a basic card. No media, no header, and no footer. Just your content.

<cs-card class="card-basic">
  This is just a basic card. No media, no header, and no footer. Just your content.
</cs-card>

<style>
  .card-basic {
    max-width: 300px;
  }
</style>

Headers can be used to display titles and more. If using SSR, you need to also use the has-header attribute to add a header to the card (if not, it is added automatically).

  Header Title
  This card has a header. You can put all sorts of things in it!

<cs-card class="card-header">
  <h3 slot="header">Header Title</h3>
  This card has a header. You can put all sorts of things in it!
  <cs-button appearance="plain" slot="header-actions">
    <cs-icon name="settings" label="Settings"></cs-icon>
  </cs-button>
</cs-card>

<style>
  .card-header {
    max-width: 300px;
  }

  .card-header h3 {
    margin: 0;
  }
</style>

Footers can be used to display actions, summaries, or other relevant content. If using SSR, you need to also use the has-footer attribute to add a footer to the card (if not, it is added automatically).

  This card has a footer. You can put all sorts of things in it!

  Preview

<cs-card class="card-footer">
  This card has a footer. You can put all sorts of things in it!

  <cs-rating slot="footer"></cs-rating>

  <cs-button slot="footer-actions" variant="brand">Preview</cs-button>
</cs-card>

<style>
  .card-footer {
    max-width: 300px;
  }
</style>

Media

Card media is displayed atop the card and will stretch to fit. If using SSR, you need to also use the has-media attribute to add a media section to the card (if not, it is added automatically).

A kitten walks towards camera on top of pallet.

This card has an image of a kitten walking along a pallet.

This card has a video of a dog wearing shades.

<div class="cs-grid">
  <cs-card class="card-media">
    <div slot="media" class="cs-frame:landscape">
      <img
        src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
        alt="A kitten walks towards camera on top of pallet."
      />
    </div>
    This card has an image of a kitten walking along a pallet.
  </cs-card>
  <cs-card class="card-media">
    <video slot="media" controls>
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" />
      <p>Your browser doesn't support HTML video</p>
    </video>
    This card has a video of a dog wearing shades.
  </cs-card>
</div>

<style>
  .card-media {
    max-width: 300px;
  }
</style>

Appearance

Use the appearance attribute to change the card’s visual appearance.

Outlined (default)

Filled-Outlined

Plain

Filled

Accent

<div class="cs-grid">
  <cs-card>
    <img
      slot="media"
      src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
      alt="A kitten sits patiently between a terracotta pot and decorative grasses."
    />
    Outlined (default)
  </cs-card>
  <cs-card appearance="filled-outlined">
    <img
      slot="media"
      src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
      alt="A kitten sits patiently between a terracotta pot and decorative grasses."
    />
    Filled-Outlined
  </cs-card>
  <cs-card appearance="plain">
    <img
      slot="media"
      src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
      alt="A kitten sits patiently between a terracotta pot and decorative grasses."
    />
    Plain
  </cs-card>
  <cs-card appearance="filled">
    <img
      slot="media"
      src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
      alt="A kitten sits patiently between a terracotta pot and decorative grasses."
    />
    Filled
  </cs-card>
  <cs-card appearance="accent">
    <img
      slot="media"
      src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
      alt="A kitten sits patiently between a terracotta pot and decorative grasses."
    />
    Accent
  </cs-card>
</div>

Orientation

Set the orientation attribute to horizontal to create a card with a horizontal, side-by-side layout. Make sure to set a width or maximum width for the media slot. Horizontal cards do not currently contain the header and footer slots.

The actions slot is only available for the horizontal orientation.

This card has a horizontal orientation with media, body, and actions arranged side-by-side.

<div class="cs-grid">
  <cs-card orientation="horizontal" class="horizontal-card">
    <img
      slot="media"
      src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
      alt="A kitten sits patiently between a terracotta pot and decorative grasses."
    />
    This card has a horizontal orientation with media, body, and actions arranged side-by-side.
    <cs-button slot="actions" variant="neutral" appearance="plain"
      ><cs-icon name="more_horiz" label="actions"></cs-icon
    ></cs-button>
  </cs-card>
</div>

<style>
  .horizontal-card {
    img[slot='media'] {
      max-width: 300px;
    }
  }
</style>

API

Importing

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick this component, use one of the following snippets.

npm

Self-Hosted

React

import '@cruglobal/cornerstone-components/components/card/card.js';

import './cornerstone/components/card/card.js';

import CsCard from '@cruglobal/cornerstone-components/react/card/index.js';

Slots

Learn more about using slots.

Name	Description
(default)	The card's main content.
`actions`	An optional actions section to render at the end for the horizontal card.
`footer`	An optional footer for the card.
`footer-actions`	An optional actions section to render in the footer of the vertical card.
`header`	An optional header for the card.
`header-actions`	An optional actions section to render in the header of the vertical card.
`media`	An optional media section to render at the start of the card.

Attributes & Properties

Learn more about attributes and properties.

Property	Attribute	Description	Type	Default	Reflects
`appearance`	`appearance`	The card's visual appearance.	`'accent' \| 'filled' \| 'outlined' \| 'filled-outlined' \| 'plain'`	`'outlined'`	Yes
`hasFooter`	`has-footer`	Only required for SSR. Set to `true` if you're slotting in a `footer` element so the server-rendered markup includes the footer before the component hydrates on the client.	`boolean`	`false`	Yes
`hasHeader`	`has-header`	Only required for SSR. Set to `true` if you're slotting in a `header` element so the server-rendered markup includes the header before the component hydrates on the client.	`boolean`	`false`	Yes
`hasMedia`	`has-media`	Only required for SSR. Set to `true` if you're slotting in a `media` element so the server-rendered markup includes the media before the component hydrates on the client.	`boolean`	`false`	Yes
`orientation`	`orientation`	Renders the card's orientation *	`'horizontal' \| 'vertical'`	`'vertical'`	Yes
`ssrFooterActions`	`ssr-footer-actions`	Only required for SSR. Set to `true` if you're slotting in a `footer-actions` element so the server-rendered markup includes the media before the component hydrates on the client.	`boolean`	`false`	Yes
`ssrHeaderActions`	`ssr-header-actions`	Only required for SSR. Set to `true` if you're slotting in a `header-actions` element so the server-rendered markup includes the media before the component hydrates on the client.	`boolean`	`false`	Yes

CSS Custom Properties

Learn more about CSS custom properties.

Name	Description	Default
`--spacing`	The amount of space around and between sections of the card. Expects a single value.	`var(--cs-space-l)`

CSS Parts

Learn more about CSS parts.

Name	Description	CSS selector
`actions`	The container that wraps the card's actions.	`::part(actions)`
`body`	The container that wraps the card's main content.	`::part(body)`
`footer`	The container that wraps the card's footer.	`::part(footer)`
`header`	The container that wraps the card's header.	`::part(header)`
`media`	The container that wraps the card's media.	`::part(media)`

SSR

Learn more about Server-Side Rendering (SSR).

If you use the header, media, or footer slots, set the matching has-header, has-media, or has-footer attribute — otherwise only the card's body will render during SSR. This works around the lack of a :has-slotted CSS pseudo-class, which would normally let us style borders based on slotted content.

Quick Links

Recent Searches