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).
• 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