SectionCard

App

Titled content card with rounded-xl + border + bg-surface-raised + p-6. Header is separated by an underline; children slot accepts arbitrary content.

Basic — title + content

Preview

Account details

Name: Jane Doe

Email: jane@acme.com

Role: Administrator

Code
<%- include('modules/app/SectionCard', {
  title: 'Account details',
  children: `
    

Name: <%= user.name %>

Email: <%= user.email %>

Role: <%= user.role %>

` }) %>

Form section

Preview

Notification preferences

Code
<%- include('modules/app/SectionCard', {
  title: 'Notification preferences',
  children: `
    
<%- include('modules/ui/Toggle', { label: 'Email updates', checked: prefs.email }) %> <%- include('modules/ui/Toggle', { label: 'Push notifications', checked: prefs.push }) %> <%- include('modules/ui/Toggle', { label: 'Weekly digest', checked: prefs.weekly }) %>
` }) %>
Source modules/app/SectionCard.ejs