The “Text and Text” component is designed to allow authors to present content in a visually distinct format by featuring a primary text block alongside a secondary text area. It provides options to adjust text alignment, control which side the featured text appears on, and customize column widths. This component is useful for emphasizing main ideas and establishing clear content structure.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This is a Pre Heading

This is a Heading

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada. Pulvinar vel ultrices; senectus urna quam penatibus blandit arcu? Posuere curae ultrices torquent quis interdum condimentum suspendisse. Pellentesque magnis potenti lacinia iaculis volutpat venenatis. Augue maximus tempus lacinia erat consequat facilisi nisl. Mollis vehicula posuere ullamcorper semper id. Netus magnis vivamus; curae justo a sociosqu phasellus. Est tempus odio potenti risus mi suscipit pretium.

Tincidunt molestie habitasse tincidunt egestas condimentum odio morbi sit. Nostra vestibulum ex id eget porttitor purus dolor. Viverra tellus nulla egestas rhoncus curae parturient. Est malesuada natoque suspendisse sodales ornare mollis maximus netus? Bibendum diam viverra dignissim viverra fames primis. Nascetur iaculis parturient arcu aliquet litora odio. Posuere hendrerit aliquet congue odio iaculis integer. Orci sollicitudin cras vitae nunc lorem platea. Cubilia primis id sollicitudin, gravida feugiat gravida. Euismod suscipit adipiscing cursus dictum potenti quam.

Varius purus metus; vulputate mus mauris nascetur. Accumsan fermentum ultricies egestas tincidunt; viverra ultrices. Eros facilisis justo maecenas tristique sem tortor finibus. Duis at venenatis consectetur diam ad nullam praesent. Conubia ut venenatis hendrerit id hendrerit. Viverra nibh sollicitudin accumsan convallis lacinia odio himenaeos venenatis. Hac dignissim vulputate parturient morbi lobortis tortor?

This is a CTA

Content Options

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a Pre Heading

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada. Pulvinar vel ultrices; senectus urna quam penatibus blandit arcu? Posuere curae ultrices torquent quis interdum condimentum suspendisse. Pellentesque magnis potenti lacinia iaculis volutpat venenatis. Augue maximus tempus lacinia erat consequat facilisi nisl. Mollis vehicula posuere ullamcorper semper id. Netus magnis vivamus; curae justo a sociosqu phasellus. Est tempus odio potenti risus mi suscipit pretium.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a Heading

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada. Pulvinar vel ultrices; senectus urna quam penatibus blandit arcu? Posuere curae ultrices torquent quis interdum condimentum suspendisse. Pellentesque magnis potenti lacinia iaculis volutpat venenatis. Augue maximus tempus lacinia erat consequat facilisi nisl. Mollis vehicula posuere ullamcorper semper id. Netus magnis vivamus; curae justo a sociosqu phasellus. Est tempus odio potenti risus mi suscipit pretium.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada. Pulvinar vel ultrices; senectus urna quam penatibus blandit arcu? Posuere curae ultrices torquent quis interdum condimentum suspendisse. Pellentesque magnis potenti lacinia iaculis volutpat venenatis. Augue maximus tempus lacinia erat consequat facilisi nisl. Mollis vehicula posuere ullamcorper semper id. Netus magnis vivamus; curae justo a sociosqu phasellus. Est tempus odio potenti risus mi suscipit pretium.

This is a CTA

Layout and Styling Options

Text Alignment

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a Pre Heading

Center feature text: On

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada. Pulvinar vel ultrices; senectus urna quam penatibus blandit arcu? Posuere curae ultrices torquent quis interdum condimentum suspendisse. Pellentesque magnis potenti lacinia iaculis volutpat venenatis. Augue maximus tempus lacinia erat consequat facilisi nisl. Mollis vehicula posuere ullamcorper semper id. Netus magnis vivamus; curae justo a sociosqu phasellus. Est tempus odio potenti risus mi suscipit pretium.

This is a CTA

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a Pre Heading

Center header text: On

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada. Pulvinar vel ultrices; senectus urna quam penatibus blandit arcu? Posuere curae ultrices torquent quis interdum condimentum suspendisse. Pellentesque magnis potenti lacinia iaculis volutpat venenatis. Augue maximus tempus lacinia erat consequat facilisi nisl. Mollis vehicula posuere ullamcorper semper id. Netus magnis vivamus; curae justo a sociosqu phasellus. Est tempus odio potenti risus mi suscipit pretium.

This is a CTA

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a Pre Heading

Center CTA: On

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada. Pulvinar vel ultrices; senectus urna quam penatibus blandit arcu? Posuere curae ultrices torquent quis interdum condimentum suspendisse. Pellentesque magnis potenti lacinia iaculis volutpat venenatis. Augue maximus tempus lacinia erat consequat facilisi nisl. Mollis vehicula posuere ullamcorper semper id. Netus magnis vivamus; curae justo a sociosqu phasellus. Est tempus odio potenti risus mi suscipit pretium.

This is a CTA

