feat: sync showcase with WRNexusJS 0.8.72 and @wrnexus/ui 0.8.88
- Sync app, public, scripts, test and examples from the framework's component-showcase: redesigned component demos, marketing blocks under /blocks, template and preview galleries, distinct Timeline/Section variants, Chat Bubble receipts, a top-placement Drawer demo, and the playground code panel fix (objects in array props no longer blank out). - Standalone adaptations kept: the generator and tests read component-reference.json from the published @wrnexus/ui, and tests use the published @wrnexus/compiler and @wrnexus/syntax. - Dependencies: every @wrnexus/* package to its latest release (ui 0.8.88, styles 0.8.26, core 0.8.16, cli 0.8.72, ...), happy-dom for the playground tests, Tailwind 4.3; bun.lock and package-lock.json refreshed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClintchizandClaude Opus 5.5 committed
1 parent
bec9ef2889
commit
c0ac38c572
171 files changed
+21983
-35658
No files matched your search
@@ -0,0 +1,10 @@
|
||||
page AnnouncementBarBlock {
|
||||
layout = "gallery"
|
||||
|
||||
seo { title = "Announcement Bar block" }
|
||||
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Announcement Bar</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><AnnouncementBar badge="Public notice" badgeIcon="icon-[lucide--sparkles]" message="All composite components are now available" description="Review each component and its recommended use cases." icon="icon-[lucide--megaphone]" actionLabel="View components" actionHref="#components" actionIcon="icon-[lucide--arrow-down]" dismissible="true" dismissLabel="Announcement Bar" sticky="false" compact="false" flush="false" mobileCompact="false" mobileMessageLines="2" hideBadgeOnMobile="false" hideDescriptionOnMobile="false" flushMobile="false" size="default" width="default" variant="soft" class="showcase-instance showcase-instance--1" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page AnnouncementBarExample <span>{</span>
|
||||
view <span>{</span>
|
||||
<AnnouncementBar badge="Public notice" badgeIcon="icon-[lucide--sparkles]" message="All composite components are now available" description="Review each component and its recommended use cases." icon="icon-[lucide--megaphone]" actionLabel="View components" actionHref="#components" actionIcon="icon-[lucide--arrow-down]" dismissible="true" dismissLabel="Announcement Bar" sticky="false" compact="false" flush="false" mobileCompact="false" mobileMessageLines="2" hideBadgeOnMobile="false" hideDescriptionOnMobile="false" flushMobile="false" size="default" width="default" variant="soft" class="showcase-instance showcase-instance--1" />
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre></section> }
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
page CTASectionBlock {
|
||||
layout = "gallery"
|
||||
|
||||
seo { title = "CTASection block" }
|
||||
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>CTASection</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><CTASection eyebrow="Ready to continue" title="Build public pages with reusable components" description="Keep application pages focused on content and business data while the shared UI package owns presentation." icon="icon-[lucide--rocket]" align="split" size="default" variant="gradient" primaryLabel="Use these components" primaryHref="#components" primaryIcon="icon-[lucide--blocks]" secondaryLabel="Back to home" secondaryHref="/" secondaryIcon="icon-[lucide--house]" visualTitle="CTASection example" visualDescription="A polished default ctasection for a modern application." visualItems='[{"id":"ctasection-0-1","key":"ctasection-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#ctasection-demo","actionHref":"#ctasection-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"ctasection-0-2","key":"ctasection-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#ctasection-demo","actionHref":"#ctasection-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' maxWidth="full" fullBleed="false" class="showcase-instance showcase-instance--1"><div data-slot="visual">
|
||||
<div class="showcase-visual-panel">
|
||||
<span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
|
||||
<strong>Composable visual panel</strong>
|
||||
<p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
|
||||
</div></div></CTASection></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page CTASectionExample <span>{</span>
|
||||
view <span>{</span>
|
||||
<CTASection eyebrow="Ready to continue" title="Build public pages with reusable components" description="Keep application pages focused on content and business data while the shared UI package owns presentation." icon="icon-[lucide--rocket]" align="split" size="default" variant="gradient" primaryLabel="Use these components" primaryHref="#components" primaryIcon="icon-[lucide--blocks]" secondaryLabel="Back to home" secondaryHref="/" secondaryIcon="icon-[lucide--house]" visualTitle="CTASection example" visualDescription="A polished default ctasection for a modern application." visualItems='[<span>{</span>"id":"ctasection-0-1","key":"ctasection-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#ctasection-demo","actionHref":"#ctasection-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[<span>{</span>"label":"Nested option A","value":"nested-a"<span>}</span>,<span>{</span>"label":"Nested option B","value":"nested-b"<span>}</span>],"links":[<span>{</span>"label":"Documentation","href":"#documentation"<span>}</span>,<span>{</span>"label":"API reference","href":"#api-reference"<span>}</span>],"values":["Included","Standard"]<span>}</span>,<span>{</span>"id":"ctasection-0-2","key":"ctasection-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#ctasection-demo","actionHref":"#ctasection-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[<span>{</span>"label":"Nested option A","value":"nested-a"<span>}</span>,<span>{</span>"label":"Nested option B","value":"nested-b"<span>}</span>],"links":[<span>{</span>"label":"Documentation","href":"#documentation"<span>}</span>,<span>{</span>"label":"API reference","href":"#api-reference"<span>}</span>],"values":["Included","Standard"]<span>}</span>]' maxWidth="full" fullBleed="false" class="showcase-instance showcase-instance--1"><div data-slot="visual">
|
||||
<div class="showcase-visual-panel">
|
||||
<span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
|
||||
<strong>Composable visual panel</strong>
|
||||
<p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
|
||||
</div></div></CTASection>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre></section> }
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
page FeatureCardBlock {
|
||||
layout = "gallery"
|
||||
|
||||
seo { title = "Feature Card block" }
|
||||
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Feature Card</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><FeatureCard icon="icon-[lucide--shield-check]" iconStyle="soft" eyebrow="Citizen support" title="Citizen services" description="Report incidents, request certificates, and find safety information." href="#citizen-services" external="false" actionLabel="Explore services" showArrow="true" stretchedLink="true" badge="Public" size="default" color="primary" variant="default" hover="lift" align="start" disabled="false" class="showcase-instance showcase-instance--1" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page FeatureCardExample <span>{</span>
|
||||
view <span>{</span>
|
||||
<FeatureCard icon="icon-[lucide--shield-check]" iconStyle="soft" eyebrow="Citizen support" title="Citizen services" description="Report incidents, request certificates, and find safety information." href="#citizen-services" external="false" actionLabel="Explore services" showArrow="true" stretchedLink="true" badge="Public" size="default" color="primary" variant="default" hover="lift" align="start" disabled="false" class="showcase-instance showcase-instance--1" />
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre></section> }
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
page FeatureGridBlock {
|
||||
layout = "gallery"
|
||||
|
||||
seo { title = "Feature Grid block" }
|
||||
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Feature Grid</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><FeatureGrid size="default" 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" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page FeatureGridExample <span>{</span>
|
||||
view <span>{</span>
|
||||
<FeatureGrid size="default" items='[<span>{</span>"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"<span>}</span>,<span>{</span>"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"<span>}</span>,<span>{</span>"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"<span>}</span>]' 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" />
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre></section> }
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
page FeatureIconCardBlock {
|
||||
layout = "gallery"
|
||||
|
||||
seo { title = "Feature Icon Card block" }
|
||||
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Feature Icon Card</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><FeatureIconCard icon="icon-[lucide--shield-check]" title="Secure by design" description="Build with consistent validation, accessibility, and theme support." href="#security" actionLabel="Review security" badge="Core" size="default" variant="default" align="start" clickableSurface="false" descriptionTone="A polished default feature icon card for a modern application." class="showcase-instance showcase-instance--1" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page FeatureIconCardExample <span>{</span>
|
||||
view <span>{</span>
|
||||
<FeatureIconCard icon="icon-[lucide--shield-check]" title="Secure by design" description="Build with consistent validation, accessibility, and theme support." href="#security" actionLabel="Review security" badge="Core" size="default" variant="default" align="start" clickableSurface="false" descriptionTone="A polished default feature icon card for a modern application." class="showcase-instance showcase-instance--1" />
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre></section> }
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
page FooterBlock {
|
||||
layout = "gallery"
|
||||
|
||||
seo { title = "Footer block" }
|
||||
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Footer</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><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" mobileColumns="2" copyright="© 2026 WRNexusJS. All rights reserved." class="showcase-instance showcase-instance--1" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page FooterExample <span>{</span>
|
||||
view <span>{</span>
|
||||
<Footer size="default" label="Footer" items='[<span>{</span>"type":"header","label":"Product","description":"Build consistent interfaces with WRNexusJS.","items":[<span>{</span>"label":"Components","href":"/base"<span>}</span>,<span>{</span>"label":"Themes","href":"/themes"<span>}</span>,<span>{</span>"label":"Examples","href":"/blocks"<span>}</span>]<span>}</span>,<span>{</span>"type":"header","label":"Developers","items":[<span>{</span>"label":"Documentation","href":"/docs"<span>}</span>,<span>{</span>"label":"Installation","href":"/installation"<span>}</span>,<span>{</span>"label":"Framework guides","href":"/framework-guides"<span>}</span>]<span>}</span>,<span>{</span>"type":"header","label":"Resources","items":[<span>{</span>"label":"Accessibility","href":"/accessibility"<span>}</span>,<span>{</span>"label":"Design tokens","href":"/colors"<span>}</span>,<span>{</span>"label":"Typography","href":"/fonts"<span>}</span>]<span>}</span>,<span>{</span>"type":"header","label":"Company","items":[<span>{</span>"label":"WorkRoot","href":"https://workroot.in","external":true<span>}</span>,<span>{</span>"label":"WRNexusJS","href":"https://wrnexusjs.dev","external":true<span>}</span>]<span>}</span>]' columns="4" maxWidth="wide" mobileColumns="2" copyright="© 2026 WRNexusJS. All rights reserved." class="showcase-instance showcase-instance--1" />
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre></section> }
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
page HeroActionsBlock {
|
||||
layout = "gallery"
|
||||
|
||||
seo { title = "Hero Actions block" }
|
||||
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Hero Actions</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><HeroActions actions='[{"label":"Browse components","href":"#components","icon":"icon-[lucide--blocks]","variant":"primary"},{"label":"View metrics","href":"#metrics","icon":"icon-[lucide--chart-no-axes-column-increasing]","variant":"outline"}]' align="left" orientation="horizontal" stackOnMobile="true" fullWidthMobile="true" size="default" class="showcase-instance showcase-instance--1" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page HeroActionsExample <span>{</span>
|
||||
view <span>{</span>
|
||||
<HeroActions actions='[<span>{</span>"label":"Browse components","href":"#components","icon":"icon-[lucide--blocks]","variant":"primary"<span>}</span>,<span>{</span>"label":"View metrics","href":"#metrics","icon":"icon-[lucide--chart-no-axes-column-increasing]","variant":"outline"<span>}</span>]' align="left" orientation="horizontal" stackOnMobile="true" fullWidthMobile="true" size="default" class="showcase-instance showcase-instance--1" />
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre></section> }
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
page HeroBlock {
|
||||
layout = "gallery"
|
||||
|
||||
seo { title = "Hero block" }
|
||||
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Hero</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><Hero eyebrow="Reusable public UI" eyebrowIcon="icon-[lucide--sparkles]" icon="" title="Build polished pages" highlight="with consistent hero layouts" description="Create strong first impressions for public portals, product pages, and service overviews." align="start" size="default" variant="gradient" layout="split" visualPosition="right" visualStyle="card" showDecorations="true" fullBleed="true" visualTitle="Hero example" visualDescription="A polished default hero for a modern application." visualItems='[{"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' primaryLabel="Explore components" primaryHref="#components" primaryIcon="icon-[lucide--arrow-right]" secondaryLabel="Read documentation" secondaryHref="#docs" secondaryIcon="icon-[lucide--book-open]" tertiaryLabel="Hero" tertiaryHref="#hero-demo" badges='[{"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' trustItems='[{"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,Line truncated
|
||||
<div class="showcase-visual-panel">
|
||||
<span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
|
||||
<strong>Composable visual panel</strong>
|
||||
<p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
|
||||
</div></div></Hero></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page HeroExample <span>{</span>
|
||||
view <span>{</span>
|
||||
<Hero eyebrow="Reusable public UI" eyebrowIcon="icon-[lucide--sparkles]" icon="" title="Build polished pages" highlight="with consistent hero layouts" description="Create strong first impressions for public portals, product pages, and service overviews." align="start" size="default" variant="gradient" layout="split" visualPosition="right" visualStyle="card" showDecorations="true" fullBleed="true" visualTitle="Hero example" visualDescription="A polished default hero for a modern application." visualItems='[<span>{</span>"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[<span>{</span>"label":"Nested option A","value":"nested-a"<span>}</span>,<span>{</span>"label":"Nested option B","value":"nested-b"<span>}</span>],"links":[<span>{</span>"label":"Documentation","href":"#documentation"<span>}</span>,<span>{</span>"label":"API reference","href":"#api-reference"<span>}</span>],"values":["Included","Standard"]<span>}</span>,<span>{</span>"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[<span>{</span>"label":"Nested option A","value":"nested-a"<span>}</span>,<span>{</span>"label":"Nested option B","value":"nested-b"<span>}</span>],"links":[<span>{</span>"label":"Documentation","href":"#documentation"<span>}</span>,<span>{</span>"label":"API reference","href":"#api-reference"<span>}</span>],"values":["Included","Standard"]<span>}</span>]' primaryLabel="Explore components" primaryHref="#components" primaryIcon="icon-[lucide--arrow-right]" secondaryLabel="Read documentation" secondaryHref="#docs" secondaryIcon="icon-[lucide--book-open]" tertiaryLabel="Hero" tertiaryHref="#hero-demo" badges='[<span>{</span>"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[<span>{</span>"label":"Nested option A","value":"nested-a"<span>}</span>,<span>{</span>"label":"Nested option B","value":"nested-b"<span>}</span>],"links":[<span>{</span>"label":"Documentation","href":"#documentation"<span>}</span>,<span>{</span>"label":"API reference","href":"#api-reference"<span>}</span>],"values":["Included","Standard"]<span>}</span>,<span>{</span>"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[<span>{</span>"label":"Nested option A","value":"nested-a"<span>}</span>,<span>{</span>"label":"Nested option B","value":"nested-b"<span>}</span>],"links":[<span>{</span>"label":"Documentation","href":"#documentation"<span>}</span>,<span>{</span>"label":"API reference","href":"#api-reference"<span>}</span>],"values":["Included","Standard"]<span>}Line truncated
|
||||
<div class="showcase-visual-panel">
|
||||
<span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
|
||||
<strong>Composable visual panel</strong>
|
||||
<p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
|
||||
</div></div></Hero>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre></section> }
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
page BlocksIndex {
|
||||
layout = "gallery"
|
||||
seo { title = "UI blocks" }
|
||||
view { <div class="example-catalog"><a class="example-card" href="/blocks/announcement-bar"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Announcement Bar</h2><p>Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/ctasection"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>CTASection</h2><p>Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/feature-card"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Feature Card</h2><p>Present one linked feature or service with media, icon, badge, description, and action.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/feature-grid"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Feature Grid</h2><p>Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/feature-icon-card"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Feature Icon Card</h2><p>Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/footer"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Footer</h2><p>Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/hero"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Hero</h2><p>Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/hero-actions"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Hero Actions</h2><p>Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/marketing-section-header"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Marketing Section Header</h2><p>Introduce marketing content with an eyebrow, title, description, and optional linked action.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/metric-grid"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Metric Grid</h2><p>Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/page-header"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Page Header</h2><p>Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/section-header"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Section Header</h2><p>Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/split-hero"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Split Hero</h2><p>Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.</p><strong>Open example →</strong></div></a><a class="example-card" href="/blocks/stats-bar"><div class="example-card__art"><span class="icon-[lucide--layout-template]" aria-hidden="true"></span></div><div><h2>Stats Bar</h2><p>Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.</p><strong>Open example →</strong></div></a></div> }
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
page MarketingSectionHeaderBlock {
|
||||
layout = "gallery"
|
||||
|
||||
seo { title = "Marketing Section Header block" }
|
||||
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Marketing Section Header</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><MarketingSectionHeader eyebrow="Platform capabilities" title="Build complete public experiences" description="Use reusable sections, cards, metrics, heroes, and CTAs." align="split" size="default" actionLabel="Explore components" actionHref="#components" actionIcon="icon-[lucide--arrow-right]" actionExternal="false" class="showcase-instance showcase-instance--1" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page MarketingSectionHeaderExample <span>{</span>
|
||||
view <span>{</span>
|
||||
<MarketingSectionHeader eyebrow="Platform capabilities" title="Build complete public experiences" description="Use reusable sections, cards, metrics, heroes, and CTAs." align="split" size="default" actionLabel="Explore components" actionHref="#components" actionIcon="icon-[lucide--arrow-right]" actionExternal="false" class="showcase-instance showcase-instance--1" />
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre></section> }
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
page MetricGridBlock {
|
||||
layout = "gallery"
|
||||
|
||||
seo { title = "Metric Grid block" }
|
||||
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Metric Grid</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><MetricGrid items='[{"label":"Public services","value":"24","description":"Citizen-facing services available online.","icon":"icon-[lucide--hand-heart]","trend":"+4","trendLabel":"this release","trendDirection":"up","color":"primary"},{"label":"Police stations","value":"126","description":"Searchable station and jurisdiction entries.","icon":"icon-[lucide--landmark]","trend":"Updated","trendLabel":"today","color":"info"},{"label":"Availability","value":"99.9","suffix":"%","description":"Target service availability.","icon":"icon-[lucide--activity]","trend":"Stable","trendLabel":"30 days","trendDirection":"positive","color":"success"}]' columns="3" tabletColumns="2" mobileColumns="1" gap="lg" equalHeight="true" dividers="false" size="default" variant="default" maxWidth="full" class="showcase-instance showcase-instance--1" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page MetricGridExample <span>{</span>
|
||||
view <span>{</span>
|
||||
<MetricGrid items='[<span>{</span>"label":"Public services","value":"24","description":"Citizen-facing services available online.","icon":"icon-[lucide--hand-heart]","trend":"+4","trendLabel":"this release","trendDirection":"up","color":"primary"<span>}</span>,<span>{</span>"label":"Police stations","value":"126","description":"Searchable station and jurisdiction entries.","icon":"icon-[lucide--landmark]","trend":"Updated","trendLabel":"today","color":"info"<span>}</span>,<span>{</span>"label":"Availability","value":"99.9","suffix":"%","description":"Target service availability.","icon":"icon-[lucide--activity]","trend":"Stable","trendLabel":"30 days","trendDirection":"positive","color":"success"<span>}</span>]' columns="3" tabletColumns="2" mobileColumns="1" gap="lg" equalHeight="true" dividers="false" size="default" variant="default" maxWidth="full" class="showcase-instance showcase-instance--1" />
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre></section> }
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
page PageHeaderBlock {
|
||||
layout = "gallery"
|
||||
|
||||
seo { title = "Page Header block" }
|
||||
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Page Header</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><PageHeader eyebrow="Component showcase" title="Page headers with clear hierarchy" description="Use PageHeader for services, directories, legal pages, guides, dashboards, and public information." icon="icon-[lucide--panel-top]" align="start" centered="false" compact="false" size="default" maxWidth="full" showBreadcrumbs="true" breadcrumbs='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' breadcrumbParentHref="#page-header-demo" primaryLabel="Primary action" primaryHref="#primary" primaryIcon="icon-[lucide--arrow-down]" secondaryLabel="Secondary action" secondaryHref="#secondary" secondaryIcon="icon-[lucide--house]" variant="default" borderBottom="true" class="showcase-instance showcase-instance--1" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page PageHeaderExample <span>{</span>
|
||||
view <span>{</span>
|
||||
<PageHeader eyebrow="Component showcase" title="Page headers with clear hierarchy" description="Use PageHeader for services, directories, legal pages, guides, dashboards, and public information." icon="icon-[lucide--panel-top]" align="start" centered="false" compact="false" size="default" maxWidth="full" showBreadcrumbs="true" breadcrumbs='[<span>{</span>"label":"Home","href":"/","icon":"icon-[lucide--house]"<span>}</span>,<span>{</span>"label":"Components","href":"/base"<span>}</span>,<span>{</span>"label":"Page header","current":true<span>}</span>]' breadcrumbParentHref="#page-header-demo" primaryLabel="Primary action" primaryHref="#primary" primaryIcon="icon-[lucide--arrow-down]" secondaryLabel="Secondary action" secondaryHref="#secondary" secondaryIcon="icon-[lucide--house]" variant="default" borderBottom="true" class="showcase-instance showcase-instance--1" />
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre></section> }
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
page SectionHeaderBlock {
|
||||
layout = "gallery"
|
||||
|
||||
seo { title = "Section Header block" }
|
||||
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Section Header</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><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" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page SectionHeaderExample <span>{</span>
|
||||
view <span>{</span>
|
||||
<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" />
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre></section> }
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
page SplitHeroBlock {
|
||||
layout = "gallery"
|
||||
|
||||
seo { title = "Split Hero block" }
|
||||
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Split Hero</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><SplitHero eyebrow="Balanced layout" title="Combine detailed content" highlight="with a strong visual panel" description="Use SplitHero for product explanations, department introductions, campaigns, and feature storytelling." primaryLabel="View public services" primaryHref="#services" primaryIcon="icon-[lucide--arrow-right]" secondaryLabel="Contact department" secondaryHref="#contact" secondaryIcon="icon-[lucide--phone]" visualPosition="right" reverse="false" ratio="balanced" align="start" size="default" variant="default" maxWidth="wide" fullBleed="true" flushMobile="false" descriptionWeight="A polished default split hero for a modern application." mobileStack="true" visualTitle="Split Hero example" visualDescription="A polished default split hero for a modern application." visualItems='[{"id":"split-hero-0-1","key":"split-hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"split-hero-0-2","key":"split-hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' trustItems='[{"id":"split-hero-0-1","key":"split-hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"split-hero-0-2","key":"split-hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' class="showcase-instance showcase-instance--1"><div data-slot="visual">
|
||||
<div class="showcase-visual-panel">
|
||||
<span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
|
||||
<strong>Composable visual panel</strong>
|
||||
<p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
|
||||
</div></div></SplitHero></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page SplitHeroExample <span>{</span>
|
||||
view <span>{</span>
|
||||
<SplitHero eyebrow="Balanced layout" title="Combine detailed content" highlight="with a strong visual panel" description="Use SplitHero for product explanations, department introductions, campaigns, and feature storytelling." primaryLabel="View public services" primaryHref="#services" primaryIcon="icon-[lucide--arrow-right]" secondaryLabel="Contact department" secondaryHref="#contact" secondaryIcon="icon-[lucide--phone]" visualPosition="right" reverse="false" ratio="balanced" align="start" size="default" variant="default" maxWidth="wide" fullBleed="true" flushMobile="false" descriptionWeight="A polished default split hero for a modern application." mobileStack="true" visualTitle="Split Hero example" visualDescription="A polished default split hero for a modern application." visualItems='[<span>{</span>"id":"split-hero-0-1","key":"split-hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[<span>{</span>"label":"Nested option A","value":"nested-a"<span>}</span>,<span>{</span>"label":"Nested option B","value":"nested-b"<span>}</span>],"links":[<span>{</span>"label":"Documentation","href":"#documentation"<span>}</span>,<span>{</span>"label":"API reference","href":"#api-reference"<span>}</span>],"values":["Included","Standard"]<span>}</span>,<span>{</span>"id":"split-hero-0-2","key":"split-hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[<span>{</span>"label":"Nested option A","value":"nested-a"<span>}</span>,<span>{</span>"label":"Nested option B","value":"nested-b"<span>}</span>],"links":[<span>{</span>"label":"Documentation","href":"#documentation"<span>}</span>,<span>{</span>"label":"API reference","href":"#api-reference"<span>}</span>],"values":["Included","Standard"]<span>}</span>]' trustItems='[<span>{</span>"id":"split-hero-0-1","key":"split-hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[<span>{</span>"label":"Nested option A","value":"nested-a"<span>}</span>,<span>{</span>"label":"Nested option B","value":"nested-b"<span>}</span>],"links":[<span>{</span>"label":"Documentation","href":"#documentation"<span>}</span>,<span>{</span>"label":"API reference","href":"#api-reference"<span>}</span>],"values":["Included","Standard"]<span>}</span>,<span>{</span>"id":"split-hero-0-2","key":"split-hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[<span>{</span>"label":"Nested option A","value":"nested-a"<span>}</span>,<span>{</span>"label":"Nested option B","value":"nested-b"<span>}</span>],"links":[<span>{</span>"label":"Documentation","href":"#documentation"<span>Line truncated
|
||||
<div class="showcase-visual-panel">
|
||||
<span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
|
||||
<strong>Composable visual panel</strong>
|
||||
<p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
|
||||
</div></div></SplitHero>
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre></section> }
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
page StatsBarBlock {
|
||||
layout = "gallery"
|
||||
|
||||
seo { title = "Stats Bar block" }
|
||||
view { <header class="docs-intro"><a href="/block-library">← All blocks</a><h1>Stats Bar</h1><p>A ready-to-use section. Copy the complete example below.</p></header><section class="block-live-preview"><StatsBar items='[{"label":"Composite components","value":"18","description":"Reusable public-page building blocks","icon":"icon-[lucide--blocks]","color":"primary"},{"label":"Rendering","value":"SSR","description":"Server-first WRNexusJS rendering","icon":"icon-[lucide--server]","color":"info"},{"label":"Responsive","value":"Yes","description":"Mobile, tablet, and desktop layouts","icon":"icon-[lucide--monitor-smartphone]","color":"success"},{"label":"Theme aware","value":"Yes","description":"Active theme and accent palettes","icon":"icon-[lucide--palette]","color":"warning"}]' columns="4" compact="true" dividers="true" icons="true" size="default" variant="raised" maxWidth="xl" mobileColumns="1" class="showcase-instance showcase-instance--1" /></section><section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page StatsBarExample <span>{</span>
|
||||
view <span>{</span>
|
||||
<StatsBar items='[<span>{</span>"label":"Composite components","value":"18","description":"Reusable public-page building blocks","icon":"icon-[lucide--blocks]","color":"primary"<span>}</span>,<span>{</span>"label":"Rendering","value":"SSR","description":"Server-first WRNexusJS rendering","icon":"icon-[lucide--server]","color":"info"<span>}</span>,<span>{</span>"label":"Responsive","value":"Yes","description":"Mobile, tablet, and desktop layouts","icon":"icon-[lucide--monitor-smartphone]","color":"success"<span>}</span>,<span>{</span>"label":"Theme aware","value":"Yes","description":"Active theme and accent palettes","icon":"icon-[lucide--palette]","color":"warning"<span>}</span>]' columns="4" compact="true" dividers="true" icons="true" size="default" variant="raised" maxWidth="xl" mobileColumns="1" class="showcase-instance showcase-instance--1" />
|
||||
<span>}</span>
|
||||
<span>}</span></code></pre></section> }
|
||||
}
|
||||
Reference in new issue
Block a user