Headings h1 – h6

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Display font — uk-heading-small / medium / large

Display Small

Display Medium

Display Large

Body paragraph

The quick brown fox jumps over the lazy dog. This is a standard body paragraph demonstrating the default font size, line-height, and colour. Readable at every viewport.

Lead text (uk-text-lead)

A lead paragraph stands out from regular body copy and introduces a section.

Muted text (uk-text-muted)

Secondary information rendered in a muted colour to reduce visual noise.

Meta text (uk-text-meta)

Published 12 March 2026 · 4 min read · Typography

Inline elements

Bold (strong) — Italic (em) — Small text — Highlighted (mark) — inline code() — Deleted text — Inserted text

Links

Default link — Muted link — Text link

Code block (pre + code)

#[Route(path: 'POST /api/user/create')]
#[RateLimit(limit: 20, window: 60)]
final class CreateUserHandler extends AbstractHandler
{
    public function handle(Request \$request): ResponseInterface
    {
        \$handler = new UserHandler(
            repository: \$this->userRepo,
            validator:  new RequestValidator(),
        );

        \$response = \$handler->handle(\$request);

        Logger::channel('api')->info('User created', [
            'uuid' => \$response->uuid,
        ]);

        return \$response;
    }
}

Blockquote

The details are not the details. They make the design.