Default
Bordered white surface. No shadow.
Cards
Surfaces, elevation, and content blocks for the Epicenter brand kit.
Overview
Card styles live in components/card.css. Use .card as the outer surface and
.card__inner for proportional inset padding (--padding-inset, half the corner
radius). Add a variant modifier for elevation, contrast, or callout treatment. Pair with
buttons and form controls inside
.card__footer or .card__body.
Variants
Elevated
Default marketing card on off-white pages.
Flat
Explicit no-shadow surface. Border only.
Dark
Charcoal inverted surface for contrast sections.
Callout
Pale-sky background for tips and highlighted content.
Anatomy
School performance
Track outcomes across your portfolio in one place. Compare trends, flag risks, and share reports with authorizers.
Feature card
Icon-led content card for bento grids and feature highlights. Stack
.card__icon, .card__title, and body copy inside
.card__header / .card__body. Add .card--feature for the brand glow
overlay; pair with .card--dark or .card--elevated. Use
.card__media--bottom for a full-bleed image below the copy.
Dark — with metrics
End the paper chase.
A shared calendar of expectations. Auto-routed submissions. A paper trail by default — so audits stop being events, and start being checkboxes.
On-track
94
At-risk
4
Overdue
0
Draft
12
Elevated — icon & copy
See every school at a glance.
Roll up performance, compliance status, and open items across your full portfolio — without switching tools or rebuilding spreadsheets.
Elevated — workflow at bottom
Reviews that stay on schedule.
Coordinate site visits, document requests, and follow-ups in one workflow — so nothing slips between email threads and shared drives.
Bento grid
Compose .card--feature blocks in a six-column bento grid. Span modifiers —
brand-kit__bento-item--cols-2, --cols-3, --cols-4,
--rows-2 — control placement on medium screens and up. Pair with
bento scroll motion via data-motion="bento".
Live preview
End the paper chase.
A shared calendar of expectations. Auto-routed submissions. A paper trail by default — so audits stop being events, and start being checkboxes.
On-track
94
At-risk
4
Overdue
0
Draft
12
See every school at a glance.
Roll up performance, compliance status, and open items across your full portfolio — without switching tools or rebuilding spreadsheets.
Reviews that stay on schedule.
Coordinate site visits, document requests, and follow-ups in one workflow.
Agendas and minutes in one place.
Board packets, votes, and follow-ups on a single timeline authorizers can trust.
Scorecards that align teams.
Shared goals and transparent reporting between authorizers and schools.
Composition
With actions
Request a demo
See how Epicenter helps authorizers and schools stay aligned on outcomes.
With form field
Stay in the loop
Usage
Do
Don't