WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pre Release New Changes

Browse Source
This commit is contained in:
Clintchiz
2026-07-31 16:30:13 +05:30
parent 358a520bc5
commit 3e565e8d03
189 changed files with 36727 additions and 17249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/component-showcase/app/pages/layout.wrn
+58 -73
View File
@@ -3,183 +3,168 @@ page LayoutShowcase {
layout = "showcase"
seo {
title = "Layout components"
description = "17 layout components from @wrnexus/ui."
description = "15 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">17 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
<div class="category-meta"><span>17 components</span><span>Multiple use cases</span><span>51 live configurations</span></div>
<p class="showcase-description">15 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
<div class="category-meta"><span>15 components</span><span>Multiple use cases</span><span>45 live configurations</span></div>
</header>
<div class="catalog-grid">
<article class="catalog-card">
<article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="AuthSplitLayout" size="default" title="Auth Split Layout example" description="A polished default auth split layout for a modern application." features="[{&quot;label&quot;:&quot;Team members&quot;,&quot;values&quot;:[&quot;5&quot;,&quot;Unlimited&quot;,&quot;Unlimited&quot;]},{&quot;label&quot;:&quot;Support&quot;,&quot;values&quot;:[&quot;Email&quot;,&quot;Priority&quot;,&quot;Dedicated&quot;]},{&quot;label&quot;:&quot;Audit history&quot;,&quot;values&quot;:[&quot;7 days&quot;,&quot;90 days&quot;,&quot;Custom&quot;]}]" class="showcase-instance showcase-instance--1"><div slot="aside-extra" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>aside-extra slot</span></div><div slot="form" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>form slot</span></div></div></div>
<div class="catalog-card-stage"><Columns size="default" columns="2" gap="lg" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-grid-items"><span>Content column</span><span>Supporting column</span></div></Columns></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Auth Split Layout</h2><p>Responsive 50/50 authentication layout with content and form regions.</p></div>
<div class="catalog-card-footer"><span>8 props · 2 slots</span><a href="/components/auth-split-layout">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="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><span class="catalog-card-category">Layout</span><h2>Columns</h2><p>Create responsive balanced content columns with configurable count, gap, density, and maximum width.</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">
<article class="catalog-card" data-interactive-preview="false">
<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 class="catalog-card-stage"><Container size="default" columns="2" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Centered container content</div></Container></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><span class="catalog-card-category">Layout</span><h2>Container</h2><p>Constrain and align page content with responsive gutters and compact, wide, or full width options.</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">
<article class="catalog-card" data-interactive-preview="false">
<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 class="catalog-card-stage"><CustomScrollbar size="default" columns="2" class="showcase-instance showcase-instance--1" /></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">
<article class="catalog-card" data-interactive-preview="false">
<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 class="catalog-card-stage"><Divider size="default" label="Related information" orientation="horizontal" class="showcase-instance showcase-instance--1" /></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><span class="catalog-card-category">Layout</span><h2>Divider</h2><p>Separate related horizontal or vertical content with optional labels, sizes, and semantic colors.</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">
<article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="FeatureGrid" size="default" columns="3" tabletColumns="2" mobileColumns="1" equalHeight="true" align="start" class="showcase-instance showcase-instance--1"></div></div>
<div class="catalog-card-stage"><FeatureGrid items='[{"icon":"icon-[lucide--shield-check]","eyebrow":"Citizen support","title":"Citizen services","description":"Report incidents, request certificates, and find safety information.","href":"#citizen-services","actionLabel":"Explore services","badge":"Public","color":"primary","variant":"default","hover":"lift"},{"icon":"icon-[lucide--map-pin]","eyebrow":"Directory","title":"Station directory","description":"Locate offices, jurisdictions, contacts, and public service hours.","href":"#station-directory","actionLabel":"Find a station","badge":"Directory","color":"info","variant":"soft","hover":"border"},{"icon":"icon-[lucide--radio-tower]","eyebrow":"Verified","title":"Public updates","description":"Publish official alerts, notices, advisories, and verified information.","href":"#public-updates","actionLabel":"View updates","badge":"Live","color":"success","variant":"gradient","hover":"glow"}]' columns="3" tabletColumns="2" mobileColumns="1" gap="lg" equalHeight="true" align="start" maxWidth="full" variant="default" label="Feature Grid" class="showcase-instance showcase-instance--1" /></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Feature Grid</h2><p>Responsive equal-height grid for feature and service cards.</p></div>
<div class="catalog-card-footer"><span>11 props · 1 slots</span><a href="/components/feature-grid">Explore component <span aria-hidden="true">→</span></a></div>
<div><span class="catalog-card-category">Layout</span><h2>Feature Grid</h2><p>Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.</p></div>
<div class="catalog-card-footer"><span>12 props · 1 slots</span><a href="/components/feature-grid">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article>
<article class="catalog-card">
<article class="catalog-card" data-interactive-preview="false">
<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 class="catalog-card-stage"><Footer size="default" label="Footer" items='[{"type":"header","label":"Product","description":"Build consistent interfaces with WRNexusJS.","items":[{"label":"Components","href":"/base"},{"label":"Themes","href":"/themes"},{"label":"Examples","href":"/blocks"}]},{"type":"header","label":"Developers","items":[{"label":"Documentation","href":"/docs"},{"label":"Installation","href":"/installation"},{"label":"Framework guides","href":"/framework-guides"}]},{"type":"header","label":"Resources","items":[{"label":"Accessibility","href":"/accessibility"},{"label":"Design tokens","href":"/colors"},{"label":"Typography","href":"/fonts"}]},{"type":"header","label":"Company","items":[{"label":"WorkRoot","href":"https://workroot.in","external":true},{"label":"WRNexusJS","href":"https://wrnexusjs.dev","external":true}]}]' columns="4" maxWidth="wide" copyright="© 2026 WRNexusJS. All rights reserved." class="showcase-instance showcase-instance--1" /></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><span class="catalog-card-category">Layout</span><h2>Footer</h2><p>Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.</p></div>
<div class="catalog-card-footer"><span>8 props · 4 slots</span><a href="/components/footer">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article>
<article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><Grid size="default" columns="3" gap="md" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div></Grid></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Grid</h2><p>Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width.</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">
<article class="catalog-card" data-interactive-preview="false">
<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 class="catalog-card-stage"><Image size="default" src="data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 800 450&#39;%3E%3Crect width=&#39;800&#39; height=&#39;450&#39; fill=&#39;%231e1b4b&#39;/%3E%3Ccircle cx=&#39;400&#39; cy=&#39;225&#39; r=&#39;120&#39; fill=&#39;%237c3aed&#39;/%3E%3C/svg%3E" alt="Abstract violet circle on a dark surface" width="800" height="450" rounded="false" class="showcase-instance showcase-instance--1" /></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><span class="catalog-card-category">Layout</span><h2>Image</h2><p>Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.</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">
<article class="catalog-card" data-interactive-preview="false">
<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 class="catalog-card-stage"><Kbd size="default" label="Kbd" class="showcase-instance showcase-instance--1" /></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">
<article class="catalog-card" data-interactive-preview="false">
<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 class="catalog-card-stage"><LayoutSplitter size="default" columns="2" class="showcase-instance showcase-instance--1" /></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">
<article class="catalog-card" data-interactive-preview="false">
<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 class="catalog-card-stage"><Link size="default" label="Open components" href="/base" external="false" class="showcase-instance showcase-instance--1" /></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><span class="catalog-card-category">Layout</span><h2>Link</h2><p>Render an accessible internal or external link with target, relation, size, color, and public focus or click events.</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">
<article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="MetricGrid" items="[{&quot;id&quot;:&quot;metric-grid-0-1&quot;,&quot;key&quot;:&quot;metric-grid-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#metric-grid-demo&quot;,&quot;actionHref&quot;:&quot;#metric-grid-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;metric-grid-0-2&quot;,&quot;key&quot;:&quot;metric-grid-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#metric-grid-demo&quot;,&quot;actionHref&quot;:&quot;#metric-grid-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" columns="4" tabletColumns="2" mobileColumns="1" equalHeight="true" dividers="false" size="default" variant="default" class="showcase-instance showcase-instance--1"></div></div>
<div class="catalog-card-stage"><PublicPageShell maxWidth="xl" fullWidth="false" background="default" size="default" variant="default" class="showcase-instance showcase-instance--1">
<div class="showcase-shell-preview">
<header>Header slot</header>
<main>Public page content</main>
<footer>Footer slot</footer>
</div></PublicPageShell></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Metric Grid</h2><p>Responsive collection of metric cards.</p></div>
<div class="catalog-card-footer"><span>11 props · 1 slots</span><a href="/components/metric-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="PublicPageShell" fullWidth="false" size="default" variant="default" class="showcase-instance showcase-instance--1"><div slot="before" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>before slot</span></div><div slot="after" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>after slot</span></div></div></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Public Page Shell</h2><p>Consistent structural wrapper for public-facing pages.</p></div>
<div><span class="catalog-card-category">Layout</span><h2>Public Page Shell</h2><p>Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages.</p></div>
<div class="catalog-card-footer"><span>10 props · 3 slots</span><a href="/components/public-page-shell">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article>
<article class="catalog-card">
<article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="Section" size="default" variant="default" fullWidth="false" borderTop="false" borderBottom="false" 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 class="catalog-card-stage"><Section id="standard-section" size="default" variant="default" spacing="lg" maxWidth="xl" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Standard section content</div></Section></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Section</h2><p>Theme-aware page section with consistent spacing, width, background, and border controls.</p></div>
<div><span class="catalog-card-category">Layout</span><h2>Section</h2><p>Create a responsive themed page section with controlled spacing, width, borders, and surface treatment.</p></div>
<div class="catalog-card-footer"><span>10 props · 1 slots</span><a href="/components/section">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article>
<article class="catalog-card">
<article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="SectionHeader" title="Section Header example" description="A polished default section header for a modern application." align="start" size="default" headingLevel="2" class="showcase-instance showcase-instance--1"><div slot="icon" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>icon slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></div>
<div class="catalog-card-stage"><SectionHeader eyebrow="Public services" title="Everything citizens need" description="Discover online services, directories, guidance, and verified public information." align="left" size="default" headingLevel="2" maxWidth="3xl" class="showcase-instance showcase-instance--1" /></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Section Header</h2><p>Reusable accessible section heading with eyebrow, title, description, icon, and actions.</p></div>
<div><span class="catalog-card-category">Layout</span><h2>Section Header</h2><p>Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.</p></div>
<div class="catalog-card-footer"><span>10 props · 3 slots</span><a href="/components/section-header">Explore component <span aria-hidden="true">→</span></a></div>
</div>
</article>
<article class="catalog-card">
<article class="catalog-card" data-interactive-preview="false">
<div class="catalog-card-preview">
<div class="catalog-card-glow" aria-hidden="true"></div>
<div class="catalog-card-stage"><div data-component="TextLink" label="Text Link" href="#text-link-demo" external="false" icon="" showArrow="true" underline="false" size="default" variant="default" disabled="false" class="showcase-instance showcase-instance--1"></div></div>
<div class="catalog-card-stage"><Typography size="default" columns="2" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-typography"><h2>Readable page content</h2><p>Typography creates consistent hierarchy and comfortable reading rhythm.</p><ul><li>Clear headings</li><li>Readable paragraphs</li><li>Consistent lists</li></ul></div></Typography></div>
</div>
<div class="catalog-card-body">
<div><span class="catalog-card-category">Layout</span><h2>Text Link</h2><p>Styled inline action link with icons, arrows, external state, and disabled handling.</p></div>
<div class="catalog-card-footer"><span>14 props · 0 slots</span><a href="/components/text-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><span class="catalog-card-category">Layout</span><h2>Typography</h2><p>Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy.</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>