shoelace/docs/pages/components/card.md

meta	layout
title description Card Cards can be used to group related subjects in a container.	component

Examples

Basic Card

Basic cards aren't very exciting, but they can display any content you want them to. This is the standard container to use when displaying content on a standard page with a gray-100 background.

<div class="page-basic">
  <sl-card class="card-basic">
    This is just a basic card. No image, no header, and no footer. Just your content.
  </sl-card>
</div>

<style>
  .page-basic {
    background: var(--sl-color-neutral-100);
    padding: var(--ts-spacing-large);
  }
  .card-basic {
    max-width: 300px;
  }
</style>

.page-basic
  sl-card.card-basic
    | This is just a basic card. No image, no header, and no footer. Just your content.

css:
  .page-basic {
    @apply bg-gray-100 p-6;
  }

  .card-basic {
    @apply max-w-[300px];
  }

import SlCard from '@teamshares/shoelace/dist/react/card';

const css = `
  .page-basic {
    background: var(--sl-color-neutral-100);
    padding: var(--ts-spacing-large);
  }
  .card-basic {
    max-width: 300px;
  }
`;

const App = () => (
  <>
    <SlCard className="card-basic">
      This is just a basic card. No image, no header, and no footer. Just your content.
    </SlCard>

    <style>{css}</style>
  </>
);

Card with No Shadow

Use the noShadow property to remove a card's default box shadow. This is useful when nesting cards inside another card.

<div class="page-basic">
  <sl-card>
    <div slot="header">Card with nested cards</div>
    <div class="nested-cards">
      <sl-card noShadow> This is a basic card with no shadow, nested inside a standard card with shadow.</sl-card>
      <sl-card noShadow> This is a basic card with no shadow, nested inside a standard card with shadow.</sl-card>
      <sl-card noShadow> This is a basic card with no shadow, nested inside a standard card with shadow.</sl-card>
    </div>
  </sl-card>
</div>

<style>
  .page-basic {
    background: var(--sl-color-neutral-100);
    padding: var(--ts-spacing-large);
  }
  .nested-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    gap: var(--sl-spacing-medium);
}
</style>

.page-basic
  sl-card
    div slot="header" Card with nested cards
    .nested-cards
      sl-card noShadow=true
        |  This is a basic card with no shadow, nested inside a standard card with shadow.
      sl-card noShadow=true
        |  This is a basic card with no shadow, nested inside a standard card with shadow.
      sl-card noShadow=true
        |  This is a basic card with no shadow, nested inside a standard card with shadow.

css:
  .page-basic {
    @apply bg-gray-100 p-6;
  }
  .nested-cards {
    @apply grid grid-cols-2 w-full gap-4;
  }

import { SlCard } from '@teamshares/shoelace/dist/react';

const css = `
  .card-basic {
    max-width: 300px;
  }
`;

const App = () => (
  <>
    <SlCard className="card-basic" noShadow>
      This is just a basic card with no shadow.
    </SlCard>

    <style>{css}</style>
  </>
);

Loading Card

Use the loading property to indicate that a process related to a card is in progress. An overlay will cover the entire card and an sl-spinner component will be displayed on top of the overlay.

<div class="page-basic">
  <sl-card class="card-loading" loading>
    This is a basic card in a loading state.
  </sl-card>
</div>

<style>
  .page-basic {
    background: var(--sl-color-neutral-100);
    padding: var(--ts-spacing-large);
  }
  .card-loading {
    max-width: 300px;
  }
</style>

.page-basic
  sl-card.card-loading loading=true
    |   This is a basic card in a loading state.

css:
  .page-basic {
    @apply bg-gray-100 p-6;
  }
  .card-loading {
    @apply max-w-[300px];
  }

import { SlCard } from '@teamshares/shoelace/dist/react';

const css = `
  .card-basic {
    max-width: 300px;
  }
`;

const App = () => (
  <>
    <SlCard className="card-basic" loading>
      This is a basic card in a loading state.
    </SlCard>

    <style>{css}</style>
  </>
);

Empty State Card

Use the emptyState property to style the card for an empty state. This will make the card less prominent by setting the background color to transparent (showing the gray-100 page behind it) and darken the border slightly.

<div class="page-basic">
    <sl-card class="card-empty" emptyState>
      This is a basic card styled as an empty state container.
      <br/><br/>
      Fill it with content using the Empty State View Component!
    </sl-card>
