Text Group
Overview
TextGroup pairs a caption, heading, and subline into the typographic shape used inside hero banners, page heroes, section headers, and content cards. Semantic tags for each line are configurable via captionTag, headingTag, and sublineTag so the same visual composition can render as <h1>-led on a page hero and <h3>-led inside a card without rewriting markup.
For one-off campaign treatments, the captionColor, headingColor, sublineColor, and iconColor props accept any CSS color string and inline it onto the matching element, so a single hero can repaint a heading or caption without touching tokens.
Key Business & UX Benefits
- One composition covers hero, page header, section header, and card text, so editorial hierarchy stays consistent without bespoke layout per surface.
- Configurable semantic tags keep the SEO outline correct: hero stays
<h1>-led, cards stay<h3>-led, without rewriting visual markup. - Per-line color override props give marketing a precise repaint hook for seasonal banners without touching theme tokens.
Usage
<TextGroup
caption="Featured"
heading="New collection"
heading-tag="h2"
subline="Spring/Summer drop"
size="l"
/>
Feature List
- Three configurable semantic tags (`captionTag`, `headingTag`, `sublineTag`) keep the SEO outline correct as the same composition moves between hero and card
- Global `size` tier maps to canonical per-element Text sizes; per-line overrides (`captionSize`, `headingSize`, `sublineSize`) fine-tune density
- `align` controls horizontal alignment of all three lines together, so left-rail and centered hero patterns share one prop
- Optional `icon` plus `iconSize` and `iconColor` overrides render an icon above the caption for status-led intros
- Freeform `captionColor`, `headingColor`, and `sublineColor` props accept any CSS color string and inline it per line for one-off campaign treatments
- `gap` prop ('xs', 's', 'sm', 'm', 'l') tunes vertical rhythm between the caption, heading, and subline
API Reference
| Prop | Default | Type |
|---|---|---|
icon | stringOptional icon rendered above the caption/heading (e.g. | |
iconSize | m | TextGroupIconSize ("s" | "m" | "l" | "sm")Icon size — maps to the Icon component's size scale. |
iconColor | stringFreeform color override for the icon (CSS color string). | |
caption | stringCaption (eyebrow) — rendered above the heading. | |
heading | stringMain heading text. | |
subline | stringSubline — rendered below the heading. | |
captionTag | span | TextGroupCaptionTag ("div" | "p" | "span")Semantic tag for the caption. |
headingTag | h2 | TextGroupHeadingTag ("div" | "h1" | "h2" | "h3" | "h4" | 3 more)Semantic tag for the heading. |
sublineTag | p | TextGroupSublineTag ("div" | "h2" | "h3" | "h4" | "h5" | 3 more)Semantic tag for the subline. Defaults to |
size | m | TextGroupSize ("s" | "m" | "l")Global size tier. Maps to canonical per-element Text sizes. |
captionSize | TextGroupTextSize ("s" | "m" | "xs" | "l" | "sm" | "xl" | 4 more)Overrides the mapped Text size for the caption. | |
headingSize | TextGroupTextSize ("s" | "m" | "xs" | "l" | "sm" | "xl" | 4 more)Overrides the mapped Text size for the heading. | |
sublineSize | TextGroupTextSize ("s" | "m" | "xs" | "l" | "sm" | "xl" | 4 more)Overrides the mapped Text size for the subline. | |
align | left | TextGroupAlign ("left" | "right" | "center")Horizontal alignment of the three elements. |
gap | xs | TextGroupGap ("s" | "m" | "xs" | "l" | "sm")Vertical gap between the three elements. |
captionColor | stringFreeform color override for the caption (CSS color string). | |
headingColor | stringFreeform color override for the heading (CSS color string). | |
sublineColor | stringFreeform color override for the subline (CSS color string). |