Feature Section Single

Use this component to talk about a particular feature or benefit to customers whilst also showcase lifestyle imagery or video.

An image of the Feature Section Single pattern
When to use

The Feature Section Single is a useful component to help highlight a particular feature or benefit to Wise users. It is typically used on feature pages and allows room to showcase our lifestyle photography or promo assets. The orientation of the component can also be flipped.

  • Craft a concise and compelling headline that clearly communicates the main feature or benefit.
  • Ensure that photography or promo assets are in keeping with our guidelines.
  • Do not use too much text that risks overwhelming the user.

An image of the Feature Section Single in Light theme
Light
An image of the Feature Section Single in Bright Green theme
Bright Green
An image of the Feature Section Single in Forest Green theme
Forest Green
An image of the Feature Section Single pattern in layout 1
Layout 1
An image of the Feature Section Single pattern in layout 2
Layout 2
An image of Feature Section Single pattern with correct UX

Craft a concise and compelling headline that clearly communicates the main feature or benefit.

An image of the Feature Section Single with incorrect UX

Do not use too much text that risks overwhelming the user.

Accessibility

To ensure maximum accessibility for our users, use plain language in accordance with our tone of voice for an inclusive reading experience. The text should be precise and informative. Ensure that images are accompanied by appropriate alternative text (alt text) for screen readers. An ideal alt text is descriptive and concise to convey the meaning and purpose of the image to users who may not be able to see it.

Using the Wise app
Example alt text

Using the Wise app

Content & localisation

To ensure that the Feature Section Single 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 Feature Section Single component can comfortably accommodate different languages while maintaining a consistent and visually pleasing design.

The Feature Section Single pattern in another language
Translated length +20%
Responsive layout

These are the examples of the Feature Section Single component across different screen sizes.

Feature Section Single on mobile
Mobile - 390px
Feature Section Single on tablet
Tablet - 768px
Feature Section Single on desktop
Desktop - 1440px