Heading

Section and page titles. Uses the heading steps from Typography — Medium weight. Four levels:

• xl (24px): page title.
• lg (20px): drawer title.
• md (17px): big section card title, such as Holdings or Performance. Default.
• sm (15px): small section card title, such as Returns or Valuation.

Place a heading above a Card when the section title is outside the surface, or inside the card for subsection labels.

Usage

import { Heading } from "@sophic/portal-ui";
import { Card } from "@sophic/portal-ui/components/ui/card";

<Heading>Details</Heading>
<Card>{/* body */}</Card>

<Card>
  <Heading>Your holding</Heading>
  {/* rows */}
</Card>

Props

Changelog

• 29 September 2026 — Added sm (Cash / Section Card compact) beside md / lg. Full notes
• 29 September 2026 — Added (md / lg; default md). Full notes