v1.6
new

Card Flexible and extensible content container with multiple variants and options.

CSS Source
Controls
A well thought out card using sematic html tags like article, header, footer, cite.
Heading title.
Body content.
Add a border around the entire card and remove the default shadow.
Content size.
Show image row/header.
Show chips row.
Show icon row.
Show badge near title.
Show cite row.
Show action slot(s).
NOT compatible with Actionable. Allows the card body to collapse by clicking on the header. This works just like details/summary tags but with a smoother animation.
ONLY compatible with Collapsible. Indents the body content to line up with the header text (minus the chevron).

Properties Jump to heading

Class / Token Type
.prs-card Component Container
.prs-card-advanced Modifier A more modern card
.prs-card-bordered Modifier Adds a border
.prs-card-sm Modifier Smaller content (advanced only)
.prs-card-lg Modifier Larger content (advanced only)
.prs-card-chips Modifier Chip row (advanced only)
.prs-card-icon Modifier Icon row (advanced only)
.prs-card-cite Modifier Citation row (advanced only)
.prs-card-action Modifier Action slot(s)
.prs-card-collapse Modifier Collapsible (legacy only)
.prs-card-indent Modifier Collapsible indent (legacy only)
.prs-card-header Part Container for header (legacy only)
.prs-card-title Part Container for title (legacy only)
.prs-card-body Part Container for body (only for -advanced or -collapse)
.prs-card-content Part Container for content (legacy only)

No results...