Utilities

Layout and content utilities for enriching documentation pages.

Numbered steps .steps

Use <ol className="steps"> for multi-step guides, install sequences, and procedures.

1. Install the package
   Run npm install cosmos-docusaurus-theme in your Docusaurus project.

2. Add to themes
   Edit docusaurus.config.js and add 'cosmos-docusaurus-theme' to the themes array.

3. Configure dark mode
   Set defaultMode: 'dark' in themeConfig.colorMode for the best experience.

4. Start your site
   Run npm start — the theme is applied automatically.

<ol class="steps">
  <li><strong>Install the package</strong><br/>Run <code>npm install …</code></li>
  <li><strong>Add to themes</strong><br/>Edit <code>docusaurus.config.js</code></li>
</ol>

Timeline .timeline

Use <ul className="timeline"> for changelogs, roadmaps, and versioned event sequences.

• v2.1.0 — Buttons, steps, timeline, blockquote, kbd, tooltip utilities
• v2.0.3 — Makefile, ESLint, Prettier, markdownlint full lint suite
• v2.0.2 — Dynamic version badge via injectHtmlTags(), Dockerfile simplified
• v2.0.1 — Tables full-width on desktop, scrollable on mobile
• v2.0.0 — 8 native Docusaurus components covered, GHCR workflow fix
• v1.2.6 — Sidebar icons, sub-menu line, version badge, Ctrl+K ghost style

<ul class="timeline">
  <li><strong>v2.1.0</strong> — New utility classes released</li>
  <li><strong>v2.0.0</strong> — Major refactor</li>
</ul>

Check list .list-check

Use <ul className="list-check"> for feature lists, requirements, and prerequisites.

• Zero JavaScript — pure CSS theme override
• Dark-first with full light mode support
• Outfit + JetBrains Mono typography
• All native Docusaurus components styled
• Search (easyops-cn local) palette overrides included
• Sidebar icons, sub-menu line, version badge

<ul class="list-check">
  <li>Zero JavaScript — pure CSS theme override</li>
  <li>Dark-first with full light mode support</li>
</ul>