Card

Organism

İçerik kartı. raised/flat/outline varyantları; title, subtitle, headerRight, footer ve loading skeleton desteği.

Default (raised)

Preview

Card title

Optional subtitle

Card body content goes here. You can put any HTML inside.

Code

<%- include('modules/ui/Card', {
  title: 'Card title',
  subtitle: 'Optional subtitle',
  children: 'Card body content goes here.',
  footer: '...'
}) %>

Flat

Preview

Flat card

No shadow, transparent background.

Code

<%- include('modules/ui/Card', {
  title: 'Flat card',
  variant: 'flat',
  children: 'No shadow, transparent background.'
}) %>

Outline

Preview

Outline card

Border only, no background fill.

Code

<%- include('modules/ui/Card', {
  title: 'Outline card',
  variant: 'outline',
  children: 'Border only, no background fill.'
}) %>

Hoverable

Preview

Hoverable card

Hover to see the shadow lift effect.

Code

<%- include('modules/ui/Card', {
  title: 'Hoverable card',
  hoverable: true,
  children: 'Hover to see the shadow lift effect.'
}) %>

Loading skeleton

Preview

Code

<%- include('modules/ui/Card', { loading: true }) %>

With headerRight

Preview

Recent activity

Last 7 days

Live

Activity feed content here.

Code

<%- include('modules/ui/Card', {
  title: 'Recent activity',
  subtitle: 'Last 7 days',
  headerRight: 'Live',
  children: 'Activity feed content here.'
}) %>

Source modules/ui/Card.ejs

<%
  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 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'
    : '';
%>

  <% if (_loading) { %>
  
    
    
    
    
  
  <% } else { %>
    <% if (_title || _headerRight) { %>
    
      
        <% if (_title) { %><%= _title %><% } %>
        <% if (_subtitle) { %><%= _subtitle %><% } %>
      
      <% if (_headerRight) { %><%- _headerRight %><% } %>
    
    <% } %>
    <% if (locals.children) { %>
    <%- locals.children %>
    <% } %>
    <% if (_footer) { %>
    <%- _footer %>
    <% } %>
  <% } %>