Image | BlackRock Design System

Image (vi20)

The Image component is used to help bring visual interest to your web pages, as well as enhancing written content across our BlackRock editorial pages. There are a range of appearances to help you achieve different layout options, and help tie together your page content in a seamless way.

We’ve baked many features into this component, including the ability to:

Add an optional font size headline(s) with intro blurbs (where applicable - see rules below)
- If you need more flexibility in your headline size, use our headline component
Appearance options include a full width image, 2 different “key” bullet point appearances, and a “paragraph” option
Hide lengthy sources in a blind — or — keep them visible with a caption
All main appearances have the ability to turn component-level top padding on or off
- See example here
- Note: Use this is to solve “double” padding issues when stacking similar colored components together which may cause large gaps to appear, and get pre-approval for guidance from the Design Platform team

Note: We recommend using this component for static imagery. If you need dynamic charts/graphs, check out our Data visualization section for a 1:1 match of the below appearances.

Paragraph-2,Image-1,Paragraph-3,Advance Static Table-1,Paragraph-4,Image-2,Paragraph-5

Paragraph-6,Image-3,Paragraph-7,Advance Static Table-2,Paragraph-8,Image-4,Paragraph-9

Paragraph-10,Image-5,Paragraph-11,Advance Static Table-3,Paragraph-12,Image-6,Paragraph-13

Paragraph-14,Image-7,Paragraph-15,Advance Static Table-4,Paragraph-16,Image-8,Paragraph-17

Full width image

This is our largest image appearance, and should be used with strong considerations, as it will take up a fair amount of real estate on your web page. The height is variable, but it does have a max width of 12-columns. See below for our sizing recommendations.

PRO TIP: If you need more flexibility in your headline size or headline options (i.e. add an eyebrow), check out our headline component.

Optional “large” headline

Optional intro paragraph text goes here. It has rich html functionality (i.e. hyperlinks, word styling, etc.), and the max character count is set to 350. The optional headline character count is 70.

Image caption / source: This can be a visible source or hidden in a “source” blind. Either choice has 2 “legal” font size options (12px or 16px font size).

Graphic layout guide

The graphic extends to our 12-column grid. Heights are variable, which allows the flexibility to custom size your graphic to match your content. See image specs below in our Rules section.

PRO TIP: We recommend laying out your graphic maintaining a 8:3 aspect ratio. This helps reduce the overall height of the graphic.

Rules and recommendations

Component element	Optional element	Rules
Component elementA: Background color options	Optional element	Rules • BLK_Black • BLK_White with optional top/bottom dividers • Dividers match 12-column layout, not full-browser width • BLK_Neutral
Component elementB: Headline & intro blurb	Optional element	Rules • Optional: Headline character count: ~70* • Large (40px Extrabold) = H2 — or — Medium (32px Bold) = H3 headline size option • For more flexibility, you can implement our headline component • Optional: Intro blurb character count: ~350* • Intro blurb can include hyperlink & rich html functionality • Can have the headline without the intro blurb (or vice-versa)
Component elementC: Image	Optional element	Rules • Image dimension: These are recommendations, assets can be cut shorter or taller to fit the content need • Image dimension: 8:3 ratio / 1280x480px graphic (JPG/PNG/SVG) • All image assets must be optimized for the web: <300 kb
Component elementD: Image source	Optional element	Rules • No character limit • Two appearance options: Fully visible caption, or source blind that expands on-click • Options for either 16px default body size or 12px font size, depending on regional legal requirements
Component elementE: CTA	Optional element	Rules • CTA should be tertiary link • Keep these "digital" friendly; i.e. short descriptors
Component element*NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release			Optional element	Rules

Showing 1 to 6 of 6 entries

Alternate variations

All of our components have the ability to stack vertically as many times as your needs require, and include different background appearances. To help you visualize possible layouts, we stacked a few Image components together to give you a more clear understanding of how this could look.

An honest look in the mirror

We see a company that’s not there yet with racial and gender equality. But we also see a company that wants to do better.

By 2024, our goal is to increase representation of black professionals by 30%. And grow our women senior leaders to 32.5% globally by 2024 from 30%.

Do nots

We do not recommend using static charts/graphs, or non-transparent graphics in this component. If you do need a chart/graph, please check our Data visualization components..

Don’t. Don’t upload small graph/chart, or photograph into the full-width appearance, or incorrectly sized/scaled/cropped assets, as it will stretch, distort, and be illegible to the audience. Design for the appropriate placement.

Don’t. Don’t use a close up crop of a person’s face. If the image does not work in the dimension/ratio then choose another image.

Don’t. If you do implement a static chart/graph, only use a transparent graphic. Design for the background you plan on using so our audience can see the data and legend information (black text on black bg = illegible).