Text Intro

This component can be used to help introduce content as a standalone piece of text without a headline.

Text Intro pattern
When to use

The Text Intro can be used to help introduce content or for a standalone piece of text without a headline title. In comes in three theme for Light, Neutral and Forest Green. Text should be kept to a minimum to avoid bad readability and layout.

Text Intro pattern in Light theme
Light
Text Intro pattern in Neutral theme
Neutral
Text Intro pattern in Forest Green theme
Forest Green
Content & localisation

To ensure that the Text Intro component remains visually appealing and accommodates different languages, adhere to the following content limitations:

  • Headline: The headline should be short and precise. Ideally fitting across two lines.

  • Body Copy: The body copy should be precise and clear, keeping in line with our tone of voice. Avoid adding paragraphs of text that might overwhelm the user.

By following these guidelines, you ensure that the Text Intro component can comfortably accommodate different languages while maintaining a consistent and visually pleasing design.

Text Intro pattern in another language
Translated length +20%
Responsive layout

These are the examples of the Text Intro component across different screen sizes.

Text Intro pattern on mobile
Mobile - 390px
Text Intro pattern on tablet
Tablet - 768px
Text Intro pattern on desktop
Desktop - 1440px