Tabs Data

This component can be used to showcase multiple forms of data such as charts of graphics.

Tabs Data pattern
When to use

The Tab Data component can be used to highlight multiple different visual assets to help illustrate data. It can have multiple tab options, although for best user experience this number shouldn't exceed 6 options. It also has an optional secondary text that sits under the image to add more information.

  • Craft a concise and compelling headline that clearly communicates each option.
  • Do not use lifestyle imagery in place of the data graphic

Tabs Data pattern with correct UX

Craft a concise and compelling headline that clearly communicates each option.

Tabs Data pattern with incorrect UX

Do not use lifestyle imagery in place of the data graphic

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.

A graphic showing the performance of the BlackRock ICS Sterling Government Liquidity Fund
Example alt text

A graphic showing the performance of the BlackRock ICS Sterling Government Liquidity Fund

Content & localisation

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

Tabs Data pattern in another language
Translated length +20%
Responsive layout

These are the examples of the Tabs Data component across different screen sizes.

Tabs Data pattern on mobile
Mobile - 390px
Tabs Data pattern on tablet
Tablet - 768px
Tabs Data pattern on desktop
Desktop - 1440px