v1.6
new

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

CSS Source
Controls
A next level 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 removes the default shadow.
Content size.
Show image row/header.
Show chips row.
Show icon row.
Show badge near title.
Show cite row.
Show action row.
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 Add some dividers
.prs-card-collapse Modifier Collapsible
.prs-card-indent Modifier Collapsible indent
.prs-card-header Part Container for header
.prs-card-title Part Container for title
.prs-card-body Part Container for body (only for -advanced or -collapse)
.prs-card-content Part Container for content

No results...