Featured Text Placement

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Place featured text on the right: Off (default)

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada. Pulvinar vel ultrices; senectus urna quam penatibus blandit arcu? Posuere curae ultrices torquent quis interdum condimentum suspendisse. Pellentesque magnis potenti lacinia iaculis volutpat venenatis. Augue maximus tempus lacinia erat consequat facilisi nisl. Mollis vehicula posuere ullamcorper semper id. Netus magnis vivamus; curae justo a sociosqu phasellus. Est tempus odio potenti risus mi suscipit pretium.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Place featured text on the right: On

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada. Pulvinar vel ultrices; senectus urna quam penatibus blandit arcu? Posuere curae ultrices torquent quis interdum condimentum suspendisse. Pellentesque magnis potenti lacinia iaculis volutpat venenatis. Augue maximus tempus lacinia erat consequat facilisi nisl. Mollis vehicula posuere ullamcorper semper id. Netus magnis vivamus; curae justo a sociosqu phasellus. Est tempus odio potenti risus mi suscipit pretium.

Column Widths

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Featured Text Width: 2

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada. Pulvinar vel ultrices; senectus urna quam penatibus blandit arcu? Posuere curae ultrices torquent quis interdum condimentum suspendisse. Pellentesque magnis potenti lacinia iaculis volutpat venenatis. Augue maximus tempus lacinia erat consequat facilisi nisl. Mollis vehicula posuere ullamcorper semper id. Netus magnis vivamus; curae justo a sociosqu phasellus. Est tempus odio potenti risus mi suscipit pretium.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Featured Text Width: 4 (default)

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada. Pulvinar vel ultrices; senectus urna quam penatibus blandit arcu? Posuere curae ultrices torquent quis interdum condimentum suspendisse. Pellentesque magnis potenti lacinia iaculis volutpat venenatis. Augue maximus tempus lacinia erat consequat facilisi nisl. Mollis vehicula posuere ullamcorper semper id. Netus magnis vivamus; curae justo a sociosqu phasellus. Est tempus odio potenti risus mi suscipit pretium.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Featured Text Width: 6

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada. Pulvinar vel ultrices; senectus urna quam penatibus blandit arcu? Posuere curae ultrices torquent quis interdum condimentum suspendisse. Pellentesque magnis potenti lacinia iaculis volutpat venenatis. Augue maximus tempus lacinia erat consequat facilisi nisl. Mollis vehicula posuere ullamcorper semper id. Netus magnis vivamus; curae justo a sociosqu phasellus. Est tempus odio potenti risus mi suscipit pretium.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Featured Text Width: 8

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada. Pulvinar vel ultrices; senectus urna quam penatibus blandit arcu? Posuere curae ultrices torquent quis interdum condimentum suspendisse. Pellentesque magnis potenti lacinia iaculis volutpat venenatis. Augue maximus tempus lacinia erat consequat facilisi nisl. Mollis vehicula posuere ullamcorper semper id. Netus magnis vivamus; curae justo a sociosqu phasellus. Est tempus odio potenti risus mi suscipit pretium.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Featured Text Width: 10

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada. Pulvinar vel ultrices; senectus urna quam penatibus blandit arcu? Posuere curae ultrices torquent quis interdum condimentum suspendisse. Pellentesque magnis potenti lacinia iaculis volutpat venenatis. Augue maximus tempus lacinia erat consequat facilisi nisl. Mollis vehicula posuere ullamcorper semper id. Netus magnis vivamus; curae justo a sociosqu phasellus. Est tempus odio potenti risus mi suscipit pretium.

Bottom Margin

Lorem ipsum

Bottom Margin: None

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.

Lorem ipsum

Bottom Margin: X-Small

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.

Lorem ipsum

Bottom Margin: Small

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.

Lorem ipsum

Bottom Margin: Medium

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.

Lorem ipsum

Bottom Margin: Large

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.

Lorem ipsum

Bottom Margin: X-Large

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.

the end

Top Margin

Lorem ipsum

Top Margin: None

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.

Lorem ipsum

Top Margin: X-Small

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.

Lorem ipsum

Top Margin: Small

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.

Lorem ipsum

Top Margin: Medium

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.

Lorem ipsum

Top Margin: Large

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.

Lorem ipsum

Top Margin: X-Large

Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.

the end

Usage

Do

  • Consider the balance of text between the primary and secondary areas to ensure the layout looks intentional and cohesive.
  • Use this component to call attention to key information or to break up long sections of text.
  • Ensure that the featured text is short and impactful to serve as a visual anchor.
  • Adjust the text alignment settings to match the overall design and flow of the page.
  • Choose a layout that complements the surrounding content, such as placing the featured text on the side that best draws attention.
  • Experiment with different column width ratios to create the desired emphasis without overwhelming the reader.

Don't

  • Avoid using this component for unrelated content pieces; the texts should complement each other.
  • Don’t place complex media elements like videos or images inside this component—it’s meant for text content only.
  • Don’t rely on this component to fix spacing issues or alignment problems in other parts of the layout.
  • Avoid creating too many variations of this component on the same page, as it can confuse the reader and weaken its impact.
  • Don’t use this component as a substitute for a full section header or introduction—keep it within its intended purpose.
  • Avoid using very narrow or very wide column ratios that make the text difficult to read or the component unbalanced.
  • Avoid placing this component immediately above or below similar text-based components, as it may create visual redundancy.