Stable public classes use the hds- prefix. Optional ds-container, ds-button, and ds-card aliases are documented aliases only.
Core includes product-neutral control bars, status messages, skip links, active navigation states, and safe code wrapping for downstream app chrome without owning app data.
hds-control-barhds-control-bar__innerhds-control-bar__grouphds-control-bar__buttonhds-status-messagehds-skip-linkhds-activeDisclosure, sheet, menu, flow, choice card, upload, and save-status primitives are generic HTML/CSS contracts enhanced through data-hds-* attributes. See the interactions example.
hds-disclosurehds-sheethds-menuhds-flowhds-choice-cardhds-uploadhds-save-statusGeneric app shells, sidebars, mobile pages, appbars, icon buttons, sticky action bars, and bottom tab bars are documented on /docs/app and showcased at /examples/app-mobile.
hds-app-shellhds-app-mainhds-app-sidebarhds-app-asidehds-mobile-pagehds-appbarhds-sticky-action-barhds-mobile-tabbarProduct-neutral dashboard shells, stat cards, metric rows, user summaries, records/value tables, activity feeds, progress/status panels, toolbar/actions, and state surfaces are documented on /docs/dashboard and showcased at /examples/dashboard. Load /v1/css/starthds-dashboard.css after /v1/css/starthds-core.css; keep these classes out of the app/mobile bundle.
hds-dashboard-shellhds-dashboard-toolbarhds-dashboard-sectionhds-dashboard-gridhds-stat-cardhds-dashboard-usershds-dashboard-tablehds-dashboard-activity-feedhds-dashboard-status-summaryhds-dashboard-emptyGeneric data presentation primitives live in the dashboard CSS bundle and are documented on /docs/data with a copyable standalone showcase at /examples/data. Use core first, app CSS only when composing the edit sheet pattern, then dashboard/data CSS.
hds-data-toolbarhds-data-filter-barhds-data-tablehds-data-cell-actionshds-data-cardhds-data-listhds-data-recordhds-data-field-listhds-data-edit-sheethds-data-edit-sheet__statushds-data-edit-sheet__fieldshds-data-edit-sheet__footerhds-data-paginationhds-data-bulk-action-barhds-data-emptyhds-data-loadinghds-data-errorhds-sheetTask cards, notifications, trust badges, notices, admin lists/tables, moderation items, bulk actions, attachments, and lightbox media remain generic hds-* contracts.
hds-task-listhds-notification-listhds-trust-badgehds-noticehds-tablehds-admin-listhds-moderation-itemhds-attachment-listhds-lightboxSearch, command, suggestion, tabs, filter, chip, tag, result-card, reading, response-card, and reaction primitives are documented on /docs/knowledge and showcased at /examples/knowledge.
hds-searchhds-commandhds-tabshds-filter-barhds-result-cardhds-readinghds-response-cardhds-reaction-barSafe Markdown rendering, article/course/docs/landing layouts, source modes, and directive blocks are documented on /docs/markdown and showcased at /examples/markdown, /examples/markdown-article, and /examples/markdown-course.
hds-markdownhds-prosehds-readinghds-markdown-landingdata-hds-markdown-sourceLanding heroes, proof strips, benefit and feature grids, testimonials, pricing cards, FAQs, and CTA panels are documented on /docs/marketing and showcased at /examples/marketing. Markdown landing directives can render these same primitives from /examples/markdown-landing.
hds-landing-herohds-pricing-cardhds-faq-itemhds-cta-bandVideo cards, course progress, lesson lists, article cards, galleries, breadcrumbs, and pagination are documented on /docs/media and showcased at /examples/media.
hds-media-cardhds-video-framehds-course-cardhds-gallery-itemhds-paginationSocial proof, reviews, comments, avatars, profiles, community cards, share bars, and social links are documented on /docs/social and showcased at /examples/social.
hds-social-proofhds-review-cardhds-comment-threadhds-community-cardhds-profile-cardhds-share-barLead magnets, opt-in forms, webinars, events, countdowns, urgency notes, steps, timelines, comparisons, guarantees, and risk reversal are documented on /docs/conversion and showcased at /examples/conversion.
hds-lead-magnet-cardhds-optin-formhds-countdownhds-process-timelinehds-comparison-tablehds-comparison-cardhds-guarantee-cardhds-risk-reversalUse hds-card, hds-panel, hds-badge, and action classes.
Operations and media primitives
These primitives are generic StartHDS surfaces. Host applications own queues, permissions, files, and moderation state.
Urgent task cards highlight priority without encoding product-specific queues.
Complete task cards can remain visible in histories or audit flows.
| Item | Status | Owner |
|---|---|---|
| Policy card | Trusted | Team |
| Attachment review | Staff | Ops |
Use for generic operational records, permissions, or configuration rows.
A warning-backed review surface for any product domain.