Reference

Loam component classes.

Use this reference as the stable vocabulary for agent-generated static HTML. Components are intentionally HTML-first and do not require a framework.

Layouts

Class	Purpose	Use for
`.loam-layout--plan`	Main content plus sticky right rail.	Implementation plans, release plans, migration plans.
`.loam-layout--article`	Readable article with optional table of contents.	RFCs, ADRs, architecture notes.
`.loam-layout--explainer`	Concept narrative beside diagrams or supporting panels.	Visual explainers, onboarding notes.
`.loam-layout--status`	Single-column status and delivery readout.	Weekly updates, incident summaries, project health.
`.loam-layout--runbook`	Procedure content with a rail for prerequisites and links.	Runbooks, checklists, operational guides.

Writing components

Prose

.loam-prose, .loam-lead, .loam-kicker, .loam-mark, and .loam-caption control document rhythm and hierarchy.

Callouts

.loam-callout supports record, note, info, risk, decision, assumption, question, and open-question variants with bundled SVG icons.

Records

Prefer .loam-callout--record for captured planning facts. Legacy .loam-record classes remain supported for older generated pages.

Status

.loam-status and .loam-badge make delivery state visible without turning the page into a dashboard.

Ready Review Blocked

Beta Stable Draft

Technical artifacts

Code

.loam-code, .loam-terminal, .loam-diff, and .loam-file-tree cover common engineering artifacts.

Data

.loam-table, .loam-kv, and .loam-matrix provide structured facts, comparisons, and option analysis.

Process

.loam-timeline, .loam-stepper, and .loam-checklist make ordered work easy to scan. Use .loam-timeline__title, .loam-timeline__meta, and .loam-task__meta when ownership or status matters.

Diagrams

.loam-diagram wraps rendered inline SVG, stores editable Mermaid source in .loam-diagram__source, and can expose an optional expand control for large diagrams.

Work links

Use these for references to source-system work when the page needs a compact trail back to GitHub or Jira.

GitHub PR #1842 Add lifecycle preview cleanup guardrails

GitHub PR #1843

Move release validation into the deploy runbook

Adds the preflight checks, rollback notes, and required owner review before production rollout.

Jira ticket DEVT-1420 Reduce noisy deploy alerts

Brand assets

Use the wordmark in page chrome and title areas. Use the mark where space is tight, such as favicons, compact headers, or small attribution blocks.

Wordmark

/dist/loam-logo.svg

Mark

/dist/loam-mark.svg

Copy-paste pattern

<div class="loam-callout loam-callout--risk">
  <span class="loam-callout__icon" aria-hidden="true">
    <svg class="loam-icon"><use href="/dist/loam-icons.svg#loam-icon-risk"></use></svg>
  </span>
  <div>
    <p class="loam-callout__title">Risk</p>
    <p>Describe the specific risk and what changes because of it.</p>
  </div>
</div>

<div class="loam-callout loam-callout--record">
  <span class="loam-callout__icon" aria-hidden="true">
    <svg class="loam-icon"><use href="/dist/loam-icons.svg#loam-icon-record"></use></svg>
  </span>
  <div>
    <p class="loam-callout__title">Record</p>
    <p>Capture a durable planning fact, owner note, or decision log entry.</p>
  </div>
</div>

<a class="loam-pr-card loam-pr-card--compact" href="https://github.com/org/repo/pull/128">
  <span class="loam-pr-card__meta">GitHub PR</span>
  <span class="loam-pr-card__title">#128 Add retry budget for webhook delivery</span>
</a>

<article class="loam-pr-card">
  <div class="loam-pr-card__meta">
    <span>GitHub PR</span>
    <a class="loam-pr-card__link" href="https://github.com/org/repo/pull/129">#129</a>
  </div>
  <h3 class="loam-pr-card__title"><a href="https://github.com/org/repo/pull/129">Extract shared lifecycle config validation</a></h3>
  <p class="loam-pr-card__summary">Moves config validation into a shared package and updates the release checklist.</p>
</article>

<a class="loam-jira-card" href="https://example.atlassian.net/browse/DEVT-1420">
  <span class="loam-jira-card__label">Jira ticket</span>
  <span class="loam-jira-card__key">DEVT-1420</span>
  <span class="loam-jira-card__title">Reduce noisy deploy alerts</span>
</a>

<img class="loam-logo loam-logo--wordmark" src="https://useloam.design/dist/loam-logo.svg" alt="Loam" width="126" height="27">

<img class="loam-logo loam-logo--mark" src="https://useloam.design/dist/loam-mark.svg" alt="Loam mark" width="36" height="27">