Main Elements

Visual Examples

Below are the different font types and styles that are available for use.


Display 1

3em / 3.75em

48px / 60px

MMC Display Bold

Display 2

2.625em / 3.125em

42px / 50px

MMC Display Bold

Heading 1

2.25em / 35em

36px / 48px

MMC Display Bold

Heading 2

1.875em / 2.5em

30px / 40px

MMC Display Bold

Heading 3

1.5em / 2.125em

24px / 34px

MMC Display Bold

Heading 4

1.375em / 1.625em

22px / 26px

MMC Display Bold

Heading 5

1.25em / 1.5em

20px / 24px

MMC Display Bold

Heading 6

1.125em / 1.375em

18px / 22px

MMC Display Bold

Sub-Heading 1

1.5em / 1.875em

24px / 30px

MMC Display Regular

Sub-Heading 2

1.375em / 1.675em

22px / 26.8px

MMC Display Regular

Sub-Heading 3

1.25em / 1.5em

20px / 24px

MMC Display Regular

Sub-Heading 4

1.125em / 1.375em

18px / 22px

MMC Display Regular

Lead Paragraph

1.125em / 1.625em

18px / 26px

Noto Sans Bold

Body Copy

1em / 1.5em

16px / 24px

Noto Sans Regular

Footer Copy

0.875em / 1.375em

14px / 22px

Tracking: 0px

Noto Sans Regular

Code Usage

Below are code snippets for each of the type styles shown above.


Display 1 (heading tag)
									

Display 1

Display 1 (other elements)
									Display 1
								
Display 2 (heading tag)
									

Display 2

Display 2 (other elements)
									Display 2
								
Heading 1 (heading tag)
									

Heading 1

Heading 1 (other elements)
									Heading 1 
								
Heading 2 (heading tag)
									

Heading 2

Heading 2 (other elements)
									Heading 2
								
Heading 3 (heading tag)
									

Heading 3

Heading 3 (other elements)
									Heading 3
								
Heading 4 (heading tag)
									

Heading 4

Heading 4 (other elements)
									Heading 4
								
Heading 5 (heading tag)
									
Heading 5
Heading 5 (other elements)
									Heading 5
								
Heading 6 (heading tag)
									
Heading 6
Heading 6 (other elements)
									Heading 6
								
Sub-Heading 1 (heading tag)
									

Sub-Heading 1

Sub-Heading 1 (other elements)
									Sub-Heading 1
								
Sub-Heading 2 (heading tag)
									

Sub-Heading 2

Sub-Heading 2 (other elements)
									Sub-Heading 2
								
Sub-Heading 3 (heading tag)
									

Sub-Heading 3

Sub-Heading 3 (other elements)
									Sub-Heading 3
								
Sub-Heading 4 (heading tag)
									

Sub-Heading 4

Sub-Heading 4 (other elements)
									Sub-Heading 4
								
Lead Paragraph (any tag)
									

Lead Paragraph

Body Copy (any tag)
									

Body Copy

Footer Copy (any tag)
									

Footer Copy

Alternative Type Elements

Below are the different type elements that are available for use within the styleguide.

Links

Visual Example

This is a paragraph tag that contains both normal links as well as tooltip links.

Code Usage

Normal Links
Tooltip Links

Block Quotes

Visual Example

Velit tempor elit sit labore dolore. Laborum enim eu id sunt sint eiusmod. Lorem consequat dolore tempor nostrud tempor voluptate dolor aliquip cupidatat. Lorem dolor duis et duis non.

Velit tempor elit sit labore dolore. Laborum enim eu id sunt sint eiusmod. Lorem consequat dolore tempor nostrud tempor voluptate dolor aliquip cupidatat. Lorem dolor duis et duis non.

Velit tempor elit sit labore dolore. Laborum enim eu id sunt sint eiusmod. Lorem consequat dolore tempor nostrud tempor voluptate dolor aliquip cupidatat. Lorem dolor duis et duis non.

John Doe, Expert

Code Usage

								

Velit tempor elit sit labore dolore. Laborum enim eu id sunt sint eiusmod. Lorem consequat dolore tempor nostrud tempor voluptate dolor aliquip cupidatat. Lorem dolor duis et duis non.

Velit tempor elit sit labore dolore. Laborum enim eu id sunt sint eiusmod. Lorem consequat dolore tempor nostrud tempor voluptate dolor aliquip cupidatat. Lorem dolor duis et duis non.

Velit tempor elit sit labore dolore. Laborum enim eu id sunt sint eiusmod. Lorem consequat dolore tempor nostrud tempor voluptate dolor aliquip cupidatat. Lorem dolor duis et duis non.

John Doe, Expert

Superscript & Subscript Text

Visual Example

<sup>: Today's date is the 10th September

This is a paragraph with superscript text.

<sub>: HC2 + 3H2O = 2H2C + 3OH

This is a paragraph with superscript text.

Code Usage

Superscript Text
										 

This is a paragraph with superscript text.

Subscript Text
					 					

This is a paragraph with subscript text.

Helper Classes

Below are the different helper classes that are available for use within the styleguide.

Text Alignment

Visual Example

Left-Aligned Text

This is a standard paragraph tag that has left aligned text. This is a standard paragraph tag that has left aligned text. This is a standard paragraph tag that has left aligned text. This is a standard paragraph tag that has left aligned text. This is a standard paragraph tag that has left aligned text. This is a standard paragraph tag that has left aligned text. This is a standard paragraph tag that has left aligned text.

Center-Aligned Text

This is a standard paragraph tag that has center aligned text. This is a standard paragraph tag that has center aligned text. This is a standard paragraph tag that has center aligned text. This is a standard paragraph tag that has center aligned text. This is a standard paragraph tag that has center aligned text. This is a standard paragraph tag that has center aligned text.

Right-Aligned Text

This is a standard paragraph tag that has right aligned text. This is a standard paragraph tag that has right aligned text. This is a standard paragraph tag that has right aligned text. This is a standard paragraph tag that has right aligned text. This is a standard paragraph tag that has right aligned text. This is a standard paragraph tag that has right aligned text.

Justified Text

This is a standard paragraph tag that has justified text. This is a standard paragraph tag that has justified text. This is a standard paragraph tag that has justified text. This is a standard paragraph tag that has justified text. This is a standard paragraph tag that has justified text. This is a standard paragraph tag that has justified text.

Code Usage

The elements within this sectioncan be used on any HTML tags such as <p>, <span>, <div>, <a>, etc.

Left-Aligned
										

Left-Aligned paragraph text

Center-Aligned
										

Center-Aligned paragraph text

Right-Aligned
										

Right-Aligned paragraph text

Justified
										

Justified paragraph text