Interactive story card
The Interactive story card component was created to help users explore and scan a few stories to understand BlackRock's POV on a specific topic.
We’ve baked many features into this component, including:
- Our new extra-large headline with intro blurb to bring more emphasis to your content section
- Built-in navigation along with up to 7 story card topics
- Scrollable topic cards that are fully responsive
- Have total control of how the image crops
- Full bleed background, or offset image
- Ability to turn component-level top padding on or off
- 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
Publishing? View the DCR guidebook for detailed instructions.
Full bleed appearance
With our full-bleed appearance, the story card sits within the color background. It is our default appearance.
For each of the story cards, you have the choice of where the image gets cropped from across different breakpoints; center, left or right side of the image container. This works for either right-side or left-side image orientation. See our “Image placement & cropping guide” for more details.
How do we help more and more people experience financial well-being?
Optional intro paragraph goes here, along with hyperlink capabilities. Character count is set to 350 max, and the headline character count is 70.
Helping more people retire securely
We work closely with Forth Ports to manage a large part of their pension plan that helps employees save for retirement by investing in stocks, bonds, real estate and infrastructure – including ports. In that way, these investments give Forth Ports’ employees access to opportunities in the local economy they helped build.1
Making investing easier, more affordable and more accessible
As a volunteer-led health and first aid charity, St John Ambulance treats and transports thousands of patients each year. We’ve been managing St John Ambulance’s entire investment portfolio for over 15 years, making it easier for them to maximize their focus on their philanthropic mission.2
Creating more sustainable investing opportunities
We've invested £1.2bn in renewable power projects across the UK, that will power 1.8m UK homes every year.3 These renewable projects are also creating thousands of good long-term jobs in the Northeast, like the wind farm project in the port town of Grimsby.
Building more resilient economies that benefit more people
Nearly a decade ago, our private credit investors saw potential in a technology platform that takes beauty and wellness brands direct to consumers online. The Hut Group (THG), based in Manchester, began in a garage with one person, and today employs 8,000 people locally. Our partnership has been one of the key enablers of their success.4
Rules and recommendations
| Component element | Optional element | Rules | ||
|---|---|---|---|---|
| A: Background color options |
|
|||
| B: Headline & intro blurb |
|
|||
| C: Topic labels (side navigation) |
|
|||
| D: Story cards: Image |
|
|||
| d1: Story cards: Headline |
|
|||
| d2: Story cards: Sub-headline |
|
|||
| d3: Story cards: Body copy |
|
|||
| d4: Story cards: CTA Link |
|
|||
| E: Component CTA |
|
|||
| *NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release | ||||
Offset appearance
With our offset background, the story card sits outside the color background, and must only be paired with another BLK_white component to avoid a random white banding.
Note: This must get pre-approval to ensure proper use.
For each of the story cards, you have the choice of where the image gets cropped from across different breakpoints; center, left or right side of the image container. This works for either right-side or left-side image orientation. See our “Image placement & cropping guide” for more details.
How do we help more and more people experience financial well-being?
Optional intro paragraph goes here, along with hyperlink capabilities. Character count is set to 350 max, and the headline character count is 70.
Helping more people retire securely
We work closely with Forth Ports to manage a large part of their pension plan that helps employees save for retirement by investing in stocks, bonds, real estate and infrastructure – including ports. In that way, these investments give Forth Ports’ employees access to opportunities in the local economy they helped build.1
Making investing easier, more affordable and more accessible
As a volunteer-led health and first aid charity, St John Ambulance treats and transports thousands of patients each year. We’ve been managing St John Ambulance’s entire investment portfolio for over 15 years, making it easier for them to maximize their focus on their philanthropic mission.2
Creating more sustainable investing opportunities
We've invested £1.2bn in renewable power projects across the UK, that will power 1.8m UK homes every year.3 These renewable projects are also creating thousands of good long-term jobs in the Northeast, like the wind farm project in the port town of Grimsby.
Building more resilient economies that benefit more people
Nearly a decade ago, our private credit investors saw potential in a technology platform that takes beauty and wellness brands direct to consumers online. The Hut Group (THG), based in Manchester, began in a garage with one person, and today employs 8,000 people locally. Our partnership has been one of the key enablers of their success.4
Rules and recommendations
| Component element | Optional element | Rules | ||
|---|---|---|---|---|
| A: Background color options |
|
|||
| B: Headline & intro blurb |
|
|||
| C: Topic labels (side navigation) |
|
|||
| D: Story cards: Image |
|
|||
| d1: Story cards: Headline |
|
|||
| d2: Story cards: Sub-headline |
|
|||
| d3: Story cards: Body copy |
|
|||
| d4: Story cards: CTA Link |
|
|||
| E: Component CTA |
|
|||
| *NOTE: Due to varying alphabets and character widths, please ensure your publisher tests this prior to release | ||||