Data value pair
The Data value pair component was created to help bring to life bespoke numerical infographics in a more consistent, dynamic, and accessible manner.
It should be used to showcase a series of numerical data values and to help the users easily visualize data points on a page. These numerical data values can include:
- Monetary symbols — $, €, ¥, £, None
- Increase / decrease symbols
- Percentages
- Numerical values only (includes decimal points and commas)
We’ve baked many features into this component, including the ability to:
- Add either a large (H2) or medium size (H3) headline with intro blurb
- Automatically scaled data value text depending on the longest digits across any tile - this ensures all tiles look consistent from a text size standpoint
- Scrollable feed - allows you to showcase many different data points
- “More info” hover state tile - this allows you to include more context on what you are displaying or why you are displaying this information
- Footnotes with accompanying source blind
Publishing? View the DCR guidebook for detailed instructions.
Paragraph appearances
Use our Paragraph appearance if you want a larger tile set (high visual impact), and the headline, intro, and data tiles to align down the page.
There is a minimum of 2 tiles — additional tiles automatically appear in a carousel feed.
PRO TIP: Use the large headline appearance if you are using this to introducing a new content section to your page; think of it as your H2. If this is used as support for an established section, use the “medium” size headline (H3).
Two proof-points with “see more”
This is our optional intro blurb, which has a limit of 750 characters. We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
Multiple proof-points with CTA & source
This is our optional intro blurb, which has a limit of 750 characters. We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date.
- A diverse group of intelligent people
- Innovative solutions that drive progress
- A strong sense of who we are and our purpose
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
Allocations subject to change.
Negative weightings may result from specific circumstances (including timing differences between trade and settle dates of securities purchased by the funds) and/or the use of certain financial instruments, including derivatives, which may be used to gain or reduce market exposure and/or risk management.
Rules and recommendations
Alternate variations
To help you visualize different possible layouts and background colors, we stacked a few components together to give you a more clear understanding of how this could look.
Five proof-points & no intro
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
Multiple proof-points with CTA
This is our optional intro blurb, which has a limit of 750 characters. We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date.
Allocations subject to change.
Negative weightings may result from specific circumstances (including timing differences between trade and settle dates of securities purchased by the funds) and/or the use of certain financial instruments, including derivatives, which may be used to gain or reduce market exposure and/or risk management.
Side by side appearances
Our Side by side appearance has two options:
- One single large data tile
- A smaller set of 2+ data tiles that populate in a carousel feed
This appearance is a good choice if you want your data inforgraphic to sit alongside your descriptive text for an easier comparison to the topic at-hand, or just to visually align to another 2-column component below.
It’s also a good option when you need to either highlight a single large data infographic (high visual impact), or multiple data points in a more “condensed” view.
PRO TIP: Use the large headline appearance if you are using this to introducing a new content section to your page; think of it as your H2. If this is used as support for an established section, use the “medium” size headline (H3).
A single value proof-point with source blind
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date.
The yellow bars show the full-year hit to GDP from our sector-level bottom-up analysis, including the initial impact on the most affected sectors and the broader impact on the whole economy due to spillover effects. The fiscal response more than covers the initial impact in the U.S. Once we factor in the spillover to the full economy, the fiscal policy response globally falls short. Yet the situation improves when monetary policies (light yellow) are accounted for. This is especially striking in the U.S., as the chart shows.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
Sources: BlackRock Investment Institute, with data from the Federal Reserve, European Central Bank, Bank of Japan, Bank of England, and Haver Analytics, June 2020. Notes: We use estimated targets for the total size of the U.S. and euro area corporate purchases and lending schemes for 2020. For the euro area we include TLTRO funding, and for the UK we include central bank support for the TFS bank lending scheme. The euro area numbers are averages of the four largest economies in the bloc, Germany, France, Italy and Spain.
Two or more proof-points with bullets & source
Our ability to deliver outcomes and solutions is built on true partnership and a belief that by listening to our clients, we can better serve them and the people of the UK. We’re able to be steadfast partners because of:
- A diverse group of intelligent people
- Innovative solutions that drive progress
- A strong sense of who we are and our purpose
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
Sources: BlackRock Investment Institute, with data from the Federal Reserve, European Central Bank, Bank of Japan, Bank of England, and Haver Analytics, June 2020. Notes: We use estimated targets for the total size of the U.S. and euro area corporate purchases and lending schemes for 2020. For the euro area we include TLTRO funding, and for the UK we include central bank support for the TFS bank lending scheme. The euro area numbers are averages of the four largest economies in the bloc, Germany, France, Italy and Spain.
Rules and recommendations
| Component element | Optional element | Rules | ||
|---|---|---|---|---|
| A: Background color options | • BLK_Black • BLK_White with optional top/bottom border • Border options — Top Border, Bottom Border, Both (DEFAULT), None • BLK_Neutral 1 • BLK_Orange • BLK_Yellow • BLK_Pink |
|||
| B: Headline & intro blurb | Headline: Optional Intro: Mandatory |
• Headline character count: ~70* • Large (40px Extrabold) = H2 — or — Medium (32px Bold) = H3 headline size option • Intro blurb character count: ~750* • Intro blurb can include hyperlink • Can have the intro blurb without the headline |
||
| C: Data tiles | • Tile background — White tile background only for all data tiles • 1 tile minimum — additional tiles automatically appear in carousel feed along with carousel controls • Recommend no more than 6 tiles max • Tile heights are automatically sized per the tallest tile in the set (i.e. one tile text label is 3 lines long, vs. any other falling to one singe line). This ensures consistency across the tile set |
|||
| C1: Numerical data | • Numerical values only — can include decimal points and commas • Can not add a “b” for billion / “m” for million, hyphens (i.e. 3/4), or + / - symbols • Text size/symbols automatically scale based on tile with the longest data digits • Monetary symbols (optional): $, €, ¥, £, None • Can not combine monetary symbols with any other symbol • Alternate symbols: • % • % increase (% including up arrow) • % decrease (% including down arrow) • Increase (up arrow) • Decrease (down arrow) • None |
|||
| C2: Data value label | • Label character count: ~100* • Allowance for footnotes — if include footnotes, it automatically displays the source blind |
|||
| C3: “More info” function | • Contextual text character count: ~250* • If choose to include this function, all tiles are mandatory and copy must be provided for each data tile • When this option is selected, user hovers / taps anywhere on the tile for the “more info” tile to appear |
|||
| D: CTA button | • CTA can be either a primary button or a tertiary link • Keep these "digital" friendly; i.e. short descriptors |
|||
| E: Source blind | • Automatically appears when insert Footnotes in the data value label section (see section C2 above) • No character limit • Option for 16px default body size or 12px font size, depending on regional legal requirements |
|||
| F: Proof points | • Can be added to any appearance options • Min 2 bullets, max 3 • Check mark icon only • Proof points character count: ~100* per bullet |
|||
| *NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release | ||||
Alternate variations
To help you visualize different possible layouts and background colors, we stacked a few components together to give you a more clear understanding of how this could look.
A fundamental reshaping of finance
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date.
The yellow bars show the full-year hit to GDP from our sector-level bottom-up analysis, including the initial impact on the most affected sectors and the broader impact on the whole economy due to spillover effects. The fiscal response more than covers the initial impact in the U.S. Once we factor in the spillover to the full economy, the fiscal policy response globally falls short. Yet the situation improves when monetary policies (light yellow) are accounted for. This is especially striking in the U.S., as the chart shows.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
Sources: BlackRock Investment Institute, with data from the Federal Reserve, European Central Bank, Bank of Japan, Bank of England, and Haver Analytics, June 2020. Notes: We use estimated targets for the total size of the U.S. and euro area corporate purchases and lending schemes for 2020. For the euro area we include TLTRO funding, and for the UK we include central bank support for the TFS bank lending scheme. The euro area numbers are averages of the four largest economies in the bloc, Germany, France, Italy and Spain.
Three+ proof-points with source
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date.
The yellow bars show the full-year hit to GDP from our sector-level bottom-up analysis, including the initial impact on the most affected sectors and the broader impact on the whole economy due to spillover effects. The fiscal response more than covers the initial impact in the U.S. Once we factor in the spillover to the full economy, the fiscal policy response globally falls short. Yet the situation improves when monetary policies (light yellow) are accounted for. This is especially striking in the U.S., as the chart shows.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
Sources: BlackRock Investment Institute, with data from the Federal Reserve, European Central Bank, Bank of Japan, Bank of England, and Haver Analytics, June 2020. Notes: We use estimated targets for the total size of the U.S. and euro area corporate purchases and lending schemes for 2020. For the euro area we include TLTRO funding, and for the UK we include central bank support for the TFS bank lending scheme. The euro area numbers are averages of the four largest economies in the bloc, Germany, France, Italy and Spain.
Insert single white appearance with all features
Three+ proof-points with source
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date.
The yellow bars show the full-year hit to GDP from our sector-level bottom-up analysis, including the initial impact on the most affected sectors and the broader impact on the whole economy due to spillover effects. The fiscal response more than covers the initial impact in the U.S. Once we factor in the spillover to the full economy, the fiscal policy response globally falls short. Yet the situation improves when monetary policies (light yellow) are accounted for. This is especially striking in the U.S., as the chart shows.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
We view the economic impact and policy response as two key signposts for gauging the virus shock, and compare our assessment of the lost national income across major economies with policy measures announced to date, we view the end.
Sources: BlackRock Investment Institute, with data from the Federal Reserve, European Central Bank, Bank of Japan, Bank of England, and Haver Analytics, June 2020. Notes: We use estimated targets for the total size of the U.S. and euro area corporate purchases and lending schemes for 2020. For the euro area we include TLTRO funding, and for the UK we include central bank support for the TFS bank lending scheme. The euro area numbers are averages of the four largest economies in the bloc, Germany, France, Italy and Spain.
• Large (40px Extrabold) = H2 — or — Medium (32px Bold) = H3 headline size option
• Intro blurb character count: ~750*
• Intro blurb can include hyperlink
• Can have the headline without the intro blurb (or vice-versa)
• 2 tiles minimum — additional tiles automatically appear in carousel feed along with carousel controls
• Recommend no more than 6 tiles max
• Tile heights are automatically sized per the tallest tile in the set (i.e. one tile text label is 3 lines long, vs. any other falling to one singe line). This ensures consistency across the tile set
• Can not add a “b” for billion / “m” for million, hyphens (i.e. 3/4), or + / - symbols
• Text size/symbols automatically scale based on tile with the longest data digits
• Monetary symbols (optional): $, €, ¥, £, None
• Can not combine monetary symbols with any other symbol
• Alternate symbols:
• %
• % increase (% including up arrow)
• % decrease (% including down arrow)
• Increase (up arrow)
• Decrease (down arrow)
• None
• Allowance for footnotes — if include footnotes, it automatically displays the source blind
• If choose to include this function, all tiles are mandatory and copy must be provided for each data tile
• When this option is selected, user hovers / taps anywhere on the tile for the “more info” tile to appear
• Keep these "digital" friendly; i.e. short descriptors
• No character limit
• Option for 16px default body size or 12px font size, depending on regional legal requirements
• Min 2 bullets, max 3
• Check mark icon only
• Proof points character count: ~100* per bullet