Cards are snapshots of content that are typically used in a group to present collections of related information. They can represent any quickly consumable information.
-
Sizing: Users want to be able to set the width and height of a single card or a set of cards.
-
Elevation: Users may want to set different elevations of a single card or a set of cards based on context, state (such as hover), etc.
**Cards are a building block used to compose examples like those below:
Examples | light | dark |
---|---|---|
favorite | ||
content | ||
shopping |
Component name:
fast-card
Attributes:
- none
CSS custom properties:
- width
- height
- elevation
Slots:
- default slot for content
Structure:
<div class="root">
<slot></slot>
</div>
Appearance:
Parts:
- root - the root of the card
There are currently no accessibility requirements for the card.
The component visuals should not change when in RTL scenarios.
While testing is still TBD for our web components, I would expect this to align with the testing strategy and not require any additional test support.