Component library

On this page you'll find information about the various Wood Mackenzie block components, alongside examples of each and how to use them.

Hero blocks

These are the blocks that go at the top of the page.

Hero banner with form

Hero block with a form CTA and an optional area for focus paragraph text

Hero banner with video

Hero block with half- or full-width video

Lens hero block

Hero block with styles specific to Lens product pages.

Standard hero banner without form

Hero block with background image, title, supertitle, subtitle and paragraph text space.

Title + subtitle + hexagon BG

Hero block with title, subtitle and form link against a blue background

Full screen parallax hero

Create a full screen hero as a large intro into a campaign piece or content.

Copy blocks

Blocks for displaying larger amounts of text content.

Body copy

Main/Standard text block for the site. Has options for background image and ability to change styles to be specific for Lens pages.

Body copy with statistics sidebar

Text block with the option to add statistics on the right hand side.

Body copy with image

A text block that displays text on the right hand side of the page with an image on the left.

Left intro text with right copy

Text block where title and subtitle are in a column on the left, and the core text is on the right.

Narrow double body copy

Text block where the copy can be separated into two separate columns.

Statistic callout with body copy

Text block with option to add one large statistic on the left hand side. For option to add multiple statistics (albeit with swapped positioning) see the "Body Copy With Statistics" block.

Content displays

Blocks which display content in a non-standard format which provide information, but don’t necessarily direct a user anywhere.

Accordion block

A block that allows you to create an accordion that links to article pages.

Icon container block

This block is set up so that it will display a title and some intro copy that will lead to a showcase of featured content that is represented in columns, headed up in each case with an icon.

This block contains introductory title and copy, as well as a focus area that contains panel blocks. These contain an optional icon, as well as a title and copy of their own. This block is somewhat similar to the icon block, but it allows for different coloured panel blocks to be used within one area.

Spotlight container block

Block which allows creation of individual panels of text separated by a border.

Sub nav

This block allows the user to add an on page navigation type component to pages where users can click on headers and be pulled down to anchor links.

Individual components

Blocks that allow addition of components that are usually part of other blocks.

Divider block

Block that adds a dividing line.

External call-to-action block

Button with external link styling.

Title block

Block to display lone title and subtitle.

Quote blocks

Blocks to display quotes.

External quote

Block to display quotes, with option to manually input quoted individual. See "Woodmac Quote" for block with same styling, but ability to use "Person Page" as the quoted individual. See "Quote With Image" for option that allows placement of quote next to image.

Quote with image

Block to display quote with image to the right and quoted individual added manually. See "External Quote" for similar block without image alongside, or "Woodmac Quote" for similar block without image, but quoted individual is added using a "Person Page".

Woodmac quote

Block to display a quote, with quoted individual added using a "Person Page". For blocks where quoted individual can be added manually, see "External Quote" or "Quote With Image" blocks.

Video blocks

Blocks which allow the embedding of video content.

Woodmac video block

A block that allows you to display video content with text to the right, left or below.

Lens video block

Video block for embedding Wistia or Youtube content, with styling geared to Lens products.

Wistia channel block

Block which allows embedding of Wistia videos in a full page presentation. A Video plays silently in the background of full page layout, with options presented for the user to watch a video. This block uses the "Wood Mackenzie Chemicals" branding and China specific content, therefore is likely not suitable for most situations.

Image blocks

Blocks that specifically display image content.

Image carousel

A carousel that can display up to 10 images.

Image block

This block allows you to display an image that will expand once clicked to show at a larger size.

Sponsor block

Block which allows the placement of images together in a row. Generally used for Sponsors, thus the name, but can be done with any images.

Directed content

This is content that directs a user to a specific page/form etc.

Case study callout

A full width block that uses an image for a background and can display 3 bullet points to feature a case study.

Full width ad

A full width block with an image background and a choice of styles that showcases a link to another page.

Manual report callout

Block to display information about a Report product. All content about report must be manually filled in. For option where content is automatically added, see "Report Callout" block.

Related downloads

A simple block that allows for the presentation of media download links with a title.

Multi-link blocks

Blocks which can display links to multiple different pieces of non-product content.

List of pages no image

This block allows for a list of pages to be presented beneath a title and some descriptive text.

List of pages teaser image

This block displays a list of page links, which pull in the teaser information from the page you're linking as well as the teaser image that's been set up on that page.

List of product pages

Carousel Block specifically for displaying "Product Pages".

Page collection block

Block that allows links to multiple pages placed in a grid, displaying the page names and their teaser text. For a block with similar functionality that also displays a teaser image for the page, see the Industry Section Block. Is the same functionally as "Cross Reference List" although can display certain pages with a different style.

Sub landing promo section block

This block displays links to sub-landing pages in a grid configuration. Information will be pulled from the sub-landing pages' teaser fields to populate the title and text for each link.

Wall lister

Block that allows display of panels in a grid. Clicking any these items displays a panel of text content and links.

News blocks

Blocks which automatically display the latest news/articles on the site based on tagging.

Latest articles block

Block which displays the latest news articles in a grid. The number of, and type of articles displayed is configurable, as is the grid layout. This block doesn't allow the user to load in further articles. For this functionality, see the "Latest Thinking Block".

Latest thinking Block

Block that can display the latest articles and events from the site. The number of, and type of articles displayed is configurable. This block allows the user to load further articles from the past. To display articles without this option, please see the "Latest Articles Block".

Multi-product blocks

Blocks which can display links to multiple different report products on the site.

Featured reports

Block which allows you to display panels linking to individual reports. Similar to "Popular Reports" except with a different title and style.

Popular reports

Block for displaying a set of Reports. Similar to "Featured Reports" with a different title text and display style.

People blocks

Blocks specifically for displaying content from pages in the People section of site.

Group of people by business

Block which allows you to display a group of individuals based on their Business Group tag.

Lead consultant block

Block to prominently display a set of text alongside an image and link to a "Profile Page".

People display

This block allows you to display a customised selection of people profile links with a left-aligned title.

Third party embeds

Blocks which allow embedding of third party content, not including video blocks.

Ceros Block

Block which allows the embedding of Ceros content.

Flourish embed

Block for embedding Flourish content - such as graphs - using a Flourish ID.

Infogram embed

Block for embedding Infogram content - such as graphs, using an Infogram ID.

Podcast

Block to embed Woodmac podcast content from an external source, such as Soundcloud.

Readymag embed

Block to embed content from Readymag - such as presentations - using a Readymag ID.

Layout blocks

Blocks which allow you to change the layout of the blocks placed within them.

Miscellaneous

Blocks that don’t fit in any other category. A lot more specialised in use.

Our locations block

Block which displays a list of offices and pinpoints them on a map. For the most part, this is only needed for a few select pages, and shouldn't need to be added.