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 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?
Content Options
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.
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.
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.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
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
Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.
Lorem ipsum
Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.
Lorem ipsum
Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.
Lorem ipsum
Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.
Lorem ipsum
Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.
Lorem ipsum
Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.
the end
Top Margin
Lorem ipsum
Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.
Lorem ipsum
Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.
Lorem ipsum
Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.
Lorem ipsum
Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.
Lorem ipsum
Lorem ipsum odor amet, consectetuer adipiscing elit. Pretium potenti libero mauris facilisis malesuada.
Lorem ipsum
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.