118 lines
7.9 KiB
Plaintext
118 lines
7.9 KiB
Plaintext
// 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>
|
|
}
|
|
}
|