Docs Layout Test Page

A comprehensive test page covering all docs layout features, shortcodes, and markdown elements.

Overview

This page exists to test the docs layout and all available content features. It covers frontmatter options, markdown elements, all shortcode components, code blocks, tables, and callouts.

Badges

Added in v1.2.0 Deprecated in v2.0.0 CSS Only In Figma

Blockquote

Good design is as little design as possible.

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

Charles Eames

Callouts

This is an info callout with inline code and link to docs. Use it for general notes and tips.

This is a warning callout with inline code and link to docs. Use it to highlight something important.

This is a danger callout with inline code and link to docs. Use it for breaking changes or destructive actions.

Code Blocks

Syntax-highlighted code blocks can be added using standard markdown fenced code blocks with language identifiers, or the <Code> shortcode for explicit control over formatting and display options.

Markdown code

<!-- A code block with syntax highlighting for HTML -->
<div class="container">
  <h1 class="font-5xlarge">Hello, Chassis</h1>
  <p class="fg-subtle">Token-powered UI system.</p>
</div>

// A code block with syntax highlighting for SCSS
.my-component {
  color: var(--cx-fg-main);
  background-color: var(--cx-bg-even);
  border: 1px solid var(--cx-border-subtle);
}

// A code block with syntax highlighting for TypeScript
import { getConfig } from '@libs/config'

const config = getConfig()
console.log(config.title)

# A code block with syntax highlighting for shell commands
pnpm install && pnpm dev

Code shortcode

pnpm install && pnpm dev

{
"chassis": {
  "build": {
    "brands": ["chassis", "example"],
    "apps": { "docs": ["web"] }
  }
}
}

Examples

Live preview with markup using the <Example> shortcode.

With markup

html

<button type="button" class="button primary">Primary</button>
<button type="button" class="button default">Default</button>
<button type="button" class="button danger">Danger</button>

Preview only

With external files

content/docs/test-category/example.scss

// Chassis tokens for docs
@import "@chassis-ui/tokens/dist/web/docs/chassis/main";

// Shared docs settings
@import "@chassis-ui/docs/scss/settings";

// Chassis CSS variables and mixins
@import "@chassis-ui/css/scss/settings";
@import "@chassis-ui/css/scss/functions";
@import "@chassis-ui/css/scss/tokens";
@import "@chassis-ui/css/scss/variables";
@import "@chassis-ui/css/scss/rfs";
@import "@chassis-ui/css/scss/maps";
@import "@chassis-ui/css/scss/mixins";
@import "@chassis-ui/css/scss/placeholders";

// Shared docs styles
@import "@chassis-ui/docs/scss/main";

content/docs/test-category/example.js

;(function () {
  'use strict'

  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
      navigator.serviceWorker.getRegistrations().then(function (registrations) {
        for (var registration of registrations) {
          registration
            .unregister()
            .then(function () {
              return self.clients.matchAll()
            })
            .then(function (clients) {
              clients.forEach(function (client) {
                if (client.url && 'navigate' in client) {
                  client.navigate(client.url)
                }
              })
            })
        }
      })
    })
  }
})()

Placeholders

Tables

| Variable | Default | Description | | -------------------- | ---------------- | ------------------------- | | --cx-fg-main | #1a1a1a | Primary foreground colour | | --cx-bg-main | #ffffff | Primary background colour | | --cx-border-subtle | rgba(0,0,0,.1) | Subtle border colour | | --cx-primary | #0066ff | Brand primary colour |