Cards
Profile Directory Card
A directory record composed entirely from existing components — no new CSS. It pairs card with avatar + avatar-status for presence, chip chip-soft for tags, border-end dividers for the compact fact strip, info-list-item for the related-person row. Used by the Student Directory; reuse it for teachers, staff or guardians.
Janet Daniel
Class III · A · Red House
Flush Card
Add card-flush to a card for a quiet, token-driven surface: no bottom margin, no hover transition, a lighter shadow and an 18px body. It follows the dark theme, unlike the default card background. Use it for dashboard panels that host their own content.
Today at a Glance
A flush card sits flat against the page grid, so panels in a row line up without doubled spacing.
With a Header
The standard card-header works unchanged.
Accent Card Header
Add card-header-accent to the card-header to give its title a leading accent bar. Pair it with accent-success, accent-info, accent-warning, accent-danger or accent-dark to recolour the bar.
Class-wise Distribution
Default accent bar, using the primary colour.
Attendance Overview
The success variant of the accent bar.
Fee Collection
The info variant of the accent bar.
Pending Approvals
The warning variant of the accent bar.
Overdue Invoices
The danger variant of the accent bar.
Staff Directory
The dark variant of the accent bar.
Card Default
Card title
Some quick example text to build on the card..
With Link
With Link
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkCard title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkHeader
Card Header
Special title treatment
With supporting text below as a natural lead-in to additional content.
Footer
Special title treatment
With supporting text below as a natural lead-in to additional content.
Header and footer
Card Header
Special title treatment
With supporting text below as a natural lead-in to additional content.
Horizontal Right Align Content
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Horizontal Right Align Content
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card styles
Header
Special title treatment
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Special title treatment
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Special title treatment
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Special title treatment
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Special title treatment
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Special title treatment
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Special title treatment
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Special title treatment
Some quick example text to build on the card title and make up the bulk of the card's content.
Card Border
Card Header
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card Header
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card Header
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card Header
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card Header
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card Header
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card Header
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card Header
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card Groups
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card with Toolbar & Footer
A workspace-style card that pairs the sw-toolbar component (search, saved views, filters, columns, density and quick filters) in the card-header with the sw-footer pagination component. Wrap the body in data-workspace cls sw-loaded so the toolbar and footer render. Reused as-is from the Classes page.
| Class | Status | Category | Class Teacher | Students | Actions | |
|---|---|---|---|---|---|---|
|
Class I · Section A
CLS-2024-001•Room 204
|
Active | Primary |
Ms. Teresa Susan
Mathematics |
30 | ||
|
Class II · Section B
CLS-2024-002•Room 108
|
Active | Primary |
Mr. John Doe
Science |
28 |