Text Group
Overview:
The Text Group component is a compositional typography wrapper that pairs two Text components into a structured content block. It is used to create consistent heading–subheading, label–value, or title–supporting text relationships with controlled spacing and layout direction.
Usage Guidelines:
Use Text Group when two related text elements need to be visually and semantically grouped.
Common use cases include:
Section header + supporting description
Card title + subtitle
Label + value pair
Hero heading + tagline
Metric label + numeric value
Best practices:
Assign semantic tags individually to each nested Text instance based on meaning.
Use size hierarchy between primary and secondary text to establish visual priority.
Use the lockup property to control reading flow direction instead of manual alignment or spacing overrides.
Detach nested Text instances only when building higher-level components that require exposing internal text fields.
Avoid:
Using Text Group for unrelated content blocks.
Using it as a generic container for more than two text elements.
Applying manual spacing overrides instead of using lockup direction.
Component Properties:
lockup (variant):
Options: horizontal, vertical Purpose: Controls layout direction and spacing relationship between the two Text components. Usage:
vertical — Stacked content such as titles with subtitles or descriptions.
horizontal — Inline content such as label–value pairs or compact metadata rows. Context: Lockup controls internal spacing tokens and alignment behavior to ensure consistency across layouts.
Nested Components:
semantic-tag: Controls structural meaning for accessibility and HTML mapping.
Text (Primary): Primary content element. Typically used for headings, labels, or main emphasis text.
Text (Secondary): Supporting content element. Typically used for descriptions, subtitles, metadata, or secondary emphasis.
Each nested Text instance retains full access to:
Type
Size
Style and sub-style
Semantic tags
Appearance controls
Appearance Modes:
Supports the following variable collections and appearance controls:
theme:
Automatically adapts color tokens and contrast behavior across light and dark modes for both nested Text instances.
status:
Inherits interaction states when used inside interactive parent components. Individual Text styling adapts accordingly without requiring separate configuration.
device:
Adjusts spacing, alignment behavior, and text wrapping patterns between desktop, tablet, and mobile contexts to preserve readability and hierarchy.
style & sub-style:
Both nested Text instances support full access to all color styles and sub-styles. Designers may independently assign styles to each text element to support hierarchy or semantic meaning.
opacity:
Supports opacity adjustments at the group or individual Text level to control emphasis, disabled states, or visual de-prioritization.
text style:
Supports appearance-based text styling such as italicization or decorative emphasis where needed.
text weight:
Supports variable font weights for hierarchy control and emphasis differentiation between primary and secondary text.
ℹ️ Typography families are controlled by the nested Text
typeproperty. Font family should not be overridden at the Text Group level.
♿ Accessibility Considerations:
Contrast: All nested Text instances use accessible tokenized color values. Designers must validate contrast combinations when mixing styles or sub-styles.
Keyboard navigation: Text Group itself is non-interactive. Interactive focus behavior is inherited from parent components.
Screen reader support: Semantic meaning is determined by each nested Text instance’s semantic-tag configuration.
Semantic structure: Designers must ensure heading hierarchy is preserved when pairing header tags inside groups (ex: avoid skipping heading levels).
🧠 Developer Notes:
Maps to a simple layout wrapper (<div> or <section>) containing two semantic text elements.
Lockup property maps to flex direction (row or column) with token-controlled spacing.
Known Issues:
No known issues.
Reference Links:
WCAG 2.2 Text Contrast — https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
WCAG Semantic Structure — https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html
Dev Launchers Typography System Spec (Internal)
Last updated
Was this helpful?