Reusable content card
Surfaces, shadows, radii, and type all come from --hds-* tokens.
Flash message: This dismissible status uses StartHDS progressive enhancement.
Equiask-like product docs
Plain HTML importing StartHDS production /v1 assets.
This page demonstrates header/nav, hero, cards, forms, auth, dashboard/admin shell, flash messages, empty states, responsive grids, utilities, and visible focus states.
Responsive grid
Cards wrap from multi-column to single-column using StartHDS layout classes.
LiveAccessible
Form and local override pattern
<link rel="stylesheet" href="/v1/css/starthds-core.css">
<link rel="stylesheet" href="/v1/css/starthds-app.css">
<link rel="stylesheet" href="/v1/css/starthds-dashboard.css">
<link rel="stylesheet" href="/v1/css/starthds-knowledge.css">
<link rel="stylesheet" href="/v1/css/themes/equiask.css">
<link rel="stylesheet" href="/assets/app-local.css">
<style>
.my-product-theme {
--hds-color-primary: #0f766e;
--hds-radius-card: 1.25rem;
}
</style>
<script type="module" src="/v1/js/starthds-core.js"></script>
<script type="module" src="/v1/js/starthds-app.js"></script>
<script type="module" src="/v1/js/starthds-knowledge.js"></script>
<main class="theme-equiask my-product-theme">...</main>Auth shell
Welcome back
Authentication pages can use the same token-backed palette.
24
Open items
98%
Ready checks
Empty state
No imported records yet. Use a primary action to guide the next step.
Operations and media primitives
Tasks, notifications, trust badges, notices, admin review, and attachments.
These primitives are generic StartHDS surfaces. Host applications own queues, permissions, files, and moderation state.
Info notice: Use notices for neutral updates, success, warning, danger, and trust messaging.
Success notice with semantic status tokens.
Warning notice for cautionary copy.
Danger notice for destructive or failed states.
Trust notice for verification or safety guidance.
VerifiedStaffExpertTrusted3
Review urgent item
Urgent task cards highlight priority without encoding product-specific queues.
Publish checklist
Complete task cards can remain visible in histories or audit flows.
- Unread notificationA generic unread state using notification tokens.
- Read notificationRead items use the same calm surface.
| Item | Status | Owner |
|---|---|---|
| Policy card | Trusted | Team |
| Attachment review | Staff | Ops |
- Admin list item
Use for generic operational records, permissions, or configuration rows.
- Moderation itemReview
A warning-backed review surface for any product domain.