Cards

<article class="panel stack">
  <p class="eyebrow">
    Your workspace
  </p>
  <h2>
    A place for your next idea.
  </h2>
  <p class="muted">
    A flexible surface for content, actions, or a project summary.
  </p>
</article>

<article class="panel stack">
  <header class="stack">
    <p class="eyebrow">
      Project notes
    </p>
    <h2>
      A clearer starting point.
    </h2>
    <p class="muted">
      Everything your team needs to begin.
    </p>
  </header>
  <p>
    Keep the brief, decisions, and next steps together in a focused space.
  </p>
  <footer class="cluster">
    <a href="/docs">
      Read the Introduction
    </a>
    <a href="/docs/ai">
      Open the AI Guide
    </a>
  </footer>
</article>

<div class="grid">
  <article class="panel stack" style="--space:1rem">
    <h2>
      Compact
    </h2>
    <p class="muted">
      A smaller inset for concise content.
    </p>
  </article>
  <article class="panel stack">
    <h2>
      Comfortable
    </h2>
    <p class="muted">
      Room for a description and supporting details.
    </p>
  </article>
</div>

<div class="grid">
  <article class="panel stack">
    <h2>
      Design basics
    </h2>
    <p class="muted">
      Build a consistent visual foundation.
    </p>
    <footer style="margin-block-start:auto">
      <a href="/docs/type">
        Explore Typography
      </a>
    </footer>
  </article>
  <article class="panel stack">
    <h2>
      Layout principles
    </h2>
    <p class="muted">
      Use shared grids and spacing to keep related content together and give each section room to breathe.
    </p>
    <footer style="margin-block-start:auto">
      <a href="/docs/grid">
        Explore Layout
      </a>
    </footer>
  </article>
</div>

<article class="panel stack">
  <h2>
    <a href="/docs/ai">
      Build with AI
    </a>
  </h2>
  <p class="muted">
    Start with a project brief and a documented design foundation.
  </p>
</article>

<article class="panel stack" style="max-inline-size:18rem">
  <h2>
    A longer project title with room to grow
  </h2>
  <p class="muted">
    Reference: editorial_workspace_documentation_review_2026
  </p>
</article>

<article class="panel stack" dir="rtl" lang="he">
  <header class="stack">
    <p class="eyebrow">
      סביבת העבודה
    </p>
    <h2>
      מקום לרעיון הבא שלכם
    </h2>
  </header>
  <p class="muted">
    רכזו רעיונות וצעדים הבאים במקום אחד.
  </p>
</article>