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.

Usage docs Theme docs

Cards

Reusable content card

Surfaces, shadows, radii, and type all come from --hds-* tokens.

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.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.js"></script>
<main class="theme-equiask my-product-theme">...</main>

Auth shell

Welcome back

Authentication pages can use the same token-backed palette.

Open items

98%

Ready checks

Empty state