Utilities

Layout and content utilities for documentation pages.

Numbered steps .steps

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

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.

4. Start your site
   Run npm start. The theme applies 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 version histories.

• 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 and requirements.

• Zero JavaScript: pure CSS theme override
• Dark-first with full light mode support
• Outfit + IBM Plex 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>