Layout & structure

The logo, containers, page scaffolding, steppers, and timelines for structuring documentation pages and sequential walkthroughs.

Logo

The dcupl mark (two arcs) and the "dcupl" wordmark in semibold Hanken Grotesk, as on the website, with an optional mono suffix. It draws in currentColor, so it works on light, dark and inverted surfaces. Inputs: size (the wordmark's font size in px, default 22; the mark scales with it) and suffix. The top navigation uses suffix="docs".

Usage

<docs-logo suffix="docs" />
<docs-logo [size]="32" />

Card

A flat card with 6px corners and no shadow. Where a link grid can be rule-topped columns (Box Grid, Next Steps), prefer those; use a card when a boxed panel is really needed. Renders as a router link when href is set.

Variants

Link cards

A hairline border that turns into the rule on hover, with an arrow in the corner that nudges right.

Usage

<docs-card variant="link" href="/path" padding="md">
  <h4>Card Title</h4>
  <p>Card description</p>
</docs-card>

Section header

A section heading on the docs scale (docs-h2: 32px semibold, tight tracking) with an optional gray subtitle.

Example

Usage

<docs-section-header
  title="Section Title"
  subtitle="Optional subtitle text"
  [centered]="true"
/>

Step card

A numbered step as a rule-topped column: a big semibold number, a title and a gray description, with projected content (e.g. a snippet) underneath. For "How it works" rows.

Example

dcupl.models.set({
  key: 'Product',
  properties: [...]
});

dcupl.data.set(products, {
  model: 'Product'
});

dcupl.lists.create({
  modelKey: 'Product'
});

Usage

<docs-step-card
  [step]="1"
  title="Step Title"
  description="Step description"
>
  <!-- Optional content -->
</docs-step-card>

Box grid

A responsive grid of rule-topped columns, like the website's feature rows — the unified pattern for pillars, lifecycle/step flows, feature grids and link grids. Toggle numbered for big semibold numbers and connectors for arrows between columns. Set columns to 2, 3, or 4. Each DocsBoxItem also supports an optional meta field — a small pill in the top-right corner (e.g. a duration).

Numbered (pillars)

Numbered with connectors (lifecycle)

Compact (dense step row)

Tighter padding and a smaller number for dense, scannable sequences.

Plain (feature grid)

With icons

Each item can carry an icon (in an icon badge) instead of a number.

Link cards

Add an href to make a column a router link: an arrow follows the title and nudges right on hover, and the title underlines.

Usage

<!-- Numbered pillars (default 3 columns) -->
<docs-box-grid [items]="pillars" numbered />

<!-- Lifecycle: 4 columns, numbered, with arrow connectors -->
<docs-box-grid [items]="lifecycle" [columns]="4" numbered connectors />

<!-- Compact: denser padding + smaller number for tight step rows -->
<docs-box-grid [items]="lifecycle" [columns]="4" numbered connectors compact />

<!-- Plain feature grid -->
<docs-box-grid [items]="features" [columns]="2" />

// item shape:
// {
//   title: string;
//   body?: string;
//   code?: string;    // inline code chip
//   icon?: IconName;  // shown instead of a number
//   href?: string;    // makes the column a router link (arrow after the title)
//   meta?: string;    // small pill in the top-right corner (e.g. a duration)
// }

Page header

The standard header for .page.ts pages: the h1 on the docs-h1 scale and a projected lead paragraph (which keeps its own inline links). There is no label above the title: the layout's breadcrumb says where the page sits. Used across the CLI and Agentic guide pages.

Usage

<docs-page-header title="Quickstart">
  <p class="max-w-2xl text-lg text-text-secondary">
    Lead paragraph with <a routerLink="/cli">links</a> preserved.
  </p>
</docs-page-header>

Concept page shell

The standard shell for SDK concept pages: a DocsPageHeader (title + lead), the section layout, and a DocsNextSteps footer, so page files only declare their sections and next-step links. Each section (docs-scroll-sync-split-layout) reads like a markdown section: an h2 under the 1.5px rule, text in the prose styles (17px ink, square bullets, ruled tables), then the section's code block at full column width — one column at every width, since the 56rem column is too narrow to set code beside text. A section can add a preview (ConceptModelPreview): a docs-model-preview under its code, linked to the property lines, as on SDK › Models. The headings carry the section ids, so the layout's "On this page" list tracks them. Inputs: title, lead, sections (ConceptSection[]), nextSteps (NextStepLink[]), and nextStepsHeading. It needs page data, so there is no live demo here.

Usage

<docs-concept-page-shell
  title="Models"
  lead="Define the structure and schema of your data."
  [sections]="sections"
  [nextSteps]="nextSteps"
/>

// sections: ConceptSection[] = [{
//   id: 'what-is-model',
//   title: 'What is a Model?',
//   content: '<p>…</p>',
//   code: productModelSource,
//   codeLanguage: 'typescript',
//   codeFilename: 'product.model.ts',
//   preview: { model: 'Product', properties, rows, note: 'Prices are ints, in cents.' },
// }];

Timeline

A two-column timeline for milestone or process narratives: a hairline down the middle, steps alternating left and right, the step number in a square marker on the line (mint for variant="highlight"). Compose docs-timeline with docs-timeline-step children. Step inputs: step, badge, title, description (required), plus contentOrder (left | right), variant (default | highlight), and isLast. Project a visual slot for the opposite column and an optional link slot. The center rail and alternating layout appear at md and up.

Example

dcupl generate model Product

catalog.getList('products')

Usage

<docs-timeline>
  <docs-timeline-step
    [step]="1"
    badge="Step one"
    title="Model your data"
    description="Define typed schemas with validation."
    contentOrder="left"
  >
    <docs-code-block visual code="dcupl generate model Product" language="bash" />
  </docs-timeline-step>
  <docs-timeline-step
    [step]="2"
    badge="Step two"
    title="Query instantly"
    description="Run indexed, faceted queries."
    contentOrder="right"
    variant="highlight"
    [isLast]="true"
  >
    <docs-code-block visual code="catalog.getList('products')" language="ts" />
  </docs-timeline-step>
</docs-timeline>

Stepper

A vertical numbered stepper for sequential walkthroughs — a hairline left rail with square ink number markers and arbitrary projected content per step. Replaces the hand-rolled <ol class="… border-l … pl-8"> + absolute number-badge markup duplicated across guide pages. Compose docs-stepper with docs-stepper-step children; step inputs: step (number) and title. Titles render as real <h2> elements so they still feed the page's table of contents.

Example

Usage

<docs-stepper>
  <docs-stepper-step [step]="1" title="Scaffold a project">
    <p>Create a new project from the default starter.</p>
    <docs-code-block code="dcupl init my-project" language="bash" theme="dark" />
  </docs-stepper-step>
  <docs-stepper-step [step]="2" title="Run the dev server">
    <p>Start the local development server on port 8083.</p>
  </docs-stepper-step>
</docs-stepper>