tutorial

Placeholder: typography and element specimen

This is placeholder content. Nothing here is a real claim about anything. It exists so the article template can be evaluated with every element present at once.

Body text sits at the default measure. This paragraph is here to give the column a realistic amount of prose to be judged against, because a layout that looks right with two sentences often falls apart with two hundred words. Line height, measure, and the spacing between block elements are all easier to judge at length than in isolation.

A second paragraph, to check the vertical rhythm between them. Inline elements appear here: some inline code, a link to another page, bold text, and italic text for emphasis.

A level-two heading

Level-two headings carry a top border and become steps in the HowTo structured data when an article’s type is tutorial. They also populate the table of contents in the right-hand rail, which only appears when there are more than two of them.

A level-three heading

Level-three headings are indented in the table of contents and carry no border.

Code blocks

Short blocks and long blocks behave differently, so both are here. A short one:

npm run build

And a long line, which must scroll inside its own box and must never make the page scroll sideways:

aws cloudformation deploy --region us-east-1 --stack-name placeholder-stack --template-file iac/placeholder.yaml --capabilities CAPABILITY_NAMED_IAM

A multi-line block with syntax highlighting:

export function placeholder(input: string): string[] {
  return input
    .split(',')
    .map((part) => part.trim())
    .filter(Boolean);
}

Lists

An unordered list:

• First item, short.
• Second item, deliberately much longer so that it wraps onto a second line and the hanging indent can be checked against the bullet.
• Third item.

An ordered list:

1. First step.
2. Second step.
3. Third step.

A table

Tables need to stay readable and must scroll inside their own container rather than widening the page.

A blockquote

Blockquotes are used sparingly, usually to set off a rule or a definition rather than to quote a person. They carry a left border and muted text.

A horizontal rule

Above the rule.

Below the rule.

Closing

The last block in an article should not collide with the topic links that follow it.

filed under Placeholder topic alpha Placeholder topic beta