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.

Test:
asdasda

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

<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

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

// Shared docs settings
@use "@chassis-ui/docs/scss/settings" as *;

// Chassis CSS variables and mixins
@use "@chassis-ui/css/scss/config/settings" as *;
@use "@chassis-ui/css/scss/functions" as *;
@use "@chassis-ui/css/scss/tokens" as *;
@use "@chassis-ui/css/scss/config/defaults" as *;
@use "@chassis-ui/css/scss/rfs" as *;
@use "@chassis-ui/css/scss/maps" as *;
@use "@chassis-ui/css/scss/mixins" as *;
@use "@chassis-ui/css/scss/placeholders" as *;

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

;(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

<img src="..." class="image fluid mb-medium w-100" alt="...">
<img src="..." class="image w-100 object-fit-cover mb-medium" alt="...">

Icons

<svg class="icon" aria-hidden="true"><use href="#info-circle-solid"></use></svg>
<svg class="icon icon-secondary" aria-hidden="true"><use href="#info-circle-solid"></use></svg>
<span class="icon cx-info-circle-solid icon-reset" aria-hidden="true"></span>

Tables

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

Javascript

Show modal

<button type="button" class="button primary" data-cx-toggle="dialog" data-cx-target="#exampleModalLive">Show modal</button>
<a href="#exampleModalLive" class="button link" data-cx-toggle="dialog">Show modal</a>

<dialog class="modal dialog" id="exampleModalLive" aria-labelledby="exampleModalLiveLabel">
  <div class="modal-header">
    <h2 class="modal-title" id="exampleModalLiveLabel">Modal title</h2>
    <button type="button" class="close-button" data-cx-dismiss="dialog" aria-label="Close"></button>
  </div>
  <div class="modal-body">
    <p>Modal body content goes here.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="button primary">Take action</button>
    <button type="button" class="button default" data-cx-dismiss="dialog">Close</button>
  </div>
</dialog>