Section Card

Title and optional Pill count sit inside the Card. Trailing slots are byline (muted text), actions (toggles / filters — outside the detail hit area), and detail (href or onOpen with label + chevron). The detail control owns the header hit target via a stretched link; default labels are View all / Details. At size="sm", or when the header is narrower than 32rem, the detail label hides; the chevron stays. The header is a size container, so it adapts to the card's width rather than the screen's: switch views in actions with View Switch, which becomes a chip Select in a narrow card. Narrow headers keep one visible action. See Responsive Behaviour. layout="flush" drops the bottom inset for edge-to-edge tables. Parent sets size="sm" in a sidebar — no responsive size on the card. Children that bring their own surfaces compose without Section Card.

Variants

Specialized bodies and lists that compose with Section Card.

Usage

import { SectionCard, SectionCardSkeleton } from "@sophic/portal-ui";
import { CardContent } from "@sophic/portal-ui/components/ui/card";

<SectionCard title="Holdings" count={5} actions={<PriceYieldToggle />} layout="flush">
  {/* flush SlickDataTable */}
</SectionCard>

<SectionCard title="Recent activity" detail={{ href: "/activity" }} layout="flush">
  <CardContent className="px-0 py-0">{/* rows */}</CardContent>
</SectionCard>;

<SectionCardSkeleton title="About" />;

Use Item List for selectable body rows. Cash Card is a specialized Section Card with a fixed “Cash” title and cash breakdown body.

Props

SectionCardSkeletonProps

Changelog

• 6 October 2026 — The header is a size container. Below 32rem the detail label hides and View Switch collapses to a chip Select. Full notes
• 1 October 2026 — Dropped surface / SectionCardSurfaceProvider. Full notes
• 1 October 2026 — actions / detail / layout / size; dropped onClick, titleAccessory, wrapBody / flushBody, titleRowClassName, and sm-lg. Holdings and Recent activity use Section Card + flush table. Full notes
• 29 September 2026 — titleSize is md | sm | sm-lg (Holdings / Cash / responsive Cash). Legacy small / small-lg still work. Full notes
• 28 September 2026 — Optional byline sits at the top right of the heading. Full notes
• 23 September 2026 — Cash and Performance titles are heading-md below lg (stacked under the chart) and text-base from lg up (titleSize="sm-lg"). Full notes
• 23 September 2026 — Title and body sit on the shared card inset (20px), matching chart cards. Full notes
• 18 September 2026 — Interactive More is title-only: hover the title to slide the label in from the chevron; only that row opens. Full notes
• 17 September 2026 — Title-inside inset is 16px on every side. flushBody drops the bottom pad for edge-to-edge tables. Full notes
• 17 September 2026 — Interactive cards are clickable as a whole. Hover shows More (not View More); More and the chevron lighten, the title stays the same colour. Full notes
• 8 September 2026 — Default title is heading Medium 18/24 (md). titleSize="sm" is text base Medium 15/22 (Cash, Asset allocation). Full notes
• 8 September 2026 — Default title row sits inside the Card. wrapBody={false} still titles above nested surfaces. Full notes
• 12 August 2026 — Interactive cards show View More left of the chevron on fine-pointer hover (title or body). Full notes
• 10 August 2026 — Product hairline only; frame / SolidCardRim / Section card rim experiment removed. Full notes
• 4 August 2026 — titleAccessory and temporary rim frame APIs (later removed). Full notes
• 3 August 2026 — SectionCardSkeleton for generic non-list loading. Full notes
• 24 July 2026 — Variant tiles link related product cards from Card / Section Card docs. Full notes
• 24 July 2026 — Promoted from Blocks into Components. Full notes