2023-12-05 17:53:45 +00:00
---
meta:
title: Card
description: Cards can be used to group related subjects in a container.
layout: component
---
2020-07-22 20:02:49 +00:00
2023-12-05 17:53:45 +00:00
## Examples
<!-- ### Complex Card
2020-07-22 20:02:49 +00:00
2023-12-05 17:53:45 +00:00
```html:preview
2020-07-22 20:02:49 +00:00
< sl-card class = "card-overview" >
2022-03-02 15:10:41 +00:00
< img
slot="image"
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1& ixid=eyJhcHBfaWQiOjEyMDd9& auto=format& fit=crop& w=500& q=80"
2020-07-22 20:02:49 +00:00
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
2022-03-02 15:10:41 +00:00
/>
2020-07-22 20:02:49 +00:00
2022-03-02 15:10:41 +00:00
< strong > Mittens< / strong > < br / >
This kitten is as cute as he is playful. Bring him home today!< br / >
2020-07-22 20:02:49 +00:00
< small > 6 weeks old< / small >
< div slot = "footer" >
2021-12-13 22:38:40 +00:00
< sl-button variant = "primary" pill > More Info< / sl-button >
2020-07-22 20:02:49 +00:00
< sl-rating > < / sl-rating >
< / div >
< / sl-card >
< style >
.card-overview {
max-width: 300px;
}
.card-overview small {
2023-08-04 01:27:10 +00:00
color: var(--sl-color-neutral-700);
2020-07-22 20:02:49 +00:00
}
2022-03-02 15:10:41 +00:00
.card-overview [slot='footer'] {
display: flex;
justify-content: space-between;
2020-07-22 20:02:49 +00:00
align-items: center;
}
< / style >
```
2023-12-05 17:53:45 +00:00
```pug:slim
2023-02-16 23:21:53 +00:00
sl-card.card-overview
img slot="image" 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
br
| This kitten is as cute as he is playful. Bring him home today!
br
small 6 weeks old
div slot="footer"
2024-10-01 22:36:50 +00:00
sl-button variant="primary" pill=true More Info
2023-02-16 23:21:53 +00:00
sl-rating
css:
.card-overview {
max-width: 300px;
}
.card-overview small {
2023-08-04 01:27:10 +00:00
color: var(--sl-color-neutral-700);
2023-02-16 23:21:53 +00:00
}
.card-overview [slot=footer] {
display: flex;
justify-content: space-between;
align-items: center;
}
```
2023-12-05 17:53:45 +00:00
```jsx:react
import SlButton from '@teamshares/shoelace/dist/react/button';
import SlCard from '@teamshares/shoelace/dist/react/card';
import SlRating from '@teamshares/shoelace/dist/react/rating';
2021-11-04 22:12:47 +00:00
const css = `
.card-overview {
max-width: 300px;
}
.card-overview small {
2023-08-04 01:27:10 +00:00
color: var(--sl-color-neutral-700);
2021-11-04 22:12:47 +00:00
}
.card-overview [slot="footer"] {
2023-08-04 01:27:10 +00:00
display: flex;
justify-content: space-between;
2021-11-04 22:12:47 +00:00
align-items: center;
}
`;
const App = () => (
< >
2021-11-05 14:06:06 +00:00
< SlCard className = "card-overview" >
2022-03-02 15:10:41 +00:00
< img
slot="image"
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1& ixid=eyJhcHBfaWQiOjEyMDd9& auto=format& fit=crop& w=500& q=80"
2021-11-04 22:12:47 +00:00
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
/>
2022-03-02 15:10:41 +00:00
< strong > Mittens< / strong >
< br / >
This kitten is as cute as he is playful. Bring him home today!
< br / >
2021-11-04 22:12:47 +00:00
< small > 6 weeks old< / small >
< div slot = "footer" >
2022-03-02 15:10:41 +00:00
< SlButton variant = "primary" pill >
More Info
< / SlButton >
2021-11-04 22:12:47 +00:00
< SlRating > < / SlRating >
< / div >
< / SlCard >
< style > { c s s } < / style >
< />
);
2023-12-05 17:53:45 +00:00
``` -->
2021-11-04 22:12:47 +00:00
2023-12-05 17:53:45 +00:00
### Basic Card
2020-07-22 20:02:49 +00:00
2025-04-18 22:30:29 +00:00
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.
2020-07-22 20:02:49 +00:00
2023-12-05 17:53:45 +00:00
```html:preview
2025-04-18 22:30:29 +00:00
< 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 >
2020-07-22 20:02:49 +00:00
< style >
2025-04-18 22:30:29 +00:00
.page-basic {
background: var(--sl-color-neutral-100);
padding: var(--ts-spacing-large);
}
2020-07-22 20:02:49 +00:00
.card-basic {
max-width: 300px;
}
< / style >
```
2023-12-05 17:53:45 +00:00
```pug:slim
2025-04-18 22:30:29 +00:00
.page-basic
sl-card.card-basic
| This is just a basic card. No image, no header, and no footer. Just your content.
2023-02-16 23:21:53 +00:00
css:
2025-04-18 22:30:29 +00:00
.page-basic {
@apply bg-gray-100 p-6;
}
2023-02-16 23:21:53 +00:00
.card-basic {
2025-04-18 22:30:29 +00:00
@apply max-w-[300px];
2023-02-16 23:21:53 +00:00
}
```
2023-12-05 17:53:45 +00:00
```jsx:react
import SlCard from '@teamshares/shoelace/dist/react/card';
2021-11-04 22:12:47 +00:00
const css = `
2025-04-18 22:30:29 +00:00
.page-basic {
background: var(--sl-color-neutral-100);
padding: var(--ts-spacing-large);
}
2021-11-04 22:12:47 +00:00
.card-basic {
max-width: 300px;
}
`;
const App = () => (
< >
2021-11-05 14:06:06 +00:00
< SlCard className = "card-basic" >
2021-11-04 22:12:47 +00:00
This is just a basic card. No image, no header, and no footer. Just your content.
< / SlCard >
< style > { c s s } < / style >
< />
);
```
2023-12-05 17:53:45 +00:00
### Card with No Shadow
2023-08-04 01:27:10 +00:00
2025-04-18 22:30:29 +00:00
Use the `noShadow` property to remove a card's default box shadow. This is useful when nesting cards inside another card.
2023-08-04 01:27:10 +00:00
2023-12-05 17:53:45 +00:00
```html:preview
2025-04-18 22:30:29 +00:00
< 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 >
2023-08-04 01:27:10 +00:00
< style >
2025-04-18 22:30:29 +00:00
.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);
}
2023-08-04 01:27:10 +00:00
< / style >
```
2023-12-05 17:53:45 +00:00
```pug:slim
2025-04-18 22:30:29 +00:00
.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.
2023-08-04 01:27:10 +00:00
css:
2025-04-18 22:30:29 +00:00
.page-basic {
@apply bg-gray-100 p-6;
}
.nested-cards {
@apply grid grid-cols-2 w-full gap-4;
2023-08-04 01:27:10 +00:00
}
```
2023-12-05 17:53:45 +00:00
```jsx:react
2023-08-04 01:27:10 +00:00
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 > { c s s } < / style >
< />
);
```
2025-04-18 22:30:29 +00:00
### Loading Card
2020-07-22 20:02:49 +00:00
2025-04-18 22:30:29 +00:00
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.
2020-07-22 20:02:49 +00:00
2023-12-05 17:53:45 +00:00
```html:preview
2025-04-18 22:30:29 +00:00
< div class = "page-basic" >
< sl-card class = "card-loading" loading >
This is a basic card in a loading state.
< / sl-card >
< / div >
2020-07-22 20:02:49 +00:00
< style >
2025-04-18 22:30:29 +00:00
.page-basic {
background: var(--sl-color-neutral-100);
padding: var(--ts-spacing-large);
}
.card-loading {
2021-11-04 22:12:47 +00:00
max-width: 300px;
}
2025-04-18 22:30:29 +00:00
< / style >
```
2021-11-04 22:12:47 +00:00
2025-04-18 22:30:29 +00:00
```pug:slim
.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];
2021-11-04 22:12:47 +00:00
}
2025-04-18 22:30:29 +00:00
```
2021-11-04 22:12:47 +00:00
2025-04-18 22:30:29 +00:00
```jsx:react
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 > { c s s } < / 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.
```html:preview
< 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;
2021-11-04 22:12:47 +00:00
}
2020-07-22 20:02:49 +00:00
< / style >
```
2023-12-05 17:53:45 +00:00
```pug:slim
2025-04-18 22:30:29 +00:00
.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!
2023-02-16 23:21:53 +00:00
css:
2025-04-18 22:30:29 +00:00
.page-basic {
@apply bg-gray-100 p-6;
}
.card-empty {
@apply max-w-[300px];
}
```
```jsx:react
import { SlCard } from '@teamshares/shoelace/dist/react';
const css = `
.card-basic {
2023-02-16 23:21:53 +00:00
max-width: 300px;
}
2025-04-18 22:30:29 +00:00
`;
2023-02-16 23:21:53 +00:00
2025-04-18 22:30:29 +00:00
const App = () => (
< >
< SlCard className = "card-basic" loading >
This is a basic card in a loading state.
< / SlCard >
< style > { c s s } < / 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 < code > flex/space-between</ code > 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` .
```html:preview
< 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 >
```
```pug:slim
.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;
2023-02-16 23:21:53 +00:00
}
2025-04-18 22:30:29 +00:00
.card-header {
@apply my-2 w-full;
}
.header-actions * {
@apply ms-2;
2023-02-16 23:21:53 +00:00
}
```
2023-12-05 17:53:45 +00:00
```jsx:react
import SlCard from '@teamshares/shoelace/dist/react/card';
import SlIconButton from '@teamshares/shoelace/dist/react/icon-button';
2021-11-04 22:12:47 +00:00
const css = `
.card-header {
max-width: 300px;
}
.card-header [slot="header"] {
2023-08-04 01:27:10 +00:00
display: flex;
align-items: center;
2021-11-04 22:12:47 +00:00
justify-content: space-between;
}
.card-header sl-icon-button {
font-size: var(--sl-font-size-medium);
}
`;
const App = () => (
< >
2021-11-05 14:06:06 +00:00
< SlCard className = "card-header" >
2021-11-04 22:12:47 +00:00
< div slot = "header" >
2023-12-05 17:53:45 +00:00
Card header
< SlIconButton library = "fa" name = "fas-pencil" > < / SlIconButton >
2021-11-04 22:12:47 +00:00
< / div >
This card has a header. You can put all sorts of things in it!
< / SlCard >
< style > { c s s } < / style >
< />
);
```
2023-12-05 17:53:45 +00:00
### Card with Footer
2020-07-22 20:02:49 +00:00
2025-04-18 22:30:29 +00:00
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.
2020-07-22 20:02:49 +00:00
2025-04-18 22:30:29 +00:00
To optionally apply a `flex/flex-end` layout to a footer with one or more buttons, use the `buttonFooter` property on `sl-card` .
2020-07-22 20:02:49 +00:00
2025-04-18 22:30:29 +00:00
```html:preview
< 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 >
2020-07-22 20:02:49 +00:00
< style >
2025-04-18 22:30:29 +00:00
.page-basic {
background: var(--sl-color-neutral-100);
padding: var(--ts-spacing-large);
}
2020-07-22 20:02:49 +00:00
.card-footer {
2025-04-18 22:30:29 +00:00
margin: var(--sl-spacing-x-small) 0;
width: 100%;
2020-07-22 20:02:49 +00:00
}
2025-04-18 22:30:29 +00:00
< / style >
```
2020-07-22 20:02:49 +00:00
2025-04-18 22:30:29 +00:00
```pug:slim
.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;
2020-07-22 20:02:49 +00:00
}
2025-04-18 22:30:29 +00:00
.card-footer {
@apply my-2 w-full;
2023-12-05 17:53:45 +00:00
}
2020-07-22 20:02:49 +00:00
```
2025-04-18 22:30:29 +00:00
```jsx:react
import SlButton from '@teamshares/shoelace/dist/react/button';
import SlCard from '@teamshares/shoelace/dist/react/card';
import SlRating from '@teamshares/shoelace/dist/react/rating';
2023-02-16 23:21:53 +00:00
2025-04-18 22:30:29 +00:00
const css = `
2023-02-16 23:21:53 +00:00
.card-footer {
max-width: 300px;
}
2025-04-18 22:30:29 +00:00
.card-footer [slot="footer"] {
2023-02-16 23:21:53 +00:00
display: flex;
justify-content: space-between;
align-items: center;
}
2023-12-05 17:53:45 +00:00
.card-footer [slot='footer'] > * {
2025-04-18 22:30:29 +00:00
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 > { c s s } < / style >
< />
);
```
### Compact Card
Use the `compact` property to reduce spacing and remove the borders between the header, body, and footer.
```html:preview
< 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 >
```
```pug:slim
.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];
2023-12-05 17:53:45 +00:00
}
2023-02-16 23:21:53 +00:00
```
2023-12-05 17:53:45 +00:00
```jsx:react
import SlButton from '@teamshares/shoelace/dist/react/button';
import SlCard from '@teamshares/shoelace/dist/react/card';
import SlRating from '@teamshares/shoelace/dist/react/rating';
2021-11-04 22:12:47 +00:00
const css = `
.card-footer {
max-width: 300px;
}
.card-footer [slot="footer"] {
2023-08-04 01:27:10 +00:00
display: flex;
justify-content: space-between;
2021-11-04 22:12:47 +00:00
align-items: center;
}
2023-12-05 17:53:45 +00:00
.card-footer [slot='footer'] > * {
margin-inline-start: 0.5rem;
}
2021-11-04 22:12:47 +00:00
`;
const App = () => (
< >
2021-11-05 14:06:06 +00:00
< SlCard className = "card-footer" >
2021-11-04 22:12:47 +00:00
This card has a footer. You can put all sorts of things in it!
< div slot = "footer" >
< SlRating > < / SlRating >
2022-03-02 15:10:41 +00:00
< SlButton slot = "footer" variant = "primary" >
Preview
< / SlButton >
2021-11-04 22:12:47 +00:00
< / div >
< / SlCard >
< style > { c s s } < / style >
< />
);
```
2023-12-05 17:53:45 +00:00
### Images
2020-07-22 20:02:49 +00:00
Cards accept an `image` slot. The image is displayed atop the card and stretches to fit.
2023-12-05 17:53:45 +00:00
:::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.
:::
```html:preview
2020-07-22 20:02:49 +00:00
< sl-card class = "card-image" >
2022-03-02 15:10:41 +00:00
< 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"
2020-07-22 20:02:49 +00:00
alt="A kitten walks towards camera on top of pallet."
2022-03-02 15:10:41 +00:00
/>
2020-07-22 20:02:49 +00:00
This is a kitten, but not just any kitten. This kitten likes walking along pallets.
< / sl-card >
< style >
.card-image {
max-width: 300px;
}
< / style >
```
2023-12-05 17:53:45 +00:00
```pug:slim
2023-02-16 23:21:53 +00:00
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;
}
```
2023-12-05 17:53:45 +00:00
```jsx:react
import SlCard from '@teamshares/shoelace/dist/react/card';
2021-11-04 22:12:47 +00:00
const css = `
.card-image {
max-width: 300px;
}
`;
const App = () => (
< >
2021-11-05 14:06:06 +00:00
< SlCard className = "card-image" >
2022-03-02 15:10:41 +00:00
< 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"
2021-11-04 22:12:47 +00:00
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 > { c s s } < / style >
< />
);
```
