Components

Card

<wa-card> Since 2.0 Stable

Cards can be used to group related subjects in a container.

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!
 
<wa-card with-image with-footer class="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</strong><br />
  This kitten is as cute as he is playful. Bring him home today!<br />
  <small class="wa-caption-m">6 weeks old</small>

  <div slot="footer" class="wa-split">
    <wa-button variant="brand" pill>More Info</wa-button>
    <wa-rating label="Rating"></wa-rating>
  </div>
</wa-card>

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

Examples

Basic Card

Basic cards aren't very exciting, but they can display any content you want them to.

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

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

Card with Header

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

This card has a header. You can put all sorts of things in it! 
<wa-card with-header class="card-header">
  <div slot="header" class="wa-split">
    Header Title
    <wa-icon-button name="gear" variant="solid" label="Settings" class="wa-size-m"></wa-icon-button>
  </div>

  This card has a header. You can put all sorts of things in it!
</wa-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 with-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! 
<wa-card with-footer class="card-footer">
  This card has a footer. You can put all sorts of things in it!

  <div slot="footer" class="wa-split">
    <wa-rating></wa-rating>
    <wa-button variant="brand">Preview</wa-button>
  </div>
</wa-card>

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

Images

Card images are displayed atop the card and will stretch to fit. If using SSR, you need to also use the with-image attribute to add an image to the card (if not, it is added automatically).

A kitten walks towards camera on top of pallet. This is a kitten, but not just any kitten. This kitten likes walking along pallets. 
<wa-card with-image 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.
</wa-card>

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

Sizing

Use the size attribute to change a card's size.

<div class="wa-stack">
<wa-card with-footer size="small">
  This is a small card.

  <footer slot="footer" class="wa-split">
    <wa-button variant="brand" pill>More Info</wa-button>
    <wa-rating></wa-rating>
  </footer>
</wa-card>

<wa-card with-footer size="medium">
  This is a medium card (default).

  <footer slot="footer" class="wa-split">
    <wa-button variant="brand" pill>More Info</wa-button>
    <wa-rating></wa-rating>
  </footer>
</wa-card>

<wa-card with-footer size="large">
  This is a large card.

  <footer slot="footer" class="wa-split">
    <wa-button variant="brand" pill>More Info</wa-button>
    <wa-rating></wa-rating>
  </footer>
</wa-card>
</div>

Appearance

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

<div class="wa-grid">
<wa-card>
  <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."
  />
  <div slot="header">Outlined (default)</div>
  Card content.
</wa-card>
<wa-card appearance="outlined filled">
  <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."
  />
  <div slot="header">Outlined filled</div>
  Card content.
</wa-card><wa-card appearance="outlined accent">
  <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."
  />
  <div slot="header">Outlined accent</div>
  Card content.
</wa-card><wa-card appearance="plain">
  <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."
  />
  <div slot="header">Plain</div>
  Card content.
</wa-card><wa-card appearance="filled">
  <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."
  />
  <div slot="header">Filled</div>
  Card content.
</wa-card><wa-card appearance="accent">
  <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."
  />
  <div slot="header">Accent</div>
  Card content.
</wa-card>
</div>

Slots

Learn more about using slots.

Name Description
(default) The card's main content.
header An optional header for the card.
footer An optional footer for the card.
image An optional image to render at the start of the card.

Attributes & Properties

Learn more about attributes and properties.

Name Description Reflects
size
size
The component's size. Will be inherited by any descendants with a size attribute.
Type 'small' | 'medium' | 'large' | 'inherit'
Default 'inherit'
appearance
appearance
The card's visual appearance.
Type 'accent' | 'filled' | 'outlined' | 'plain'
Default 'outlined'
withHeader
with-header
Renders the card with a header. Only needed for SSR, otherwise is automatically added.
Type boolean
Default false
withImage
with-image
Renders the card with an image. Only needed for SSR, otherwise is automatically added.
Type boolean
Default false
withFooter
with-footer
Renders the card with a footer. Only needed for SSR, otherwise is automatically added.
Type boolean
Default false

CSS custom properties

Learn more about CSS custom properties.

Name Description
--border-radius
The radius for the card's corners. Expects a single value.
Default var(--wa-panel-border-radius)
--border-color
The color of the card's borders. Expects a single value.
Default var(--wa-color-surface-border)
--inner-border-color
The color of the card's inner borders, e.g. those separating headers and footers from the main content. Expects a single value.
Default var(--wa-color-surface-border)
--border-width
The width of the card's borders. Expects a single value.
Default var(--wa-panel-border-width)
--spacing
The amount of space around and between sections of the card. Expects a single value.
Default var(--wa-space)

CSS parts

Learn more about CSS parts.

Name Description
image The container that wraps the card's image.
header The container that wraps the card's header.
body The container that wraps the card's main content.
footer The container that wraps the card's footer.

Importing

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

To manually import this component from the CDN, use the following code. 

import 'https://early.webawesome.com/[email protected]/dist/components/card/card.js';
Coming soon! Coming soon!
    No results