Docs · Guide

Component library

Reusable patterns implemented with semantic HTML and the shared design system. Prefer these classes over new one-off styles.

Shell

Mount with data-site-nav and data-site-footer. Implemented once in site.js.

.breadcrumbs with current page aria-current="page".

Progressive dialog from site.js; corpus in search-index.json.

.product-subnav for in-product section links.

.section-header and .section-header--start for left-aligned product heroes.

.card, .card-tag, ecosystem and capability variants.

.btn, .btn-primary, .btn-ghost, size modifiers.

data-related-products="ai,docs" renders registry-backed links.

Info alert — use for neutral guidance.

Success alert — confirmations and safe policies.

Warning alert — limits, experimental status, caution.

How should FAQ items be marked up?

Use .faq with details.faq-item so content works without JavaScript and remains keyboard accessible.

Do components require a framework?

No. They are plain HTML + CSS with optional progressive JS enhancement.

.docs-layout, .docs-sidebar, .docs-nav, .docs-content, and .code-block support long-form documentation.

Download card

Use for Downloads catalog entries with format, license, and CTA.

Tool card

Use for Labs prototypes and AI tool summaries.

Service card

Use for Device Service categories and intake paths.