DetailHeader

App

Detay/kayıt sayfaları için sayfa başlığı. title, subtitle, status badge, aksiyon butonları ve opsiyonel sekme navigasyonu.

With actions, no tabs

Preview

Invoice #1042

PAID

Created 3 days ago · Due Jan 15, 2026

Code

<%- include('modules/app/DetailHeader', {
  title:         'Invoice #1042',
  subtitle:      'Created 3 days ago · Due Jan 15, 2026',
  status:        'PAID',
  statusVariant: 'success',
  actionsContent: `
    <%- include('modules/ui/Button', { variant: 'outline', iconLeft: '', children: 'Edit' }) %>
    <%- include('modules/ui/Button', { variant: 'danger',  iconLeft: '',  children: 'Delete' }) %>
  `
}) %>

With tabs

Preview

Project Alpha

ACTIVE

Started Jan 2026 · 5 members

Code

<%- include('modules/app/DetailHeader', {
  title:    'Project Alpha',
  subtitle: 'Started Jan 2026 · 5 members',
  status:   'ACTIVE',
  statusVariant: 'success',
  tabs: [
    { value: 'overview', label: 'Overview' },
    { value: 'tasks',    label: 'Tasks'    },
    { value: 'members',  label: 'Members'  },
    { value: 'settings', label: 'Settings' },
  ],
  activeTab: req.query.tab || 'overview',
  actionsContent: `<%- include('modules/ui/Button', { variant: 'outline', iconLeft: '', children: 'Settings' }) %>`
}) %>

Source modules/app/DetailHeader.ejs

<%
  var _id            = locals.id || ('dh-' + Math.random().toString(36).substr(2,6));
  var _statusVariant = locals.statusVariant || 'neutral';
  var _tabs          = locals.tabs || [];
  var _activeTab     = locals.activeTab || (_tabs.length ? _tabs[0].value : '');
  var variantBadge = {
    success: 'bg-success-subtle text-success-fg',
    error:   'bg-error-subtle text-error-fg',
    warning: 'bg-warning-subtle text-warning-fg',
    info:    'bg-info-subtle text-info-fg',
    neutral: 'bg-surface-sunken text-text-secondary',
    primary: 'bg-primary-subtle text-primary'
  };
  var _badgeCls = variantBadge[_statusVariant] || variantBadge.neutral;
%>

  
    
      
        
          <%= locals.title %>
          <% if (locals.status) { %>
          <%= locals.status %>
          <% } %>
          <% if (locals.badgeContent) { %><%- locals.badgeContent %><% } %>
        
        <% if (locals.subtitle) { %><%= locals.subtitle %><% } %>
      
      <% if (locals.actionsContent) { %>
      <%- locals.actionsContent %>
      <% } %>
    

    <% if (_tabs.length) { %>
    
      <% _tabs.forEach(function(tab) {
        var isActive = tab.value === _activeTab;
      %>
      
      <% }); %>
    
    <% } %>
  

<% if (_tabs.length) { %>

<% } %>