Ready for Dev, so its markup, attributes, events and styles can all still change without notice,
it is not covered by the accessibility gate, and it is not published to npm. It is on this site so the work
can be seen and reviewed - nothing more.
Card
A container card component for grouping related content.
Usage
Card content goes here.
Card content goes here.
<article is="root-card">
<header>Card Title</header>
<p>Card content goes here.</p>
<footer>Card footer</footer>
</article>
The variants are boolean attributes, one each, and not a data-variant naming a value - which
is what Button, Tag and Badge take. This table used to say
variant='default' | 'outlined' | 'elevated', which nothing in the stylesheet reads, so a
consumer writing it got the default card and no error. The names below are what the code keys on; making
them agree with the rest of the system is a change to the component's public API and is not made here.
<article is="root-card" outlined>…</article>
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
flat |
boolean |
false |
Drops the shadow, keeps the ground |
outlined |
boolean |
false |
Drops the shadow and draws the border |
elevated |
boolean |
false |
Lifts the card further off the page |
aria-label |
string |
- | Accessible label |
Structure
There is no shadow root and there are no slots: the card is an <article> and its
children are its children. What the stylesheet reads is where they sit.
| Child | Description |
|---|---|
> header |
The titled row, when it is the first child; it takes the card's own padding as its outer edge |
| (anything else) | The body |
> footer |
The closing row, when it is the last child |
A slot="header" attribute, which this table used to describe, is inert on a
component that has no shadow root - it named a slot nothing was ever looking for.
Extends
HTMLElement
- use with <article is="root-card">. The tag is not decorative:
is is honoured by the parser only for the element the class was defined against, and Card
declares static extendsElement = 'article', so the same attribute on a
<section>
upgrades nothing: no behavior, and - now that the stylesheet names the tag it paints - no paint either.