Examples
Getting Started
This example shows a Paragraph component with both a heading and rich-text body copy. The heading renders as a semantic HTML element whose importance level is inherited from the parent grid. Authors can override the visual size with the HeadingSize rendering parameter without changing the DOM hierarchy.
Use this layout when the content block needs a clear section title above the body text.
This example shows a Paragraph component with HideTitleHeading enabled. The Title field is left empty and only the rich-text Copy field is rendered. This is the most common usage pattern for inline body copy, disclaimers, instructional text, or any content that does not need its own heading.
Even without a visible heading, authors can still populate the Title field for accessibility purposes or to label the block in Experience Editor.
- The Paragraph component uses the Helium datasource template, which provides
Title(Single-Line Text) andCopy(Rich Text) fields. - When HideTitleHeading is enabled, the Title still renders but as a
<p>element instead of a heading tag. Leave the Title field empty if you want copy-only output. - The heading’s HTML element (e.g.,
<h2>,<h3>) is determined by the parent grid’s heading importance level. Use the HeadingSize rendering parameter to override the visual size without changing the semantic element. - Column classes (
Small,Medium,Large) control the responsive width of the Paragraph wrapper. These are inherited from the BSTools5 Column rendering parameters base template. - TextAlignment sets a Bootstrap text alignment class (e.g.,
text-center,text-end) on the wrapper div. - The AddClass parameter accepts any additional CSS classes to append to the component’s outer
<div>.
Control Properties
Paragraph
The Paragraph component renders a flexible text content block built on the Helium datasource template. It supports an optional heading (with configurable size and importance level), rich-text body copy, responsive column sizing, and custom CSS classes. Use it for general body copy, section introductions, inline documentation, or any content area that needs a heading–and–copy pair.
| Parameter | Type | Description |
|---|---|---|
| HeadingSize | Droplink | Overrides the visual size of the heading element (e.g., h5, h6) without changing the semantic HTML tag. |
| HideTitleHeading | Checkbox | When enabled, the Title renders as a <p> element instead of a heading tag. Set to 1 to hide the heading. |
| TextAlignment | Droplink | Applies a Bootstrap text alignment class to the wrapper div (e.g., text-center, text-end). |
| HeadingClass | Single-Line Text | Additional CSS class(es) applied to the heading element. |
| data-testid | Single-Line Text | Sets a data-testid attribute on the wrapper div for automated testing. |
| Inherited: Small, Medium, Large, Offset columns | — | Standard BSTools5 column sizing and offset parameters for responsive grid layout. |
| Inherited: PaddingTop, PaddingBottom, PaddingStart, PaddingEnd | — | Standard BSTools5 spacing parameters. |
| Inherited: AddClass | Single-Line Text | Additional CSS classes appended to the component wrapper div. |
Template Properties
The Paragraph component uses the Helium datasource template ({30D1823D-EF29-4973-A6B6-27C3FDF8CFB2}).
| Field | Type | Description |
|---|---|---|
| Title | Single-Line Text | The heading text displayed above the body copy. When HideTitleHeading is enabled, renders as a <p> instead of a heading element. Leave empty for copy-only output. |
| Copy | Rich Text | The body content rendered below the heading. Supports full rich-text editing including lists, tables, links, and inline formatting. |