Style Guide

Open in Claude Open in ChatGPT

A reference page showing every content-block directive available to a docs author — hints, code, tabs, expandable sections, a stepper, cards, and tables.

This page is a living reference, not reader-facing narrative — it exists so a docs author can see every supported content block rendered in place before using it in a real page.

Hints

This is an info hint — general context that's useful but not critical.

This is a success hint — confirms something worked as expected.

This is a warning hint — flags something the reader should double-check.

This is a danger hint — calls out something that can break or lose work.

Code

function greet(name) {
  return `Hello, ${name}!`;
}

Tabs

npm install asios

pnpm add asios

Expandable

What does this do?

This content is hidden until the reader expands the section.

Stepper

Install

Install the Workspace onto your machine.

Configure

Point it at your account.

Start your first activity.

Cards

Getting started

Install your Workspace and take your first actions in it.

Concepts

The two ideas worth understanding early — layers and activities.

Tables

Directive	Renders as
`hint`	`<div class="block-hint">`
`tabs` / `tab`	`<div class="block-tabs">`
`expandable`	`<details class="block-expandable">`
`stepper` / `step`	`<div class="block-stepper">`
`cards` / `card`	`<div class="block-cards">`