Text

Example Text Component Example

The Text component is the default choice for most regular content pages.

Example Text Accordion Component Example

This is an example of the Text Accordion component. Like this text, any initial text inserted in the Rich Text Editor field before the first H2 heading will always be visible.

All H2 headers function as clickable headers, and all content between one H2 until the next H2 is automatically collapsed. Clicking the H2 headers expands the content section associated with the H2 header.

Use the Edit the text button to access the Rich Text Editor window to be able to insert the H2 headings. Note that all texts are always expanded in Edit Mode.

The Text Accordion is a module variant of the Text module.

This is the first H2 header

This is regular text content below the initial H2 header. All content is automatically collapsed and all H2 headings become clickable for expanding each text section below.

This is the second H2 header

The text inserted can be simple text, but it is also possible to use subheaders and other HTML elements to create rich content within each collapsed section.

This is a H3 header, which is collapsed with the rest of the content

You can use as many paragraphs and elements as you like within each collapsed section.

Headers work best with short single-line text but the design does support long texts, spanning across multiple lines

Use your common sense to limit the amount of characters in the header and the amount of text in each section. Long texts may not be suitable for the collapse/expand functionality.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultrices nibh id est ultrices, vitae hendrerit lorem consectetur. Phasellus et aliquam turpis. Sed ut leo dignissim, volutpat felis quis, sodales sapien. Nullam libero massa, molestie porttitor metus a, tempor posuere ante. Nam quam metus, pulvinar at scelerisque non, mattis vel nisi. Aenean quis neque dignissim, finibus mi a, pulvinar velit. Praesent ac tellus ut elit euismod consequat. Mauris leo augue, suscipit non suscipit ut, rhoncus vitae nibh. Nam consectetur molestie libero ac hendrerit. Aliquam ante tellus, vulputate non lacinia ut, mattis ac augue. Ut accumsan metus sit amet feugiat elementum. Nam condimentum placerat nunc, vitae maximus tortor. Mauris porta, lorem vel commodo gravida, elit nisi molestie neque, eu tristique sem felis eu orci. Sed sed odio id ante rutrum lacinia. Aliquam id fringilla ex, at dictum metus.

Nullam suscipit est quis urna tincidunt, at finibus tellus imperdiet. Morbi laoreet eget neque sed eleifend. Duis pellentesque eros ac libero sodales volutpat. Nullam in euismod dolor. Duis consequat dapibus mollis. Suspendisse potenti. Praesent lobortis lorem non magna viverra, vel venenatis tellus venenatis. Ut ullamcorper sed sapien porta efficitur. Aenean ac nulla vel felis viverra tristique.

Proin sollicitudin purus sit amet pulvinar vulputate. Vestibulum pharetra erat ac tortor facilisis commodo. Vestibulum tempus finibus eleifend. Fusce sit amet ultrices nibh. Vivamus vestibulum, nibh ut dignissim hendrerit, orci nulla molestie nisl, sit amet aliquet arcu nulla ut tortor. Aenean sit amet metus posuere, sagittis turpis sit amet, scelerisque odio. Phasellus blandit felis at accumsan porttitor. Duis dignissim turpis at convallis sollicitudin. Curabitur pretium nec arcu id gravida. Quisque sit amet tincidunt quam. Mauris in varius sapien, vel molestie elit. Suspendisse potenti. Ut suscipit elit et porttitor sodales. Donec fermentum orci eros, sed varius diam vehicula ac.

Text Module Tips and tricks

Use headers (H2, H3, H4) inside the Rich Text editor field rather than using the general Module Title and Module Title Prefix, as the header typography is larger on the general Module Title than on headers within the content.

Use headers (H2, H3, H4) based on semantics rather than layout. An H2 indicates a more prominent header text than an H3, and a H3 should always be a subheader to an H2. Do not use H3 simply because it looks better in the context than an H2.

Everything that looks like a header should be marked up as a header. Text simply marked with bold does not provide the importance of a header to Google and screen readers. On the other hand, never use headers on entire text paragraphs to emphasize the text for layout reasons. Use header markup on headers and headers alone.

Pressing Enter in the Rich Text editor creates a line break - a paragraph with a surrounding <p>...</p> around the text content. Paragraphs contain bottom margin, separating it from the following content - the next paragraph or other types of content. Pressing Shift + Enter creates a soft line break - a <br/> between the content before and after. You can have soft line breaks within a paragraph for line breaks with no margin. If you have problems with missing margin between texts, check the code for missing or incorrect line breaks and soft line breaks.