// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page LayoutShowcase {
  layout = "showcase"
  seo {
    title = "Layout components"
    description = "10 layout components from @wrnexus/ui."
  }
  view {
    <header class="showcase-hero showcase-hero--category">
      <span class="showcase-eyebrow">Component category</span>
      <h1 class="showcase-title">Layout</h1>
      <p class="showcase-description">10 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
      <div class="category-meta"><span>10 components</span><span>Multiple use cases</span><span>30 live configurations</span></div>
    </header>
    <div class="catalog-grid">
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Columns" size="default" columns="2" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Layout</span><h2>Columns</h2><p>Theme-aware, responsive columns component.</p></div>
          <div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/columns">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Container" size="default" columns="2" class="showcase-instance showcase-instance--1"><div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Composable content area.</span></div></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Layout</span><h2>Container</h2><p>Theme-aware, responsive container component.</p></div>
          <div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/container">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="CustomScrollbar" size="default" columns="2" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Layout</span><h2>Custom Scrollbar</h2><p>Theme-aware, responsive custom scrollbar component.</p></div>
          <div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/custom-scrollbar">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Divider" size="default" label="Divider" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Layout</span><h2>Divider</h2><p>Theme-aware, responsive divider component.</p></div>
          <div class="catalog-card-footer"><span>5 props · 0 slots</span><a href="/components/divider">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Grid" size="default" columns="2" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Layout</span><h2>Grid</h2><p>Theme-aware, responsive grid component.</p></div>
          <div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/grid">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Image" size="default" rounded="false" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Layout</span><h2>Image</h2><p>Theme-aware, responsive image component.</p></div>
          <div class="catalog-card-footer"><span>9 props · 1 slots</span><a href="/components/image">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Kbd" size="default" label="Kbd" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Layout</span><h2>Kbd</h2><p>Theme-aware, responsive kbd component.</p></div>
          <div class="catalog-card-footer"><span>4 props · 1 slots</span><a href="/components/kbd">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="LayoutSplitter" size="default" columns="2" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Layout</span><h2>Layout Splitter</h2><p>Theme-aware, responsive layout splitter component.</p></div>
          <div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/layout-splitter">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Link" size="default" label="Link" href="#link-demo" external="false" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Layout</span><h2>Link</h2><p>Theme-aware, responsive link component.</p></div>
          <div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/link">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Typography" size="default" columns="2" class="showcase-instance showcase-instance--1"><div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Composable content area.</span></div></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Layout</span><h2>Typography</h2><p>Theme-aware, responsive typography component.</p></div>
          <div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/typography">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article></div>
  }
}