lightview
Version:
A reactive UI library with features of Bau, Juris, and HTMX plus safe LLM UI generation
561 lines (525 loc) • 28.4 kB
HTML
<!-- SEO-friendly SPA Shim -->
<script src="/lightview-router.js"></script>
<script>
if (globalThis.LightviewRouter) {
LightviewRouter.base('/index.html');
}
</script>
<!-- Load the page-specific stylesheet -->
<link rel="stylesheet" href="./index.css">
<!-- Gallery Structure -->
<div class="gallery-page">
<div class="gallery-layout">
<!-- Sidebar Overlay -->
<div id="sidebar-overlay" class="sidebar-overlay"></div>
<!-- Sidebar -->
<div id="gallery-sidebar" class="gallery-sidebar" style="visibility: hidden" src="./component-nav.html"></div>
<!-- Main Content -->
<div id="gallery-main" class="gallery-main">
<!-- Header Container -->
<div
style="position: sticky; top: 0; z-index: 30; background: var(--gallery-surface); border-bottom: 1px solid var(--gallery-border); backdrop-filter: blur(8px);">
<!-- Breadcrumbs Row -->
<div style="padding: 0.75rem 1.5rem 0;">
<script>
(() => {
const { Breadcrumbs } = Lightview.tags;
const breadcrumbs = Breadcrumbs({
id: 'page-breadcrumbs',
items: [
{ label: 'Components', href: '/docs/components' },
{ label: 'Card' }
]
});
document.currentScript.replaceWith(breadcrumbs.domEl);
})();
</script>
</div>
<!-- Title Row -->
<div class="gallery-header"
style="border-bottom: none; height: auto; padding-top: 0.5rem; padding-bottom: 0.75rem;">
<button id="toggle-btn" class="toggle-btn" aria-label="Toggle Sidebar">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="toggle-icon"
style="stroke: currentColor; stroke-width: 2;">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
<path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7" />
</svg>
</button>
<h1 class="gallery-title">Card</h1>
</div>
</div>
<!-- Content -->
<div class="gallery-content">
<div class="section-content" style="max-width: 1000px;">
<p class="text-lg" style="opacity: 0.7; margin-bottom: 1.5rem;">
Cards are used to group and display content in a way that is easily readable.
Supports images, actions, and multiple layout variants.
</p>
<!-- Basic Usage -->
<div class="card bg-base-200" style="margin-bottom: 2rem;">
<div class="card-body">
<h2 class="card-title">Basic Usage</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Card with image, title, and
action button.
</p>
<!-- Tabs -->
<script>
globalThis.switchSyntaxTab = (tabId) => {
const tabs = ['tagged', 'vdom', 'object'];
tabs.forEach(t => {
const tabEl = document.getElementById(`tab-btn-${t}`);
const contentEl = document.getElementById(`syntax-${t}`);
if (t === tabId) {
tabEl.classList.add('syntax-tab-active');
contentEl.style.display = 'block';
} else {
tabEl.classList.remove('syntax-tab-active');
contentEl.style.display = 'none';
}
});
};
</script>
<div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
<button id="tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
onclick="switchSyntaxTab('tagged')">Tagged</button>
<button id="tab-btn-vdom" role="tab" class="syntax-tab"
onclick="switchSyntaxTab('vdom')">vDOM</button>
<button id="tab-btn-object" role="tab" class="syntax-tab"
onclick="switchSyntaxTab('object')">Object
DOM</button>
</div>
<!-- Tagged Syntax -->
<div id="syntax-tagged">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 340,
autoRun: true
});
</script><code contenteditable="true">await import('/components/data-display/card.js');
await import('/components/actions/button.js');
const { tags, $ } = Lightview;
const { p, Card, Button } = tags;
const card = Card({ style: 'width: 18rem;' },
Card.Figure({
src: 'https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?w=400&h=200&fit=crop',
alt: 'Shoes'
}),
Card.Body({},
Card.Title({}, 'Nike Air Max'),
p({}, 'Premium comfort meets modern style.'),
Card.Actions({ justify: 'end' },
Button({ color: 'primary' }, 'Buy Now')
)
)
);
$('#example').content(card);</code></pre>
</div>
<!-- vDOM Syntax -->
<div id="syntax-vdom" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 340
});
</script><code contenteditable="true">await import('/components/data-display/card.js');
await import('/components/actions/button.js');
const { $, tags } = Lightview;
const { Card, Button, p } = tags;
const card = {
tag: Card,
attributes: { style: 'width: 18rem;' },
children: [
{
tag: Card.Figure,
attributes: {
src: 'https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?w=400&h=200&fit=crop',
alt: 'Shoes'
}
},
{
tag: Card.Body,
children: [
{ tag: Card.Title, children: ['Nike Air Max'] },
{ tag: p, children: ['Premium comfort meets modern style.'] },
{
tag: Card.Actions,
attributes: { justify: 'end' },
children: [
{ tag: Button, attributes: { color: 'primary' }, children: ['Buy Now'] }
]
}
]
}
]
};
$('#example').content(card);</code></pre>
</div>
<!-- Object DOM Syntax -->
<div id="syntax-object" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 340
});
</script><code contenteditable="true">await import('/components/data-display/card.js');
await import('/components/actions/button.js');
const { $ } = Lightview;
const card = {
Card: {
style: 'width: 18rem;',
children: [
{
'Card.Figure': {
src: 'https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?w=400&h=200&fit=crop',
alt: 'Shoes'
}
},
{
'Card.Body': {
children: [
{ 'Card.Title': { children: ['Nike Air Max'] } },
{ p: { children: ['Premium comfort meets modern style.'] } },
{
'Card.Actions': {
justify: 'end',
children: [
{ Button: { color: 'primary', children: ['Buy Now'] } }
]
}
}
]
}
}
]
}
};
$('#example').content(card);</code></pre>
</div>
</div>
</div>
<!-- Reactive Example -->
<div class="card bg-base-200" style="margin-bottom: 2rem;">
<div class="card-body">
<h2 class="card-title">Product Card with Cart</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Interactive card with add to
cart
functionality.</p>
<!-- Tabs -->
<script>
globalThis.switchReactiveSyntaxTab = (tabId) => {
const tabs = ['tagged', 'vdom', 'object'];
tabs.forEach(t => {
const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
const contentEl = document.getElementById(`reactive-syntax-${t}`);
if (t === tabId) {
tabEl.classList.add('syntax-tab-active');
contentEl.style.display = 'block';
} else {
tabEl.classList.remove('syntax-tab-active');
contentEl.style.display = 'none';
}
});
};
</script>
<div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
<button id="reactive-tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
onclick="switchReactiveSyntaxTab('tagged')">Tagged</button>
<button id="reactive-tab-btn-vdom" role="tab" class="syntax-tab"
onclick="switchReactiveSyntaxTab('vdom')">vDOM</button>
<button id="reactive-tab-btn-object" role="tab" class="syntax-tab"
onclick="switchReactiveSyntaxTab('object')">Object DOM</button>
</div>
<!-- Tagged Syntax -->
<div id="reactive-syntax-tagged">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 380
});
</script><code contenteditable="true">await import('/components/data-display/card.js');
await import('/components/actions/button.js');
await import('/components/data-display/badge.js');
const { signal, tags, $ } = Lightview;
const { p, span, div, Card, Button, Badge } = tags;
const inCart = signal(false);
const card = Card({ style: 'width: 18rem;' },
Card.Figure({
src: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=200&fit=crop',
alt: 'Watch'
}),
Card.Body({},
div({ style: 'display: flex; justify-content: space-between; align-items: start;' },
Card.Title({}, 'Smart Watch'),
Badge({ color: 'success' }, 'New')
),
p({ style: 'font-size: 0.875rem; opacity: 0.7;' }, 'Track your fitness goals with precision.'),
div({ style: 'font-size: 1.25rem; font-weight: 700;' }, '$299'),
Card.Actions({ justify: 'end' },
() => inCart.value
? Button({ color: 'success', onclick: () => { inCart.value = false; } }, '✓ In Cart')
: Button({ color: 'primary', onclick: () => { inCart.value = true; } }, 'Add to Cart')
)
)
);
$('#example').content(card);</code></pre>
</div>
<!-- vDOM Syntax -->
<div id="reactive-syntax-vdom" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 380
});
</script><code contenteditable="true">await import('/components/data-display/card.js');
await import('/components/actions/button.js');
await import('/components/data-display/badge.js');
const { signal, $, tags } = Lightview;
const { Card, Button, Badge, div, p } = tags;
const inCart = signal(false);
const card = {
tag: Card,
attributes: { style: 'width: 18rem;' },
children: [
{
tag: Card.Figure,
attributes: {
src: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=200&fit=crop',
alt: 'Watch'
}
},
{
tag: Card.Body,
children: [
{
tag: div,
attributes: { style: 'display: flex; justify-content: space-between; align-items: start;' },
children: [
{ tag: Card.Title, children: ['Smart Watch'] },
{ tag: Badge, attributes: { color: 'success' }, children: ['New'] }
]
},
{ tag: p, attributes: { style: 'font-size: 0.875rem; opacity: 0.7;' }, children: ['Track your fitness goals with precision.'] },
{ tag: div, attributes: { style: 'font-size: 1.25rem; font-weight: 700;' }, children: ['$299'] },
{
tag: Card.Actions,
attributes: { justify: 'end' },
children: [
() => inCart.value
? { tag: Button, attributes: { color: 'success', onclick: () => { inCart.value = false; } }, children: ['✓ In Cart'] }
: { tag: Button, attributes: { color: 'primary', onclick: () => { inCart.value = true; } }, children: ['Add to Cart'] }
]
}
]
}
]
};
$('#example').content(card);</code></pre>
</div>
<!-- Object DOM Syntax -->
<div id="reactive-syntax-object" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 380
});
</script><code contenteditable="true">await import('/components/data-display/card.js');
await import('/components/actions/button.js');
await import('/components/data-display/badge.js');
const { signal, $ } = Lightview;
const inCart = signal(false);
const card = {
Card: {
style: 'width: 18rem;',
children: [
{
'Card.Figure': {
src: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=200&fit=crop',
alt: 'Watch'
}
},
{
'Card.Body': {
children: [
{
div: {
style: 'display: flex; justify-content: space-between; align-items: start;',
children: [
{ 'Card.Title': { children: ['Smart Watch'] } },
{ Badge: { color: 'success', children: ['New'] } }
]
}
},
{ p: { style: 'font-size: 0.875rem; opacity: 0.7;', children: ['Track your fitness goals with precision.'] } },
{ div: { style: 'font-size: 1.25rem; font-weight: 700;', children: ['$299'] } },
{
'Card.Actions': {
justify: 'end',
children: [
() => inCart.value
? { Button: { color: 'success', onclick: () => { inCart.value = false; }, children: ['✓ In Cart'] } }
: { Button: { color: 'primary', onclick: () => { inCart.value = true; }, children: ['Add to Cart'] } }
]
}
}
]
}
}
]
}
};
$('#example').content(card);</code></pre>
</div>
</div>
</div>
<!-- Props Table -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Props</h2>
<div style="overflow-x: auto; margin-bottom: 2rem;">
<table class="table table-zebra">
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>variant</code></td>
<td>string</td>
<td>-</td>
<td>'bordered' | 'dash' | 'side' | 'compact'</td>
</tr>
<tr>
<td><code>imageFull</code></td>
<td>boolean</td>
<td>false</td>
<td>Image fills the entire card width with overlay text</td>
</tr>
<tr>
<td><code>bg</code></td>
<td>string</td>
<td>'bg-base-100'</td>
<td>Background color class</td>
</tr>
<tr>
<td><code>shadow</code></td>
<td>string</td>
<td>'shadow-sm'</td>
<td>Shadow class (shadow-sm, shadow-md, shadow-xl)</td>
</tr>
</tbody>
</table>
</div>
<!-- Sub-components -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Sub-components</h2>
<div style="overflow-x: auto; margin-bottom: 2rem;">
<table class="table table-zebra">
<thead>
<tr>
<th>Component</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Card.Body</code></td>
<td>Content container with padding</td>
</tr>
<tr>
<td><code>Card.Title</code></td>
<td>Card heading (h2)</td>
</tr>
<tr>
<td><code>Card.Actions</code></td>
<td>Container for action buttons (props: justify)</td>
</tr>
<tr>
<td><code>Card.Figure</code></td>
<td>Image container (props: src, alt)</td>
</tr>
</tbody>
</table>
</div>
<!-- Variants -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Variants</h2>
<div
style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem;">
<div class="card card-bordered" style="background-color: oklch(var(--b1));">
<div class="card-body">
<h2 class="card-title">Bordered</h2>
<p>Card with a border instead of shadow.</p>
</div>
</div>
<div class="card card-dash" style="background-color: oklch(var(--b1));">
<div class="card-body">
<h2 class="card-title">Dash</h2>
<p>Card with a dashed border.</p>
</div>
</div>
</div>
<!-- Side Card -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Side Layout</h2>
<div class="card card-side"
style="background-color: oklch(var(--b1)); box-shadow: var(--shadow-sm); margin-bottom: 2rem;">
<figure><img
src="https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?w=200&h=200&fit=crop"
alt="Album" /></figure>
<div class="card-body">
<h2 class="card-title">Horizontal Card</h2>
<p>Image on the side with content next to it.</p>
<div class="card-actions" style="justify-content: flex-end;">
<button class="btn btn-primary">Listen</button>
</div>
</div>
</div>
<!-- Compact -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Compact</h2>
<div class="card card-compact"
style="background-color: oklch(var(--b1)); box-shadow: var(--shadow-sm); width: 16rem; margin-bottom: 2rem;">
<figure><img
src="https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?w=300&h=150&fit=crop"
alt="Shoes" /></figure>
<div class="card-body">
<h2 class="card-title">Compact Card</h2>
<p>Less padding for a tighter layout.</p>
</div>
</div>
<!-- Image Overlay -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Image Overlay</h2>
<div class="card image-full"
style="box-shadow: var(--shadow-xl); width: 24rem; margin-bottom: 2rem;">
<figure><img
src="https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?w=500&h=300&fit=crop"
alt="Shoes" /></figure>
<div class="card-body">
<h2 class="card-title">Text Over Image</h2>
<p>Content overlay on top of the image.</p>
<div class="card-actions" style="justify-content: flex-end;">
<button class="btn btn-primary">Shop Now</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>