Related material

The vi-16 Related materials component is a flexible component that uses tiles/cards to share any combination of three content types: product (funds), page content, and/or link list.

Add this component to a page to highlight and direct users to relevant content. You can link directly to further reading on a topic, a fund, or a collection of links. As well as linking to another page, you can also create a direct file download from the link list card.

The combination of cards displayed is up to you, you need a minimum of 2 and there is a maximum 6 in any combination.

 

Publishing? View the DCR guidebook for detailed instructions.

Tile sets Appearance guide
Paragraph-2,Related Materials-1,Related Materials-2,Paragraph-3,Advance Static Table-1,Paragraph-4
Paragraph-5,Advance Static Table-2,Image-1,Paragraph-6

Tile sets

As mentioned above, the combination of cards displayed is up to you, you need a minimum of 2 and there is a maximum 6 in any combination.

The product tiles have the ability to dynamically pull in the live data directly from the product page using the fund’s product ID, and remains updated with it’s current values.

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

  • 3 optional headline size options:
    • X-Large (this automatically displays a larger intro text)
    • Large (this should be your default, as it matches our standard paragraph headline sizes)
    • Medium
  • Optional intro blurb
  • Pull in real-time product/fund information (Product tiles)
  • Pull in dynamic data, i.e. headlines from pages that you’re linking to/from (Content tiles)
  • Full-bleed, or offset background options. See examples below
  • Optional top padding (only for new “Standard” or “Offset” appearances). See “Appearance” tab for details

Rules and recommendations

For “Offset” guidance and rules, please see the next tab “Appearance & Teamsite guide”. This will show the bottom border color options and explain how to best use it.

Rules and recommendations
Component element Optional element Rules
A: Background color options
  • • BLK_Black
  • • BLK_White w/ optional top & bottom border
  • • BLK_Neutral
  • • BLK_Orange
  • • BLK_Yellow
B: Headline & intro blurb  
  • • Optional: Eyebrow character count: ~35*
  • • Optional: Headline character count: ~70*
    •    ⁃ Headline choices: XL (56px Extrabold), Large (40px Extrabold), or Medium (32px Bold)
    •    ⁃ Large should be your default, as it matches our standard paragraph headline sizes
    •    ⁃ If choose XL headline, intro text automatically increases to 20px “intro” size
  • • Optional: Intro blurb character count: ~350*
  • • Intro blurb can include hyperlink
C: Product tile(s)
  • • Min 2 tiles, Max 3 tiles for Standard/Offset, Max 6 tiles for "Default" appearances 
    • ⁃ Currently, the 2-column tiles appear below the 3-tile appearance
  • • For Dynamic input only - Just provide the publisher with the product ID, which is the 6 digit number found in the product page URL
    •    ⁃ Example: https://www.blackrock.com/us/individual/products/239726/ishares-core-sp-500-etf
  • • Data points:
    •    ⁃ Asset class – required
    •    ⁃ Ticker & fund name – required
    •    ⁃ NAV and Total Return – required. Will only pull in the available datapoints for each region
    •    ⁃ Morningstar rating – optional
  • • This is usable on sites where product pages pull in the Net Asset Value & Total Return data feeds and product Tickers.
  • • MUST HAVE ACCOMPANYING DISCLOSURES:
    •    ⁃ In the AMRS, any instance of a Product tile must be accompanied by the Past Perfomance, General Risk, and Prospectus language in the disclosure section of the content page.
D: Content tile(s)
  • • Min 2 tiles, Max 3 tiles for Standard/Offset, Max 6 tiles for "Default" appearances
    •    ⁃ Currently, the 2-column tiles appear below the 3-tile appearance
  • • Content can be a manual input, or dynamically pulled in — i.e. headlines from pages that you’re linking to
  • • Optional: Eyebrow — Character count: ~35*
  • • Optional: Headline — Character count: ~70*
  • • Optional: Date of content can be inserted below headline (not shown) — i.e. “Mar 17, 2022”
    •    ⁃ Dynamic or manual calendar input
  • • Optional: Intro blurb — Character count: ~250*
  • • Mandatory: CTA — Keep these “digital” friendly; i.e. short descriptors
E: Link list tile(s)
  • • Min 2 tiles, Max 3 tiles for Standard/Offset, Max 6 tiles for "Default" appearances
  •    ⁃ Currently, the 2-column tiles appear below the 3-tile appearance
  •    ⁃ Recommend not using more than 2 link lists
  • • Optional: Eyebrow — Character count: ~35*
  • • Max of 5 links per tile
  • • Recommended character count: ~30*/link
F: Component CTA
  • • CTA can be either a button or a link
  • • Keep these “digital” friendly; i.e. short descriptors and be explicit to where you are leading the user
  • • CTA should only be used with 3 product tiles or 3 content tiles to prevent user confusion
*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.

Alternate variations 2
Alternate variations 1
Alternate variations 3

Main appearances

This component has three appearance options, along with three tile “content types” for any of the 3 choices below, as detailed above.

We recommend using the new appearance option “Standard” or “Offset” appearances, as we slowly decommission the “Default” appearances across our site.:

  1. Default (this is our legacy appearance - what you see on most of the pages today)
  2. Standard (this is our new appearance with more options and updated look)
  3. Offset (this is our new appearance with more options and updated look)

The biggest visual difference is the new “Standard” & “Offset” appearances both have drop shadows on the tiles, along with intro text inside the content tiles, where the “Default” does not. 

Offset appearance

With our new offset appearances, the tiles sit below the color background, allowing for a more connected visual flow to a related topic/component below. It is important to use this correctly, and to implement the correct “bottom fill” section to ensure this visually aligns to the component stacked below.

We have implemented 2 pre-selected “bottom fill” color options to ensure a seamless stack of different colored components. See below for how this works.

Note: This must get pre-approval to ensure proper use.

Bottom fill

When using this offset appearance and tying it to another related section, it is important to choose the same “bottom fill” color choice so there is not a white gap between the components. This aids in a seamless transition between the Related materials component and content below.

We have built in a 2 brand color choices, and you can see them in Rules section below. You must choose a component that allows the same color as the bottom fill piece.

Note: This option is in the Related materials DCR, not a separate component.

bottom fill
Component element Optional element Rules
A: Offset bottom fill
  • • BLK_White (Default)
  • • BLK_Neutral-shade
  • • For any other color options, just choose the “Standard” appearance 

Do’s & Do nots

Do’s & Do nots

Padding options

We have built in the ability to turn component-level top padding on or off. This is to solve “double” padding issues when stacking similar colored components that are related topic-wise.

Example: If you are using a component that has 80px of bottom padding, and you pull in a separate component right below it that has 80px top padding, then you’ll get a large gap of “negative” space. You can turn off the top padding to reduce the gap, and allow the user to visually understand these two components are part of one single topic.

NOTE: This should only be used when stacking similar colored components together. Please get pre-approval for guidance from the Design Platform team.

Padding options