Density

Heading

Heading groups a title, optional subtitle, and optional start and end content for sections and chart headers.

Weekly visitors
Compared with the previous seven days
import { Heading, View } from "density-base-ui";

export default function HeadingExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <Heading
        title="Weekly visitors"
        subtitle="Compared with the previous seven days"
      />
    </View>
  );
}

Slots

Use the start and end slots for compact context or actions without changing the heading layout.

Weekly visitors
Compared with the previous seven days
import { Button, Heading, View } from "density-base-ui";
import { ChartLine } from "lucide-react";

export default function HeadingSlotsExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <Heading
        title="Weekly visitors"
        subtitle="Compared with the previous seven days"
        childrenStart={<ChartLine aria-hidden="true" size={16} />}
        childrenEnd={<Button>View report</Button>}
      />
    </View>
  );
}

Size

Heading fills its available width. Use size to set the heading and supporting-text scale.

2xs
Smallest heading
xs
Extra-small heading
sm
Small heading
md
Medium heading
lg
Large heading
xl
Extra-large heading
2xl
2xl heading
3xl
3xl heading
import { Heading, View } from "density-base-ui";

export default function HeadingSizeExample() {
  return (
    <View
      layout="grid"
      padding={false}
      style={{ gap: "var(--dn-size-current-gap)", width: "100%" }}
    >
      <Heading size="2xs" title="2xs" subtitle="Smallest heading" />
      <Heading size="xs" title="xs" subtitle="Extra-small heading" />
      <Heading size="sm" title="sm" subtitle="Small heading" />
      <Heading size="md" title="md" subtitle="Medium heading" />
      <Heading size="lg" title="lg" subtitle="Large heading" />
      <Heading size="xl" title="xl" subtitle="Extra-large heading" />
      <Heading size="2xl" title="2xl" subtitle="2xl heading" />
      <Heading size="3xl" title="3xl" subtitle="3xl heading" />
    </View>
  );
}

Padding