Card

Organism

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

Default (raised)

Card title

Optional subtitle

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

Flat

Flat card

No shadow, transparent background.

Outline

Outline card

Border only, no background fill.

Hoverable

Hoverable card

Hover to see the shadow lift effect.

Loading skeleton

With headerRight

Recent activity

Last 7 days

Live

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 %>
    <% } %>
  <% } %>