SectionCard

A 2nd-order composition of Card + Separator. Unlike ChartCard, SectionCard uses separators between header, content, and footer sections — ideal for settings pages and profile sections.

Data Displaycardsectionsettingsformprofile

Settings section

import { SectionCard } from '@primstack/ui/section-card'

<SectionCard
  title="Profile"
  description="Update your personal information"
  footer={<Button>Save</Button>}
>
  <Input label="Name" />
</SectionCard>

Settings section

import { SectionCard } from '@primstack/ui'

<SectionCard title="Notifications" description="Configure how you receive alerts">
  <Switch /> Email notifications
</SectionCard>

Related Components