Live Style Guide Updates
September 2022
Redesigning a landing page? You can now “window shop” for components with our new Component Hub Pages in our Live Style Guide.
Scroll through available components and click the “Component guidelines” button to view additional appearances. Once you’ve chosen a component appearance, take a screenshot and add it to your publishing ticket for easy reference.
Component Hub Pages:
All landing pages include a Banner followed by various combinations of body content; Content Organization, Cross-link and Editorial components.
In addition to the above body content categories, you also have Data Visualization components available:
July-August 2022
NEW PAGES
- Fund Search Bar (note that the bar doesn’t function on the style guide. The functionality is described in the Live Style Guide. The functionality can be seen in the *live example below.)
- Headline
UPDATED PAGES
- Body Tabs - We’ve also updated the body tabs page to reflect the new vi20 body tabs design. Please use vi20 body tabs on new pages and begin updating old pages to replace vi16 body tabs with this new version.
- Data Value Pair
*Live examples:
Headline & Fund Search Bar (headline is placed just above the fund bar)
Data Value Pair & Dynamic Social Media
April - June 2022
A series of brand new data visualization pages (vi20 charts) are now available:
We also made updated to the below pages:
- Related Content
- Image Crop Guide
- Tables
- Minor update to the component name (previously anchor nav) now In Page Navigation
Live style guide updates
March 2022
- Vi16 Author Bio - new appearances
- Vi20 Homepage Hero Banner - new documentation
February 2022
Live style guide updates
- vi-20 Hub tiles - new documentation
- vi-20 Messaging cross-link - new documentation
- vi-20 Audio player - new documentation
Release notes
January 2021
Live style guide updates
- We are excited to announce that we have launched a brand-new static table component, which is fully accessible. This component is versatile and will help marketers organize data and information that is too detailed or complicated to be described adequately in the text, allowing the reader to quickly see the results. It can be used to highlight trends or patterns in the data and to make a webpage more readable by removing numeric data from the text. Currently, there are four content type appearances available for use: simple, commentary, category, and comparison.
- We have introduced a new section to highlight relationship branding guidelines. This will help marketers in gathering a better understanding on our brand architecture. In addition to providing guidance on how to feature a secondary brand in an intuitive way across our BlackRock.com site experiences.
November 2020
Live style guide updates
New event + webinar banner
- We have released a brand-new event + webinar component! In the past year, BlackRock has experienced an increase in demand for their events and webinars. As a response, we have introduced this component to help serve marketers needs in conveying high-level information about upcoming events and webinars on our site. The primary purpose of this component is to drive users to register to either an event or webinar.
New key points
- Not so long ago, we released a new key points component! We built this component to help marketers highlight the salient points being made within an article or a general content piece. This component will be helpful in setting up the tone for a content piece and breaking down the main points or arguments a user should walk away with.
Component accessibility
- We have introduced a new component accessibility section to the live style guide to provide guidance on how to create accessible experiences for all our users across our webpages. As a global firm, we must adhere to ADA compliance WCAG 2.0 Level AA. This section is designed to give you an overview of accessibility as it relates to the component system but does not cover all aspects of it.
Related material updates
- The Related material component is used to present, and link out to, any combination of 3 content types: Insight-oriented tiles, related link lists, or product/fund tiles. We have updated the rules and recommendations section to reflect the latest updates and have provided marketers with a better picture on the different variations available for use.
Paragraph updates
- The paragraph component is designed to help compose structured pages, and highlight information like data points. We have updated the paragraph component section to reflect the latest updates and better educate users on what’s possible.
August 2020
Live style guide updates
Typography
- To give the best possible reading experience across devices, certain styles in our typographic scale adjusts across our breakpoints. Recently, we have updated the Typography section to reflect the latest updates we have introduced across our device breakpoints.
Iconography
- We have introduced a new section to the Iconography section featuring a font awesome matrix. To ensure consistency across products and interactions, we encourage marketers and publishers to leverage the icons listed within the matrix. All icons are part of the Font Awesome 5 Pro font toolkit.
Related material
- We have updated the Related materials section to reflect the number of enhancements recently introduced, including visual updates, a new two tile option, new background color options, and an optional CTA option. Our latest enhancements are intended to better assist marketers in calling attention to relevant content that might interest our users whether that be insights, related links, and/or products.
June 2020
TeamSite components
- A few months ago we released the first version of the Eloqua form component. This component aims to help our end users to easily subscribe to marketing materials, newsletters, and more within a page.
- In the latest release, we have introduced a few enhancements to the component, incorporating both the use of an accordion and a select all functionality on mobile and tablet. This will enable end users to easily navigate the Eloqua form on smaller devices, while being able to easily select their preferences so we could adapt content to their needs.
- We have introduced enhancements to the accordion component to enable marketers and publishers to leverage the option of a disclosure box, which shows end users disclosures and provides them with the ability to expand upon the disclosure text to read more.
Live style guide updates
- We've created a new, high-impact image component with a lot of options to better display complex charts, graphs, and datapoints. We’ve added a new page within the Components section to provide a better understanding of the many features we’ve baked into this new Image component.
- We’ve introduced a new Character count cheat-sheet page to the Live Style Guide. The purpose of this page is to help users easily find a consolidated set of character counts for the most used components. In in an attempt to simplify, we are not providing every detail of the component, so always refer back to each respective component page for all the necessary specs and rules.
February 2020
TeamSite components
- We've released the first version of the Eloqua form component! This component will allow end users to easily subscribe to marketing materials, newsletters, and more within the page. Developing this component as a part of our Design System will ensure consistent appearances and patterns throughout our site and reduce development effort for the Eloqua team. We've built out appearances for BlackRock, iShares, and Aladdin sites to allow for usage across our sites.
- To reduce the height of pages with many authors, we've reduced the size of bio images within the 2 and 3 author appearances. The single author appearance will remain the same. These updates have been automatically applied and no change is required by content owners.
Live style guide updates
SEO Guidelines
We've added a new SEO guidelines section to the Live Style Guide. These guidelines will help you understand how to implement SEO best practices to drive more users to your content and improve usability of the page.
Responsive grid updates
We are in the process of updating the entire Live style guide to account for our new responsive grid. This affects the entire style guide site, and is happening on a rolling basis until all of our pages are updated. Some pages are being redesigned to account for updated foundational rules and a more thoughtful UX approach.
Stay tuned for a list of enhanced pages in the coming months.
September 2019 - January 2020
Responsive site rollout
Fully responsive component enhancements
Over the last 5 months we have rolled out an entirely new fluid grid system, which entailed reworking every single VI-16 component in our library to be fully responsive across all breakpoints.
We have made numerous adjustments along the way to better align to our new brand VI rules. Design enhancements include bolder typography, left-justified headlines, realignment of all content across our new grid (no longer centered in the browser), and responsive images and videos to name a few.
TeamSite components
All VI-16 components
As stated above, all of our components have gone through an extensive enhancements to work across our new grid system to give our users a more consistent experience.
Along with the foundational work to make our components fully responsive, we have mad a few core enhancements:
- It now allows for a no image appearance. This appearance cannot be mixed with images, you must keep the appearance consistent throughout.
- We have increased the character limit to 70 characters. This update will automatically reflect on existing instances of the component and should improve the user experience on the page.
- Updated the image size to 860x600px for responsive scaling.
- Fixed the height of the no image option of the hero banner so that it takes up less space on the page.
- Added the option to use the eyebrow as the H1. This is helpful if you want to use the banner on a more general page like an Insights hub and want to use the eyebrow as the H1 since it’s more indicative of the page content.