3.0.0-alpha.9 Alpha
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!
6 weeks old
More Info 
<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>6 weeks old</small>

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

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

  .card-overview small {
    color: var(--wa-color-text-quiet);
  }

  .card-overview [slot='footer'] {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</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).

Header Title
This card has a header. You can put all sorts of things in it! 
<wa-card with-header class="card-header">
  <div slot="header">
    Header Title
    <wa-icon-button name="gear" variant="solid" label="Settings"></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 [slot='header'] {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .card-header h3 {
    margin: 0;
  }

  .card-header wa-icon-button {
    font-size: var(--wa-font-size-m);
  }
</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!
Preview 
<wa-card with-footer class="card-footer">
  This card has a footer. You can put all sorts of things in it!

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

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

  .card-footer [slot='footer'] {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</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>

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
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. Defaults to var(--wa-panel-border-radius).
--border-width
The width of the card's borders. Expects a single value. Defaults to var(--wa-panel-border-width).
--spacing
The amount of space around and between sections of the card. Expects a single value.

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/webawesome@3.0.0-alpha.9/dist/components/card/card.js';
 Coming soon! Coming soon!
    No results