A small heading-like element pairing a short rotated tick mark with a label and trailing hairline, used to open a section or group of content.
import SectionMark from "@/components/ui/section-mark";
export default function SectionMarkDemo() {
return (
<div
className="w-full max-w-xl mx-auto p-10"
style={{ background: "var(--surface-base)", color: "var(--ink-primary)" }}
>
<div className="flex flex-col gap-8">
<div>
<SectionMark label="Changelog" trailing="v2.4.0" />
<p className="mt-4 text-sm" style={{ color: "var(--ink-secondary)" }}>
Patch notes for this release: a new rail layout, three bug fixes,
and an updated focus ring on every control.
</p>
</div>
<div>
<SectionMark label={["Archive", "2024"]} tone="muted" />
<p className="mt-4 text-sm" style={{ color: "var(--ink-secondary)" }}>
Older entries, grouped by year.
</p>
</div>
<div>
<SectionMark as="heading" level={2} label="Team" />
<p className="mt-4 text-sm" style={{ color: "var(--ink-secondary)" }}>
People who shipped this release.
</p>
</div>
</div>
</div>
);
}