Text Block

These blocks are used for all-text sections. They appear on insights, try, research download, client success story, and campaign landing pages.

The content text block is made up of H2, H3, and body content blocks.

Overall Structure: Stacked Text Section Blocks

Overall anatomy of the stacked text block variant

Overall Structure: Horizontal Text Section Blocks

Overall anatomy of the horizontal text block variant

Overall Structure: Content Text Section Blocks

Overall anatomy of the content text block variant

H1 sets the Heading 1 of the text block. The H1 uses a display text style.
H2 sets the Heading 2 of the text block. The H2 uses a title text style.
CTA enforces the desired user action. Users can click to see more about the content presented. There could be a primary, secondary, or tertiary button. A CTA is optional depending on the component or section.
Body sets the body of the text block. The body uses a body text style.
H3 sets the Heading 3 of the text block. The H3 uses a title text style.

When to Use

Use text blocks when pairing multiple text styles together with a consistent padding on a section.

When Not to Use

Don’t use a text block for a single line or text style.

Stacked Text Section Blocks

Text block variant: Primary Hero — Primary hero

Text block: secondary hero variant — Secondary hero

Horizontal Text Section Blocks

Text Block Variant: Horizontal block with content on a single column — Single column

Text Block Variant: Horizontal block with content on a double column — Double column

Content Text Section Blocks

Text block variant: Content text with H2 + H3 + Body — H2, H3, and Body

Text block variant: Content text with H3 + Body — H3 and Body

Text block variant: Content text with Body + Body — Body and Body


Variation	Purpose	Texts	CTA	Columns	Sizes
Stacked primary hero	Use for the primary hero and content with the highest level of importance.	H1 (display MD) and H2 (title MD)	Primary, secondary, and tertiary; primary and secondary; primary only; no CTA	1 Column	Extended, compact
Stacked secondary hero	Use mostly for the secondary hero component (not the primary variation) and content with the highest level of importance.	H1 (display SM) and H2 (title MD)	Primary, secondary, and tertiary; primary and secondary; primary only; no CTA	1 Column	Extended, compact
Stacked 1	Use for other sections and components that follow the hero component and represent content with a secondary level of importance. Examples: promotion section, layout section, and forms.	H2 (title MD) and body (body LG)	Secondary and tertiary; secondary only; no CTA	1 Column	Extended, compact
Stacked 2	Use for sections and components with a tertiary level of importance. Example: some layout sections.	Body (body LG) and H2 (title SM)	Secondary and tertiary; secondary only; no CTA	1 Column	Extended, compact
Stacked double column	Use for sections with long content to make effective use of the space.	Body (body LG)	Tertiary only; no CTA	2 Columns	Extended, compact
Horizontal text	Use for the layout section.	H2 (title MD) and body (body LG)	Tertiary only; no CTA	1 or 2 columns	Extended, compact
Content text	Use for textual content.	H2 (title MD), H3 (title SM), and body (body LG); H3 (title SM), body (body LG), and body (body LG); Body (body LG), body (body LG), and body (body LG)	Tertiary only; no CTA	1 or 2 columns	Extended, compact

Spacing

Ensure that proper space is given between each text item. The distance between each item will depend on the text block variation.

Spacing for the secondary Hero text block — Stacked secondary hero

Spacing for the Block 1 text block — Stacked block 1

Spacing for the Block 2 text block — Stacked block 2

Spacing for the Stacked Double Column text block — Stacked double column

Spacing for the horizontal single column text block — Horizontal single column

Spacing for the horizontal double column text block — Horizontal double column

Spacing for the content with H2 + H3 + Body text block — Content H2 + H3 + body

Spacing for the content with H3 + Body + Body text block — Content H3 + body + body

Spacing for the content with Body + Body + Body text block — Content body + body + body

Hierarchy

A proper hierarchy must be ensured for the text styles that compose a text block. The display text style will be used for the most important elements, followed by title, and then body. This should be represented in the order of the headings and body of each block.