# Components

These are canonical reusable components for Agentic Design Ops. Use the class names below before inventing new page-specific structures.

## Hero

Use `.hero` and `.hero-home` for the homepage first screen.

Includes:

- eyebrow
- optional bust image
- oversized headline
- supporting copy
- primary actions or fan cards

## Fan Card

Use `.fan-nav` and `.fan-card` on the homepage to turn the information architecture into a visual object.

Use only for major navigation choices. Do not use fan cards inside articles or dense reference pages.

## Soft Card

Use `.card`, `.wide-card`, and `.feature-card` for repeated categories, workflows, reference entries, and case-study summaries.

Rules:

- use tokenized glass background
- use tokenized radius and shadow
- do not nest cards

## Editorial Split

Use `.editorial-split` when a section needs explanatory copy beside a structured set of cards.

Good for:

- homepage concept sections
- workflow overviews
- product proof summaries

## Workflow Chain

Use `.workflow-chain` for process sequences.

Example:

```html
<div class="workflow-chain">
  <span>Brief</span><i>-></i><span>Context</span>
</div>
```

## Doc Strip

Use `.doc-strip` for links to internal markdown reference files. These are compact supporting links, not primary navigation.

## Template Hero

Use `.template-hero` for guide, article, field-note, and documentation pages that need the old Myclaude gradient/glass hero treatment.

Canonical styling:

- Border: `--hero-border`, which mixes old Myclaude pale navy with the rule color.
- Radius: `--radius-template` (`32px`), not the generic large-card radius.
- Background: `--hero-gradient`.
- Shadow/inset: `--shadow-hero`.

Supporting classes:

- `.template-page`
- `.template-kicker`
- `.template-back`
- `.template-hero-meta`
- `.template-hero-mark`

Use this for reusable guide pages, not the homepage.

## Editorial Hero

Use `.editorial-hero` for Medium-style essays, field notes, product stories, and reflective articles.

Supporting classes:

- `.editorial-page`
- `.editorial-back`
- `.editorial-kicker`
- `.editorial-dek`
- `.editorial-meta`

Use this when the article should feel like reading, not documentation. It has no hero card, no sidebar, and no decorative mark.

## Editorial Article

Use `.editorial-article` with `.editorial-section` for long-form body content.

Supporting classes:

- `.editorial-section`
- `.editorial-quote`
- `.editorial-divider`
- `.editorial-footer`

Do not add tables, terminal windows, or dense component blocks by default. If the article needs those, use `article-template.html`.

## Template Layout

Use `.template-layout` to pair a sticky side navigation with article content.

Structure:

```html
<div class="template-layout">
  <aside class="section-nav">...</aside>
  <article class="template-content">...</article>
</div>
```

## Section Nav

Use `.section-nav` for long pages with clear sections.

Supporting classes:

- `.section-nav-title`
- `.section-nav a`
- `.section-nav a.active`

Keep labels short. The sidebar should scan like a quiet blog table of contents, not a large card. On template pages, pair it with the scrollspy script from `article-template.html` so the active item follows the current section while scrolling.

## Section Heading

Use `.section-heading` inside `.template-section`.

Good for:

- article dividers
- architecture explanations
- reference sections
- template documentation

Canonical styling follows the old Myclaude article template: compact Manrope heading, `clamp(1.85rem, 3vw, 2.45rem)`, 1px top rule, and a short trailing line. Do not use homepage-scale section title tokens here.

## Terminal Window

Use `.terminal-window` for commands, file structures, snippets, prompt skeletons, and setup references.

Supporting classes:

- `.terminal-window__bar`
- `.terminal-window__dot`
- `.terminal-window__dot--red`
- `.terminal-window__dot--yellow`
- `.terminal-window__dot--green`
- `.terminal-window__title`

Keep content mono and scannable.

## Data Table

Use `.data-table-wrap` and `.data-table` for comparison tables and references.

Rules:

- wrap tables in `.data-table-wrap`
- use concise headers
- avoid huge prose inside cells

## Note

Use `.note` for gentle callouts.

Use notes for reusable rules, warnings, or practical reminders. Do not wrap every paragraph in a note.

## Workflow Step

Use `.workflow-step` for numbered micro-processes inside template/article pages.

Supporting class:

- `.step-num`

Use this when a section needs a compact three-to-five-step model without becoming a full workflow page.

## Checklist

Use `.checklist` for article-level checks.

Structure:

```html
<div class="checklist">
  <p><strong>1.</strong> Check text...</p>
</div>
```

Checklist items should be short and directly verifiable.

## Reference Group

Use `.reference-group` for compact internal or external link groups.

Good for:

- design-system references
- source docs
- related field notes
- downloadable harness files