Article Layout

<div class="site-section site-article">
  <aside class="stack gap-md">
    <strong>
      On this page
    </strong>
    <nav
      class="section-nav"
      data-section-nav
      data-mobile="select"
      aria-label="On this page"
    >
      <a href="#article-start">
        Getting Started
      </a>
      <a href="#article-next">
        Next Steps
      </a>
    </nav>
  </aside>
  <article class="stack gap-xl site-prose">
    <header class="stack gap-md">
      <p class="eyebrow">
        The building guide
      </p>
      <h2>
        From a blank page to a coherent interface
      </h2>
      <p class="site-lead muted">
        A few considered choices at the start make every section that follows easier to build.
      </p>
    </header>
    <section class="section-target stack gap-md" id="article-start">
      <h3>
        Getting started
      </h3>
      <p>
        Begin with the content. Decide what someone needs to understand and the action they should take next. Give that message a clear heading and enough space to stand on its own.
      </p>
      <p>
        Choose a theme before refining individual components. Shared colors, type, and spacing help your page feel consistent without styling every element separately.
      </p>
    </section>
    <section class="section-target stack gap-md" id="article-next">
      <h3>
        Next steps
      </h3>
      <p>
        Build one section at a time, starting with the smallest useful set of components. Reuse the same patterns as the page grows.
      </p>
      <ul>
        <li>
          Check the layout at narrow and wide widths.
        </li>
        <li>
          Try every interactive control with a keyboard.
        </li>
        <li>
          Review your content in light and dark themes.
        </li>
      </ul>
      <p>
        When you are ready,
        <a href="/docs/building">
          read the building guide
        </a>
        for the next step.
      </p>
    </section>
  </article>
</div>