</div>
<style>
  .page-basic {
    background: var(--sl-color-neutral-100);
    padding: var(--ts-spacing-large);
  }
  .card-empty {
    max-width: 300px;
  }
</style>

.page-basic
  sl-card.card-empty emptyState=true
    |  This is a basic card styled as an empty state container.
    br
    br
    |  Fill it with content using the Empty State View Component!

css:
  .page-basic {
    @apply bg-gray-100 p-6;
  }
  .card-empty {
    @apply max-w-[300px];
  }

import { SlCard } from '@teamshares/shoelace/dist/react';

const css = `
  .card-basic {
    max-width: 300px;
  }
`;

const App = () => (
  <>
    <SlCard className="card-basic" loading>
      This is a basic card in a loading state.
    </SlCard>

    <style>{css}</style>
  </>
);

Card with Header

Use slot="header" to display header content in the card. Other than padding and a bottom border, headers have no styling applied by default.

To optionally apply a flex/space-between layout to a header with a title and one or more button actions (or other content to display on the right), use the actionHeader property on sl-card.

<div class="page-basic">
  <sl-card class="card-header">
    <div slot="header">
      <div class="ts-heading-7">Card title</div>
      <div class="ts-body-2">Description</div>
    </div>
    This card has a header with no additional styling applied by default.
  </sl-card>
    <sl-card class="card-header" actionHeader >
    <div slot="header">
      <div class="ts-heading-7">Card title</div>
      <div class="header-actions">
        <sl-tooltip content="Edit">
          <sl-icon-button library="fa" name="pencil"></sl-icon-button>
        </sl-tooltip>
        <sl-tooltip content="Delete">
          <sl-icon-button library="fa" name="trash"></sl-icon-button>
        </sl-tooltip>
      </div>
    </div>
    This card is using the <code>actionHeader</code> property, which applies a <code>flex/space-between</code> layout to the header.
    <br/><br/>
    To display more than one action button, wrap the buttons in a container.
  </sl-card>
</div>
<style>
  .page-basic {
    background: var(--sl-color-neutral-100);
    padding: var(--ts-spacing-large);
  }
  .card-header {
    margin: var(--sl-spacing-x-small) 0;
    width: 100%;
  }
  .header-actions * {
    margin-inline-start: var(--sl-spacing-x-small);
  }
</style>

.page-basic
  sl-card.card-header
    div slot="header"
      .ts-heading-7 Card title
      .ts-body-2 Description
    | This card has a header with no additional styling applied by default.
  sl-card.card-header actionHeader=true
    div slot="header"
      .ts-heading-7 Card title
      .header-actions
        sl-tooltip content="Edit"
          sl-icon-button library="fa" name="pencil"
        sl-tooltip content="Delete"
          sl-icon-button library="fa" name="trash"
    | This card is using the
    code actionHeader
    |  property, which applies a
    code flex/space-between
    |  layout to the header.
    br
    br
    | To display more than one action button, wrap the buttons in a container.

css:
  .page-basic {
    @apply bg-gray-100 p-6;
  }

  .card-header {
    @apply my-2 w-full;
  }

  .header-actions * {
    @apply ms-2;
  }

import SlCard from '@teamshares/shoelace/dist/react/card';
import SlIconButton from '@teamshares/shoelace/dist/react/icon-button';

const css = `
  .card-header {
    max-width: 300px;
  }

  .card-header [slot="header"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .card-header sl-icon-button {
    font-size: var(--sl-font-size-medium);
  }
`;

const App = () => (
  <>
    <SlCard className="card-header">
      <div slot="header">
        Card header
        <SlIconButton library="fa" name="fas-pencil"></SlIconButton>
      </div>
      This card has a header. You can put all sorts of things in it!
    </SlCard>

    <style>{css}</style>
  </>
);

Card with Footer

Use slot="footer" to display footer content in the card. Similar to the header, footers have no styling applied by default other than padding and a top border.

To optionally apply a flex/flex-end layout to a footer with one or more buttons, use the buttonFooter property on sl-card.

<div class="page-basic">
  <sl-card class="card-footer">
    This card has a footer with no additional styling applied by default.
    <div slot="footer">
      <a href="#" class="ts-body-2 ts-text-link">Use for links or whatever!</a>
    </div>
  </sl-card>
  <sl-card class="card-footer" buttonFooter>
    This card is using the <code>buttonFooter</code> property, which applies a <code>flex/flex-end</code> layout and <code>8 px gap</code>to footer elements.
    <div slot="footer">
      <sl-button variant="default">Default</sl-button>
      <sl-button variant="primary">Primary</sl-button>
    </div>
  </sl-card>
