Editorial docs pattern

A docs hub that reads like a magazine — featured piece up front, topics and latest notes beneath, chrome that stays quiet so the writing leads.

Why this pattern

Product docs and engineering blogs often land as dense sidebars or card grids. An editorial hub puts one story in focus: a glass panel for the featured article, clear nav to topics, and room for latest posts without competing hero chrome.

Reach for it when your docs site is also a publishing surface — guides, changelogs, long-form how-tos — and you want the same soft UI language as the rest of Caustica.

Caustica components in play

  • Navbar — sticky header for the hub
  • Nav — Featured / Topics / Latest anchors
  • Panel — featured article and list blocks
  • Button — “Open article” and secondary actions
  • Link — in-body and topic links

Live composition (demo shell, noindex): Editorial docs landing example.

Copyable HTML skeleton

Minimal hub after importing caustica-design/css. Replace titles and hrefs with your catalogue. 

<div class="ca-root">
  <header class="ui-navbar ui-navbar--sticky" data-navbar>
    <div class="ui-navbar__inner">
      <div class="ui-navbar__brand">
        <a href="../index.html">Devnotes</a>
      </div>
      <div class="ui-navbar__collapse" data-navbar-collapse>
        <nav class="ui-nav" aria-label="Primary">
          <ul class="ui-nav__list">
            <li class="ui-nav__item">
              <a class="ui-nav__link" href="#featured">Featured</a>
            </li>
            <li class="ui-nav__item">
              <a class="ui-nav__link" href="#topics">Topics</a>
            </li>
            <li class="ui-nav__item">
              <a class="ui-nav__link" href="#latest">Latest</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

  <main id="main">
    <section id="featured">
      <article class="panel">
        <h2 class="panel-title">How to structure a design-system docs site</h2>
        <p class="panel-sub">One short lede for the featured guide.</p>
        <a class="btn" href="/docs/featured">Open article</a>
      </article>
    </section>

    <section id="topics">
      <h2>Topics</h2>
      <ul>
        <li><a class="ui-link" href="/docs/tokens">Tokens</a></li>
        <li><a class="ui-link" href="/docs/components">Components</a></li>
      </ul>
    </section>
  </main>
</div>

Next steps