Section

Groups related content under a title with optional subtitle and action slot.

Preview · Section

Code

HTML · @primus/ui-core

<div class="vstack" style="max-width:480px;width:100%">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem">
    <div>
      <h3 style="margin:0;font-size:0.975rem">Notification Settings</h3>
      <p style="margin:0;font-size:0.8rem;color:var(--muted-foreground)">Control how you receive alerts.</p>
    </div>
    <button class="outline small">Edit</button>
  </div>
  <hr style="border:none;border-top:1px solid var(--border);margin:0" />
</div>

React

import { PrimusSection } from 'primus-react-ui';

<PrimusSection title="Notification Settings" subtitle="Control how you receive alerts.">
  {/* section content */}
</PrimusSection>

Angular

<primus-section title="Notification Settings" subtitle="Control how you receive alerts.">
  <button section-actions class="outline small">Edit</button>
</primus-section>

Props

Prop	Type	Default	Description
title	string	—	Section title
subtitle	string	—	Supporting text

Version history

See the Changelog for version history and breaking changes.