655 lines
56 KiB
Plaintext
655 lines
56 KiB
Plaintext
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
|
page CardDetail {
|
|
layout = "showcase"
|
|
state playground_title = ctx.url.searchParams.get("pg_title") ?? "Card title"
|
|
state playground_subtitle = ctx.url.searchParams.get("pg_subtitle") ?? ""
|
|
state playground_description = ctx.url.searchParams.get("pg_description") ?? "Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
state playground_header = ctx.url.searchParams.get("pg_header") ?? ""
|
|
state playground_footer = ctx.url.searchParams.get("pg_footer") ?? ""
|
|
state playground_imageSrc = ctx.url.searchParams.get("pg_imageSrc") ?? "/card-landscape.svg"
|
|
state playground_imageAlt = ctx.url.searchParams.get("pg_imageAlt") ?? "Abstract blue glass shapes"
|
|
state playground_imagePosition = ctx.url.searchParams.get("pg_imagePosition") ?? "top"
|
|
state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Go somewhere"
|
|
state playground_actionHref = ctx.url.searchParams.get("pg_actionHref") ?? "#card-demo"
|
|
state playground_headerActions = ctx.url.searchParams.get("pg_headerActions") ?? ""
|
|
state playground_navigation = ctx.url.searchParams.get("pg_navigation") ?? ""
|
|
state playground_activeNav = ctx.url.searchParams.get("pg_activeNav") ?? ""
|
|
state playground_mobileNavigation = ctx.url.searchParams.get("pg_mobileNavigation") ?? "false"
|
|
state playground_alertTitle = ctx.url.searchParams.get("pg_alertTitle") ?? ""
|
|
state playground_alertDescription = ctx.url.searchParams.get("pg_alertDescription") ?? ""
|
|
state playground_empty = ctx.url.searchParams.get("pg_empty") ?? "false"
|
|
state playground_emptyTitle = ctx.url.searchParams.get("pg_emptyTitle") ?? "No data to show"
|
|
state playground_emptyIcon = ctx.url.searchParams.get("pg_emptyIcon") ?? "icon-[lucide--inbox]"
|
|
state playground_items = ctx.url.searchParams.get("pg_items") ?? ""
|
|
state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
|
|
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
|
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
|
|
state playground_layout = ctx.url.searchParams.get("pg_layout") ?? "vertical"
|
|
state playground_align = ctx.url.searchParams.get("pg_align") ?? "left"
|
|
state playground_hover = ctx.url.searchParams.get("pg_hover") ?? "none"
|
|
state playground_scrollable = ctx.url.searchParams.get("pg_scrollable") ?? "false"
|
|
state playground_maxHeight = ctx.url.searchParams.get("pg_maxHeight") ?? "18rem"
|
|
state playground_dismissible = ctx.url.searchParams.get("pg_dismissible") ?? "false"
|
|
state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? ""
|
|
state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
|
|
seo {
|
|
title = "Card"
|
|
description = "Theme-aware, responsive card component."
|
|
}
|
|
view {
|
|
<nav class="docs-breadcrumbs" aria-label="Breadcrumb">
|
|
<a href="/">Components</a><span aria-hidden="true">/</span><a href="/base">Base</a><span aria-hidden="true">/</span><span>Card</span>
|
|
</nav>
|
|
<header class="detail-hero">
|
|
<div class="detail-hero-copy">
|
|
<span class="showcase-eyebrow">Base component</span>
|
|
<h1>Card</h1>
|
|
<p>Theme-aware, responsive card component.</p>
|
|
<div class="detail-badges"><span>31 props</span><span>1 slots</span><span>6 events</span><span>Theme ready</span><span>Responsive</span></div>
|
|
</div>
|
|
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
|
</header>
|
|
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="Card" data-playground-public-tag="true" data-playground-has-slot="true">
|
|
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Card</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
|
|
<div class="playground-workbench">
|
|
<div class="playground-preview">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="playground-preview-source" data-playground-preview><div data-component="Card" title="{playground_title}" subtitle="{playground_subtitle}" description="{playground_description}" header="{playground_header}" footer="{playground_footer}" imageSrc="{playground_imageSrc}" imageAlt="{playground_imageAlt}" imagePosition="{playground_imagePosition}" actionLabel="{playground_actionLabel}" actionHref="{playground_actionHref}" headerActions="{playground_headerActions}" navigation="{playground_navigation}" activeNav="{playground_activeNav}" mobileNavigation="{playground_mobileNavigation}" alertTitle="{playground_alertTitle}" alertDescription="{playground_alertDescription}" empty="{playground_empty}" emptyTitle="{playground_emptyTitle}" emptyIcon="{playground_emptyIcon}" items="{playground_items}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" layout="{playground_layout}" align="{playground_align}" hover="{playground_hover}" scrollable="{playground_scrollable}" maxHeight="{playground_maxHeight}" dismissible="{playground_dismissible}" ariaLabel="{playground_ariaLabel}" class="{playground_class}"></div></div>
|
|
<section class="playground-code" aria-label="Current component code">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
|
<pre><code data-playground-code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
imageSrc="/card-landscape.svg"
|
|
imageAlt="Abstract blue glass shapes"
|
|
actionLabel="Go somewhere"
|
|
actionHref="#card-demo"
|
|
/></code></pre>
|
|
</section>
|
|
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
|
</div>
|
|
<form class="playground-controls" data-playground-form>
|
|
<header><div><span>Component props</span><strong>31 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
|
<div class="playground-fields"><label class="playground-field" for="playground-card-title"><span><strong>title</strong><small>string</small></span><input id="playground-card-title" name="pg_title" type="text" value="Card title" /></label><label class="playground-field" for="playground-card-subtitle"><span><strong>subtitle</strong><small>string</small></span><input id="playground-card-subtitle" name="pg_subtitle" type="text" value="" /></label><label class="playground-field" for="playground-card-description"><span><strong>description</strong><small>string</small></span><input id="playground-card-description" name="pg_description" type="text" value="Some quick example text to build on the card title and make up the bulk of the card's content." /></label><label class="playground-field" for="playground-card-header"><span><strong>header</strong><small>string</small></span><input id="playground-card-header" name="pg_header" type="text" value="" /></label><label class="playground-field" for="playground-card-footer"><span><strong>footer</strong><small>string</small></span><input id="playground-card-footer" name="pg_footer" type="text" value="" /></label><label class="playground-field" for="playground-card-imageSrc"><span><strong>image Src</strong><small>string</small></span><input id="playground-card-imageSrc" name="pg_imageSrc" type="text" value="/card-landscape.svg" /></label><label class="playground-field" for="playground-card-imageAlt"><span><strong>image Alt</strong><small>string</small></span><input id="playground-card-imageAlt" name="pg_imageAlt" type="text" value="Abstract blue glass shapes" /></label><label class="playground-field" for="playground-card-imagePosition"><span><strong>image Position</strong><small>string</small></span><select id="playground-card-imagePosition" name="pg_imagePosition"><option value="top" selected>top</option><option value="overlay">overlay</option><option value="bottom">bottom</option></select></label><label class="playground-field" for="playground-card-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-card-actionLabel" name="pg_actionLabel" type="text" value="Go somewhere" /></label><label class="playground-field" for="playground-card-actionHref"><span><strong>action Href</strong><small>string</small></span><input id="playground-card-actionHref" name="pg_actionHref" type="text" value="#card-demo" /></label><label class="playground-field" for="playground-card-headerActions"><span><strong>header Actions</strong><small>string</small></span><textarea id="playground-card-headerActions" name="pg_headerActions" rows="5" spellcheck="false" data-playground-json></textarea><em data-playground-error></em></label><label class="playground-field" for="playground-card-navigation"><span><strong>navigation</strong><small>string</small></span><textarea id="playground-card-navigation" name="pg_navigation" rows="5" spellcheck="false" data-playground-json></textarea><em data-playground-error></em></label><label class="playground-field" for="playground-card-activeNav"><span><strong>active Nav</strong><small>string</small></span><input id="playground-card-activeNav" name="pg_activeNav" type="text" value="" /></label><label class="playground-toggle" for="playground-card-mobileNavigation"><span><strong>mobile Navigation</strong><small>boolean</small></span><input id="playground-card-mobileNavigation" name="pg_mobileNavigation" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-card-alertTitle"><span><strong>alert Title</strong><small>string</small></span><input id="playground-card-alertTitle" name="pg_alertTitle" type="text" value="" /></label><label class="playground-field" for="playground-card-alertDescription"><span><strong>alert Description</strong><small>string</small></span><input id="playground-card-alertDescription" name="pg_alertDescription" type="text" value="" /></label><label class="playground-toggle" for="playground-card-empty"><span><strong>empty</strong><small>boolean</small></span><input id="playground-card-empty" name="pg_empty" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-card-emptyTitle"><span><strong>empty Title</strong><small>string</small></span><input id="playground-card-emptyTitle" name="pg_emptyTitle" type="text" value="No data to show" /></label><label class="playground-field" for="playground-card-emptyIcon"><span><strong>empty Icon</strong><small>string</small></span><input id="playground-card-emptyIcon" name="pg_emptyIcon" type="text" value="icon-[lucide--inbox]" /></label><label class="playground-field" for="playground-card-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-card-items" name="pg_items" rows="5" spellcheck="false" data-playground-json></textarea><em data-playground-error></em></label><label class="playground-field" for="playground-card-size"><span><strong>size</strong><small>string</small></span><select id="playground-card-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-card-color"><span><strong>color</strong><small>string</small></span><select id="playground-card-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-card-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-card-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-card-layout"><span><strong>layout</strong><small>string</small></span><input id="playground-card-layout" name="pg_layout" type="text" value="vertical" /></label><label class="playground-field" for="playground-card-align"><span><strong>align</strong><small>string</small></span><select id="playground-card-align" name="pg_align"><option value="left" selected>left</option><option value="start">start</option><option value="center">center</option><option value="end">end</option></select></label><label class="playground-field" for="playground-card-hover"><span><strong>hover</strong><small>string</small></span><input id="playground-card-hover" name="pg_hover" type="text" value="none" /></label><label class="playground-toggle" for="playground-card-scrollable"><span><strong>scrollable</strong><small>boolean</small></span><input id="playground-card-scrollable" name="pg_scrollable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-card-maxHeight"><span><strong>max Height</strong><small>string</small></span><input id="playground-card-maxHeight" name="pg_maxHeight" type="text" value="18rem" /></label><label class="playground-toggle" for="playground-card-dismissible"><span><strong>dismissible</strong><small>boolean</small></span><input id="playground-card-dismissible" name="pg_dismissible" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-card-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-card-ariaLabel" name="pg_ariaLabel" type="text" value="" /></label><label class="playground-field" for="playground-card-class"><span><strong>class</strong><small>string</small></span><input id="playground-card-class" name="pg_class" type="text" value="" /></label></div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
<div class="detail-layout">
|
|
<main class="detail-content">
|
|
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Basic usage</span><h2>Default card</h2><p>Use a basic card with media, text content, and a supporting action.</p></div>
|
|
<span class="demo-case-number">01</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-1" class="demo-canvas demo-canvas--1">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card's content." imageSrc="/card-landscape.svg" imageAlt="Abstract blue glass shapes" actionLabel="Go somewhere" actionHref="#card-demo" size="md" color="primary"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Default card usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
imageSrc="/card-landscape.svg"
|
|
imageAlt="Abstract blue glass shapes"
|
|
actionLabel="Go somewhere"
|
|
actionHref="#card-demo"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Content</span><h2>Body</h2><p>Use the card body for the main content area.</p></div>
|
|
<span class="demo-case-number">02</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-2" class="demo-canvas demo-canvas--2">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="" description="Some quick example text to build on the card title and make up the bulk of the card's content." actionLabel="" actionHref="#card-demo" size="md" color="primary"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Body usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
actionHref="#card-demo"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Content</span><h2>Simple card</h2><p>Use a body-only card when no separate header or footer is needed.</p></div>
|
|
<span class="demo-case-number">03</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-3" class="demo-canvas demo-canvas--3">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="Card title" subtitle="Card subtitle" description="Some quick example text to build on the card title and make up the bulk of the card's content." actionLabel="Card link" actionHref="#card-demo" size="md" color="primary"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Simple card usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
subtitle="Card subtitle"
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
actionLabel="Card link"
|
|
actionHref="#card-demo"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Structure</span><h2>Header and footer</h2><p>Add a header, footer, or both when the card needs clearer structure.</p></div>
|
|
<span class="demo-case-number">04</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-4" class="demo-canvas demo-canvas--4">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card's content." header="Featured" footer="Last updated 5 mins ago" actionLabel="Card link" actionHref="#card-demo" size="md" color="primary"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Header and footer usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
header="Featured"
|
|
footer="Last updated 5 mins ago"
|
|
actionLabel="Card link"
|
|
actionHref="#card-demo"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Structure</span><h2>Footer only</h2><p>Separate secondary actions or summary details from the card body.</p></div>
|
|
<span class="demo-case-number">05</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-5" class="demo-canvas demo-canvas--5">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card's content." footer="Last updated 5 mins ago" actionLabel="Card link" actionHref="#card-demo" size="md" color="primary"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Footer only usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
footer="Last updated 5 mins ago"
|
|
actionLabel="Card link"
|
|
actionHref="#card-demo"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Sizes</span><h2>Small</h2><p>Use a compact card size for denser lists and side panels.</p></div>
|
|
<span class="demo-case-number">06</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-6" class="demo-canvas demo-canvas--6">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card's content." actionLabel="Card link" actionHref="#card-demo" size="sm" color="primary"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Small usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
actionLabel="Card link"
|
|
actionHref="#card-demo"
|
|
size="sm"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Sizes</span><h2>Default</h2><p>Use the default card size for most content blocks.</p></div>
|
|
<span class="demo-case-number">07</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-7" class="demo-canvas demo-canvas--7">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card's content." actionLabel="Card link" actionHref="#card-demo" size="md" color="primary"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Default usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
actionLabel="Card link"
|
|
actionHref="#card-demo"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Sizes</span><h2>Large</h2><p>Increase card spacing when content needs more breathing room.</p></div>
|
|
<span class="demo-case-number">08</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-8" class="demo-canvas demo-canvas--8">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card's content." actionLabel="Card link" actionHref="#card-demo" size="lg" color="primary"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Large usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
actionLabel="Card link"
|
|
actionHref="#card-demo"
|
|
size="lg"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Navigation</span><h2>Navigation</h2><p>Add navigation in the card header for quick section switching.</p></div>
|
|
<span class="demo-case-number">09</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-9" class="demo-canvas demo-canvas--9">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card's content." actionLabel="Card link" actionHref="#card-demo" navigation="[{"label":"My Account","value":"account"},{"label":"Company","value":"company"},{"label":"Team Members","value":"team"}]" activeNav="account" size="md" color="primary" align="center"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Navigation usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
actionLabel="Card link"
|
|
actionHref="#card-demo"
|
|
navigation='[
|
|
{
|
|
"label": "My Account",
|
|
"value": "account"
|
|
},
|
|
{
|
|
"label": "Company",
|
|
"value": "company"
|
|
},
|
|
{
|
|
"label": "Team Members",
|
|
"value": "team"
|
|
}
|
|
]'
|
|
activeNav="account"
|
|
align="center"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Navigation</span><h2>Navigation with select on mobile</h2><p>Replace tabs with a select control when horizontal space is limited.</p></div>
|
|
<span class="demo-case-number">010</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-10" class="demo-canvas demo-canvas--10">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card's content." actionLabel="Card link" actionHref="#card-demo" navigation="[{"label":"My Account","value":"account"},{"label":"Company","value":"company"},{"label":"Team Members","value":"team"},{"label":"Billing","value":"billing"}]" activeNav="account" mobileNavigation="true" size="md" color="primary" align="center"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Navigation with select on mobile usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
actionLabel="Card link"
|
|
actionHref="#card-demo"
|
|
navigation='[
|
|
{
|
|
"label": "My Account",
|
|
"value": "account"
|
|
},
|
|
{
|
|
"label": "Company",
|
|
"value": "company"
|
|
},
|
|
{
|
|
"label": "Team Members",
|
|
"value": "team"
|
|
},
|
|
{
|
|
"label": "Billing",
|
|
"value": "billing"
|
|
}
|
|
]'
|
|
activeNav="account"
|
|
mobileNavigation="true"
|
|
align="center"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Images</span><h2>Top image</h2><p>Place an image at the top for a classic media-card layout.</p></div>
|
|
<span class="demo-case-number">011</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-11" class="demo-canvas demo-canvas--11">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card's content." footer="Last updated 5 mins ago" imageSrc="/card-landscape.svg" imageAlt="Abstract blue glass shapes" actionLabel="Card link" actionHref="#card-demo" size="md" color="primary"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Top image usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
footer="Last updated 5 mins ago"
|
|
imageSrc="/card-landscape.svg"
|
|
imageAlt="Abstract blue glass shapes"
|
|
actionLabel="Card link"
|
|
actionHref="#card-demo"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Images</span><h2>Bottom image</h2><p>Let content lead before media displayed at the bottom.</p></div>
|
|
<span class="demo-case-number">012</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-12" class="demo-canvas demo-canvas--12">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card's content." footer="Last updated 5 mins ago" imageSrc="/card-landscape.svg" imageAlt="Abstract blue glass shapes" imagePosition="bottom" actionLabel="Card link" actionHref="#card-demo" size="md" color="primary"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Bottom image usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
footer="Last updated 5 mins ago"
|
|
imageSrc="/card-landscape.svg"
|
|
imageAlt="Abstract blue glass shapes"
|
|
imagePosition="bottom"
|
|
actionLabel="Card link"
|
|
actionHref="#card-demo"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Images</span><h2>Image overlays</h2><p>Use the image as a background and layer card content on top.</p></div>
|
|
<span class="demo-case-number">013</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-13" class="demo-canvas demo-canvas--13">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card's content." footer="Last updated 5 mins ago" imageSrc="/card-landscape.svg" imageAlt="Abstract blue glass shapes" imagePosition="overlay" actionLabel="" actionHref="#card-demo" size="md" color="primary"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Image overlays usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
footer="Last updated 5 mins ago"
|
|
imageSrc="/card-landscape.svg"
|
|
imageAlt="Abstract blue glass shapes"
|
|
imagePosition="overlay"
|
|
actionHref="#card-demo"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Animations</span><h2>Image scaling animation on hover</h2><p>Scale card media on hover without changing the card layout.</p></div>
|
|
<span class="demo-case-number">014</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-14" class="demo-canvas demo-canvas--14">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card's content." imageSrc="/card-landscape.svg" imageAlt="Abstract blue glass shapes" actionLabel="" actionHref="#card-demo" size="md" color="primary" hover="image"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Image scaling animation on hover usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
imageSrc="/card-landscape.svg"
|
|
imageAlt="Abstract blue glass shapes"
|
|
actionHref="#card-demo"
|
|
hover="image"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Animations</span><h2>Transition on hover</h2><p>Animate elevation and position to strengthen the interactive surface.</p></div>
|
|
<span class="demo-case-number">015</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-15" class="demo-canvas demo-canvas--15">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card's content." imageSrc="/card-landscape.svg" imageAlt="Abstract blue glass shapes" actionLabel="" actionHref="#card-demo" size="md" color="primary" hover="raise"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Transition on hover usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
imageSrc="/card-landscape.svg"
|
|
imageAlt="Abstract blue glass shapes"
|
|
actionHref="#card-demo"
|
|
hover="raise"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Card layout</span><h2>Horizontal</h2><p>Place image and content side by side on larger screens.</p></div>
|
|
<span class="demo-case-number">016</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-16" class="demo-canvas demo-canvas--16">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card's content." footer="Last updated 5 mins ago" imageSrc="/card-landscape.svg" imageAlt="Abstract blue glass shapes" actionLabel="" actionHref="#card-demo" size="md" color="primary" layout="horizontal"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Horizontal usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
footer="Last updated 5 mins ago"
|
|
imageSrc="/card-landscape.svg"
|
|
imageAlt="Abstract blue glass shapes"
|
|
actionHref="#card-demo"
|
|
layout="horizontal"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Card layout</span><h2>Card group</h2><p>Render attached equal-height cards that stack responsively.</p></div>
|
|
<span class="demo-case-number">017</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-17" class="demo-canvas demo-canvas--17">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card's content." actionLabel="" actionHref="#card-demo" items="[{"imageSrc":"/card-landscape.svg","title":"Card title","description":"Some quick example text to build on the card title and make up the bulk of the card's content.","footer":"Updated 5 mins ago"},{"imageSrc":"/card-landscape.svg","title":"Card title","description":"This card has supporting text below as a natural lead-in.","footer":"Updated 5 mins ago"},{"imageSrc":"/card-landscape.svg","title":"Card title","description":"Some quick example text to build on the card title and make up the bulk of the card's content. This has even longer content to demonstrate equal height.","footer":"Updated 5 mins ago"}]" size="md" color="primary"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Card group usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
actionHref="#card-demo"
|
|
items='[
|
|
{
|
|
"imageSrc": "/card-landscape.svg",
|
|
"title": "Card title",
|
|
"description": "Some quick example text to build on the card title and make up the bulk of the card\'s content.",
|
|
"footer": "Updated 5 mins ago"
|
|
},
|
|
{
|
|
"imageSrc": "/card-landscape.svg",
|
|
"title": "Card title",
|
|
"description": "This card has supporting text below as a natural lead-in.",
|
|
"footer": "Updated 5 mins ago"
|
|
},
|
|
{
|
|
"imageSrc": "/card-landscape.svg",
|
|
"title": "Card title",
|
|
"description": "Some quick example text to build on the card title and make up the bulk of the card\'s content. This has even longer content to demonstrate equal height.",
|
|
"footer": "Updated 5 mins ago"
|
|
}
|
|
]'
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Panels</span><h2>Top bordered card</h2><p>Add a colored top border for stronger category or status emphasis.</p></div>
|
|
<span class="demo-case-number">018</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-18" class="demo-canvas demo-canvas--18">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card's content." actionLabel="Card link" actionHref="#card-demo" size="md" color="primary" variant="top-border"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Top bordered card usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
actionLabel="Card link"
|
|
actionHref="#card-demo"
|
|
variant="top-border"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Panels</span><h2>Card actions</h2><p>Place compact utility actions in a structured card header.</p></div>
|
|
<span class="demo-case-number">019</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-19" class="demo-canvas demo-canvas--19">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card's content." header="Card actions" actionLabel="Card link" actionHref="#card-demo" headerActions="[{"label":"Refresh","ariaLabel":"Refresh card","icon":"icon-[lucide--refresh-cw]"},{"label":"Expand","ariaLabel":"Expand card","icon":"icon-[lucide--maximize-2]"}]" size="md" color="primary" dismissible="true"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Card actions usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
header="Card actions"
|
|
actionLabel="Card link"
|
|
actionHref="#card-demo"
|
|
headerActions='[
|
|
{
|
|
"label": "Refresh",
|
|
"ariaLabel": "Refresh card",
|
|
"icon": "icon-[lucide--refresh-cw]"
|
|
},
|
|
{
|
|
"label": "Expand",
|
|
"ariaLabel": "Expand card",
|
|
"icon": "icon-[lucide--maximize-2]"
|
|
}
|
|
]'
|
|
dismissible="true"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Panels</span><h2>Card with alert</h2><p>Embed an alert inside a card to surface important feedback.</p></div>
|
|
<span class="demo-case-number">020</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-20" class="demo-canvas demo-canvas--20">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card's content." header="Featured" actionLabel="Card link" actionHref="#card-demo" alertTitle="Attention needed!" alertDescription="This is an alert box." size="md" color="primary"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Card with alert usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
header="Featured"
|
|
actionLabel="Card link"
|
|
actionHref="#card-demo"
|
|
alertTitle="Attention needed!"
|
|
alertDescription="This is an alert box."
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Panels</span><h2>Centered body content</h2><p>Center content for confirmation states and compact summaries.</p></div>
|
|
<span class="demo-case-number">021</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-21" class="demo-canvas demo-canvas--21">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card's content." actionLabel="Card link" actionHref="#card-demo" size="md" color="primary" align="center"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Centered body content usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
actionLabel="Card link"
|
|
actionHref="#card-demo"
|
|
align="center"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Panels</span><h2>Empty state</h2><p>Communicate that no data is available with an accessible empty state.</p></div>
|
|
<span class="demo-case-number">022</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-22" class="demo-canvas demo-canvas--22">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="" description="" actionLabel="" actionHref="#card-demo" empty="true" size="md" color="primary"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Empty state usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
actionHref="#card-demo"
|
|
empty="true"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
<article class="demo-case">
|
|
<header class="demo-case-header">
|
|
<div><span class="demo-case-eyebrow">Panels</span><h2>Scrollable body</h2><p>Contain long content inside a fixed-height scrolling card body.</p></div>
|
|
<span class="demo-case-number">023</span>
|
|
</header>
|
|
<div class="demo-workbench">
|
|
<div id="card-demo-23" class="demo-canvas demo-canvas--23">
|
|
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
|
<div class="demo-render"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content." actionLabel="" actionHref="#card-demo" size="md" color="primary" scrollable="true" maxHeight="16rem"></div></div>
|
|
</div>
|
|
<section class="demo-code" aria-label="Scrollable body usage">
|
|
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
|
<pre><code><Card
|
|
description="Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content."
|
|
actionHref="#card-demo"
|
|
scrollable="true"
|
|
maxHeight="16rem"
|
|
/></code></pre>
|
|
</section>
|
|
</div>
|
|
</article></div></section>
|
|
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@click</code><span>Fires when the component is activated by pointer or keyboard.</span></div><div><code>@action</code><span>Fires when the component's action is selected.</span></div><div><code>@navigate</code><span>Fires when the component emits the navigate event.</span></div><div><code>@dismiss</code><span>Fires when the component emits the dismiss event.</span></div><div><code>@load</code><span>Fires when component data or media finishes loading.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
|
|
|
|
component.addEventListener('click', (event) => {
|
|
console.log(event.detail)
|
|
})</code></pre></section></div></section>
|
|
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>title</code></td><td>string</td><td><code>"Card title"</code></td><td>No</td></tr><tr><td><code>subtitle</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>header</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>footer</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>imageSrc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>imageAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>imagePosition</code></td><td>string</td><td><code>"top"</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>headerActions</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>navigation</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>activeNav</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>mobileNavigation</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>alertTitle</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>alertDescription</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>empty</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>emptyTitle</code></td><td>string</td><td><code>"No data to show"</code></td><td>No</td></tr><tr><td><code>emptyIcon</code></td><td>string</td><td><code>"icon-[lucide--inbox]"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>layout</code></td><td>string</td><td><code>"vertical"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>hover</code></td><td>string</td><td><code>"none"</code></td><td>No</td></tr><tr><td><code>scrollable</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>maxHeight</code></td><td>string</td><td><code>"18rem"</code></td><td>No</td></tr><tr><td><code>dismissible</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
|
</main>
|
|
<aside class="detail-aside">
|
|
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><span class="detail-toc-group">Basic usage</span><a href="#card-demo-1">Default card</a><span class="detail-toc-group">Content</span><a href="#card-demo-2">Body</a><a href="#card-demo-3">Simple card</a><span class="detail-toc-group">Structure</span><a href="#card-demo-4">Header and footer</a><a href="#card-demo-5">Footer only</a><span class="detail-toc-group">Sizes</span><a href="#card-demo-6">Small</a><a href="#card-demo-7">Default</a><a href="#card-demo-8">Large</a><span class="detail-toc-group">Navigation</span><a href="#card-demo-9">Navigation</a><a href="#card-demo-10">Navigation with select on mobile</a><span class="detail-toc-group">Images</span><a href="#card-demo-11">Top image</a><a href="#card-demo-12">Bottom image</a><a href="#card-demo-13">Image overlays</a><span class="detail-toc-group">Animations</span><a href="#card-demo-14">Image scaling animation on hover</a><a href="#card-demo-15">Transition on hover</a><span class="detail-toc-group">Card layout</span><a href="#card-demo-16">Horizontal</a><a href="#card-demo-17">Card group</a><span class="detail-toc-group">Panels</span><a href="#card-demo-18">Top bordered card</a><a href="#card-demo-19">Card actions</a><a href="#card-demo-20">Card with alert</a><a href="#card-demo-21">Centered body content</a><a href="#card-demo-22">Empty state</a><a href="#card-demo-23">Scrollable body</a><a href="#events">Events</a><a href="#api">Props API</a></div>
|
|
</aside>
|
|
</div>
|
|
<nav class="detail-pagination">
|
|
<a href="/components/button-group"><small>Previous</small><strong>← Button Group</strong></a>
|
|
<a href="/components/carousel"><small>Next</small><strong>Carousel →</strong></a>
|
|
</nav>
|
|
}
|
|
}
|