Components
Console
src/components/card-header.tsxCard Header
A card’s title row: the heading on the left, its action on the right, wrapping when they must. The heading sits on the card’s padding line rather than centering against the button. Every carded section of a Console record uses it.
Title alone
A card with nothing to act on, like a student’s Compliance card.
Compliance
Guardian consent, learner license and the signed contract are on file.
With an action
A small outline button hangs from the same line as the heading, so it can give way to a form without moving the title.
Enrollment
Teen Complete Plus · 14 hrs
Enrolled Jun 2, 2026 at Katy
Photos
The front of the building, the parking lot and the lobby.
With a search and an action
A car’s Service history: the action is a cluster that takes the full width on a phone.
Service history
20 visits since the car went into service in January 2024.
Used on
- Console
- /console/business-reporting/btw-hours/console/business-reporting/enrollment/console/business-reporting/fleet-size/console/business-reporting/payroll/console/catalog/console/catalog/contracts/[id]/console/certificates/console/financials/console/financials/balances/console/financials/earned/console/financials/refunds/console/financials/sales/console/financials/transactions/console/financials/waived-fees/console/fleet/[id]/console/locations/[id]/console/locations/franchises/[id]/console/people/[id]/console/reporting/certificate-upload/console/reporting/dps-report/console/reporting/student-records