CogniSyncHeading + Subtitle
A two-line text component that combines a title (heading) with a subtitle (supporting text). Used across cards, modals, and section headers to clearly define actions or content blocks.
Seven sizes
Title and subtitle type scale together so the pair always reads as one block. Use 2xs–sm inline, md–lg on cards and dialogs, xl–2xl for hero pages.
Size · 2xs
13/12. Dense table headers and list rows.
Retention of financial documents
Applies to contracts that include a retention clause. Archive for seven years minimum.
Size · xs
14/13. Menu items, compact cards.
Retention of financial documents
Applies to contracts that include a retention clause. Archive for seven years minimum.
Size · sm
16/14. Sidebar sections, inline labels.
Retention of financial documents
Applies to contracts that include a retention clause. Archive for seven years minimum.
Size · md
20/15. Default. Section headers, form groups.
Retention of financial documents
Applies to contracts that include a retention clause. Archive for seven years minimum.
Size · lg
24/16. Card titles, dialog headers.
Retention of financial documents
Applies to contracts that include a retention clause. Archive for seven years minimum.
Size · xl
32/18. Major section headers, empty states.
Retention of financial documents
Applies to contracts that include a retention clause. Archive for seven years minimum.
Size · 2xl
48/20. Page hero titles, onboarding.
Retention of financial documents
Applies to contracts that include a retention clause. Archive for seven years minimum.
Left, center, right
Alignment follows the context. Left for forms and cards, center for hero and empty states, right for aside panels with right-aligned actions.
Left aligned
Require AI review
Runs every new rule through CogniSync AI before publishing.
Center aligned
Require AI review
Runs every new rule through CogniSync AI before publishing.
Right aligned
Require AI review
Runs every new rule through CogniSync AI before publishing.
Meta-label with a Badge
The eyebrow renders as an outline neutral Badge so meta-labels never compete with the heading's weight or color.
Access & permissions
Choose who can view, comment on, and edit this rule.
Access & permissions
Choose who can view, comment on, and edit this rule.
Rich text editor
Write, format, and preview compliance content with a consistent toolbar.
Smart retention rules
Let CogniSync AI suggest archive windows based on document type, jurisdiction, and risk score.
Real-world uses
The pair shows up almost everywhere that isn't body text. Here are some of the most common placements.
General preferences
Language, time zone, and display options for this workspace.
No rules yet
Create your first rule to let CogniSync AI watch for matching documents.
Delete this rule?
This action can't be undone. Archived documents will no longer be monitored.
Rules that keep up
CogniSync turns your policies into live, auditable rules that scan every document you touch.
Anatomy
A Heading + Subtitle is made of up to three parts.
Eyebrow
Optional short meta-label. Rendered as an outline neutral Badge (pill shape) so it reads as a tag, not as a tiny heading.
Title
Geist SemiBold. Size determined by the `size` prop. Uses #101828 for strong on-surface contrast.
Subtitle
Supporting sentence in #475467. Constrain with `subtitleMaxWidth` for long paragraphs so line lengths stay readable.
Do & Don't
Do
- Pair sizes from the same scale — e.g. `md` on one card, `md` on every card.
- Use eyebrows for section meta-labels like Controls, Variants, Usage, New.
- Constrain subtitle width with `subtitleMaxWidth` on wide hero layouts.
- Pick `align='center'` for empty states and hero sections — everything else stays `left`.
Don't
- Don't write long eyebrows — 1–3 words keeps them scannable.
- Don't mix alignments inside one card or panel.
- Don't use `2xl` inside a card or dialog — that's reserved for page heroes.
- Don't use this component to render body paragraphs — use a plain `<p>` for long copy.