10 lines
2.4 KiB
Plaintext
10 lines
2.4 KiB
Plaintext
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> }
|
|
} |