Card
<wa-card>
Cards can be used to group related subjects in a container.
This kitten is as cute as he is playful. Bring him home today!
6 weeks old
<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 Jump to heading
Basic Card Jump to heading
Basic cards aren't very exciting, but they can display any content you want them to.
<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 Jump to heading
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).
<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>
Card with Footer Jump to heading
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).
<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 Jump to heading
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).
<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 Jump to heading
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 Jump to heading
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 Jump to heading
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 Jump to heading
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 Jump to heading
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 Jump to heading
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 Jump to heading
The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
To manually import this component from the CDN, use the following code.
import 'https://early.webawesome.com/webawesome@3.0.0-alpha.12/dist/components/card/card.js';