icon account icon cash icon cart icon cart icon search main arrow arrow check icon camera icon light icon audio icon computer icon storage icon discount icon facebook icon twitter icon linkedin icon vimeo icon youtube icon instagram icon google plus icon share icon email icon print icon time icon phone icon email-m icon marker-m icon pdf icon remove icon comment icon out icon-status icon-star icon-switch pie-chart line-chart icon-user icon-user-1 icon-warning icon-heart expand-arrow-1 expand-arrow-2 icon-upload icon-download icon-none icon-date-scheduled icon-date-available icon-is-hazardous

Heading Style Guide

This page is for figuring out when to use the various heading styles to match the style guide established by the BFM design team. View the page on the frontend of the site to see how the headings look when applied. Do not rely on the CMS page view to do this.

Note that the heading styles include set amounts of space between the heading text and the paragraph below it. You do not need to add any extra space before or after the heading.

H1 Heading Style

H1 styles are used for the text that goes over the page's banner. Examples are the Support and Buy pages. Since this is the highest level heading it should only be used for these page titles, not for any heading in the body of the page. There is other CSS formatting applied in these banner so the text does not look exactly the same as on this page, however the code shows that is an H1.

H2 Heading Style

I haven't found an example of where this is used.

H3 Section HEADING

This is the style to use in blogs and content pages when you want to set off a section. Here is the design example. It is also the style to use at the start of a landing page for the title.

H4 Heading Style

This is used in content Lego blocks as subheading, but in those blocks it looks different than it does here - it is not all caps.

Another version of the H4 style is used for related products on blogs / articles.

Can this be used in T5, T6, or T11 pages in the main content area?

H5 Heading Style

This style is used for sub-headings on Content Landing (T6) pages. Here is the design example. "We believe in making production easier for professionals working at all levels of the industry," is in H5. it is also used for intro text for inline lists. These are the only places it style should be used.

H6 Heading Style

The H6 heading includes a gray line. It is only used for specially styled secion blocks, and it should not be used in page copy.