</div>

<style>
  .page-basic {
    background: var(--sl-color-neutral-100);
    padding: var(--ts-spacing-large);
  }
  .card-footer {
    margin: var(--sl-spacing-x-small) 0;
    width: 100%;
  }
</style>

.page-basic
  sl-card.card-footer
    | This card has a footer with no additional styling applied by default.
    div slot="footer"
      a href="#" class="ts-body-2 ts-text-link" Use for links or whatever!
  sl-card.card-footer buttonFooter=true
    | Thi s card is using the
    code buttonFooter
    |  property, which applies a
    code flex/flex-end
    |  layout and
    code 8 px gap
    |  to footer elements.
    div slot="footer"
      sl-button variant="default" Default
      sl-button variant="primary" Primary
css:
  .page-basic {
    @apply bg-gray-100 p-6;
  }
  .card-footer {
    @apply my-2 w-full;
  }

import SlButton from '@teamshares/shoelace/dist/react/button';
import SlCard from '@teamshares/shoelace/dist/react/card';
import SlRating from '@teamshares/shoelace/dist/react/rating';

const css = `
  .card-footer {
    max-width: 300px;
  }

  .card-footer [slot="footer"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-footer [slot='footer'] > * {
  margin-inline-start: 0.5rem;
  }
`;

const App = () => (
  <>
    <SlCard className="card-footer">
      This card has a footer. You can put all sorts of things in it!
      <div slot="footer">
        <SlRating></SlRating>
        <SlButton slot="footer" variant="primary">
          Preview
        </SlButton>
      </div>
    </SlCard>

    <style>{css}</style>
  </>
);

Compact Card

Use the compact property to reduce spacing and remove the borders between the header, body, and footer.

<div class="page-basic">
  <sl-card class="card-compact" compact buttonFooter>
    <div slot="header">
      <div class="ts-heading-8">Compact card header</div>
    </div>
    This card is using the <code>compact</code> property, which reduces spacing and removes the borders between the header, body, and footer.
    <div slot="footer">
      <sl-button variant="default" size="small">Default</sl-button>
      <sl-button variant="primary" size="small">Primary</sl-button>
    </div>
  </sl-card>
</div>

<style>
  .card-compact {
    width: 400px;
  }
</style>

.page-basic
  sl-card.card-compact compact=true buttonFooter=true
    div slot="header
      .ts-heading-8 Compact card header
    | This card is using the
    code compact
    | property, which reduces spacing and removes the borders between the header, body, and footer.
    div slot="footer"
      sl-button variant="default" size="small" Default
      sl-button variant="primary" size="small" Primary

css:
  .card-footer {
    @apply w-[400px];
  }

import SlButton from '@teamshares/shoelace/dist/react/button';
import SlCard from '@teamshares/shoelace/dist/react/card';
import SlRating from '@teamshares/shoelace/dist/react/rating';

const css = `
  .card-footer {
    max-width: 300px;
  }

  .card-footer [slot="footer"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-footer [slot='footer'] > * {
  margin-inline-start: 0.5rem;
  }
`;

const App = () => (
  <>
    <SlCard className="card-footer">
      This card has a footer. You can put all sorts of things in it!
      <div slot="footer">
        <SlRating></SlRating>
        <SlButton slot="footer" variant="primary">
          Preview
        </SlButton>
      </div>
    </SlCard>

    <style>{css}</style>
  </>
);

Images

Cards accept an image slot. The image is displayed atop the card and stretches to fit.

:::warning Note: There's currently no use case for displaying images in cards in our apps, and there is no Figma component for this option. Please check with the design team before using this option. :::

<sl-card class="card-image">
  <img
    slot="image"
    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."
  />
  This is a kitten, but not just any kitten. This kitten likes walking along pallets.
</sl-card>

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

sl-card.card-image
  img slot="image" 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."
  | This is a kitten, but not just any kitten. This kitten likes walking along pallets.

css:
  .card-image {
    max-width: 300px;
  }

import SlCard from '@teamshares/shoelace/dist/react/card';

const css = `
  .card-image {
    max-width: 300px;
  }
`;

const App = () => (
  <>
    <SlCard className="card-image">
      <img
        slot="image"
        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."
      />
      This is a kitten, but not just any kitten. This kitten likes walking along pallets.
    </SlCard>

    <style>{css}</style>
  </>
);