Card
OrganismContent container with raised / flat / outline variants. Supports title, subtitle, headerRight, footer slots and loading skeleton state.
Card title
Optional subtitle
Card body content goes here. You can put any HTML inside.
<%- include('modules/ui/Card', {
title: 'Card title',
subtitle: 'Optional subtitle',
children: 'Card body content goes here.
',
footer: '...'
}) %>Flat card
No shadow, transparent background.
<%- include('modules/ui/Card', {
title: 'Flat card',
variant: 'flat',
children: 'No shadow, transparent background.
'
}) %>Outline card
Border only, no background fill.
<%- include('modules/ui/Card', {
title: 'Outline card',
variant: 'outline',
children: 'Border only, no background fill.
'
}) %>Hoverable card
Hover to see the shadow lift effect.
<%- include('modules/ui/Card', {
title: 'Hoverable card',
hoverable: true,
children: 'Hover to see the shadow lift effect.
'
}) %><%- include('modules/ui/Card', { loading: true }) %>Recent activity
Last 7 days
Live
Activity feed content here.
<%- include('modules/ui/Card', {
title: 'Recent activity',
subtitle: 'Last 7 days',
headerRight: 'Live',
children: 'Activity feed content here.
'
}) %><%
var _title = locals.title || '';
var _subtitle = locals.subtitle || '';
var _headerRight = locals.headerRight || '';
var _footer = locals.footer || '';
var _v = locals.variant || 'raised';
var _hoverable = !!locals.hoverable;
var _loading = !!locals.loading;
var _className = locals.className || '';
var _onClick = locals.onClick || '';
var _isInteractive = !!locals.isInteractive || !!_onClick;
var _as = locals.as || (_isInteractive ? 'button' : 'div');
var _isButton = _as === 'button';
// Hoverable auto-enables when interactive
var hoverable = _hoverable || _isInteractive;
var vc = {
raised: 'bg-surface-raised shadow-sm',
flat: 'bg-surface-base',
outline: 'bg-transparent',
}[_v] || 'bg-surface-raised shadow-sm';
var hoverClass = hoverable
? 'transition-shadow hover:shadow-md hover:border-border-focus cursor-pointer'
: '';
var interactiveClass = _isInteractive
? 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus w-full'
: '';
var loadingClass = _loading ? 'pointer-events-none' : '';
%>
<<%= _as %>
class="rounded-xl border border-border overflow-hidden text-left <%= vc %> <%= hoverClass %> <%= interactiveClass %> <%= loadingClass %><%= _className ? ' ' + _className : '' %>"
<% if (_isButton) { %>type="button"<% } %>
<% if (_onClick) { %>onclick="<%= _onClick %>"<% } %>
>
<% if (_loading) { %>
<% } else { %>
<% if (_title || _headerRight) { %>
<% if (_title) { %><%= _title %>
<% } %>
<% if (_subtitle) { %><%= _subtitle %>
<% } %>
<% if (_headerRight) { %><%- _headerRight %><% } %>
<% } %>
<% if (locals.children) { %>
<%- locals.children %>
<% } %>
<% if (_footer) { %>
<%- _footer %>
<% } %>
<% } %>
>