Typography Examples


Display Typography

h1.display
Display Heading 1

h2.display
Display Heading 2

h3.display
Display Heading 3

p.display
Display Paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sapien elit, mattis vel tristique id, imperdiet at nulla. Morbi arcu eros, sodales nec mi sit amet, suscipit rhoncus erat. Donec in est dolor. Sed faucibus lacinia sem vel eleifend. Cras ac malesuada risus. Integer gravida mauris varius facilisis scelerisque. Morbi ullamcorper placerat sollicitudin.

Default Typography

h1
Heading 1

h2
Heading 2

h3
Heading 3

h4
Heading 4

h5
Heading 5
h6
Heading 6

p
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sapien elit, mattis vel tristique id, imperdiet at nulla. Morbi arcu eros, sodales nec mi sit amet, suscipit rhoncus erat. Donec in est dolor. Sed faucibus lacinia sem vel eleifend. Cras ac malesuada risus. Integer gravida mauris varius facilisis scelerisque. Morbi ullamcorper placerat sollicitudin.

p.small
Small Paragraph Text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sapien elit, mattis vel tristique id, imperdiet at nulla. Morbi arcu eros, sodales nec mi sit amet, suscipit rhoncus erat. Donec in est dolor. Sed faucibus lacinia sem vel eleifend. Cras ac malesuada risus. Integer gravida mauris varius facilisis scelerisque. Morbi ullamcorper placerat sollicitudin.

blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sapien elit, mattis vel tristique id, imperdiet at nulla. Morbi arcu eros, sodales nec mi sit amet, suscipit rhoncus erat. Donec in est dolor. Sed faucibus lacinia sem vel eleifend. Cras ac malesuada risus. Integer gravida mauris varius facilisis scelerisque. Morbi ullamcorper placerat sollicitudin.


Primary Buttons: Dark

button button__primary--dark button--big



button button__primary--dark button--small



Primary Buttons: Light

button button__primary--light button--big



button button__primary--light button--small



Call to Action: Shopping and checkout flow only

button btn-cart button__primary--maritime


Secondary Buttons: Dark

button button__secondary--dark button--big



button button__secondary--dark button--small



Secondary Buttons: Light

button button__secondary--light button--big



button button__secondary--light button--small




button btn-cart button__secondary--maritime



Text Link: Blog use


Display Typography

h1.display
Display Heading 1

h2.display
Display Heading 2

h3.display
Display Heading 3

p.display
Display Paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sapien elit, mattis vel tristique id, imperdiet at nulla. Morbi arcu eros, sodales nec mi sit amet, suscipit rhoncus erat. Donec in est dolor. Sed faucibus lacinia sem vel eleifend. Cras ac malesuada risus. Integer gravida mauris varius facilisis scelerisque. Morbi ullamcorper placerat sollicitudin.

Default Typography

h1
Heading 1

h2
Heading 2

h3
Heading 3

h4
Heading 4

h5
Heading 5
h6
Heading 6

p
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sapien elit, mattis vel tristique id, imperdiet at nulla. Morbi arcu eros, sodales nec mi sit amet, suscipit rhoncus erat. Donec in est dolor. Sed faucibus lacinia sem vel eleifend. Cras ac malesuada risus. Integer gravida mauris varius facilisis scelerisque. Morbi ullamcorper placerat sollicitudin.

p.small
Small Paragraph Text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sapien elit, mattis vel tristique id, imperdiet at nulla. Morbi arcu eros, sodales nec mi sit amet, suscipit rhoncus erat. Donec in est dolor. Sed faucibus lacinia sem vel eleifend. Cras ac malesuada risus. Integer gravida mauris varius facilisis scelerisque. Morbi ullamcorper placerat sollicitudin.

blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sapien elit, mattis vel tristique id, imperdiet at nulla. Morbi arcu eros, sodales nec mi sit amet, suscipit rhoncus erat. Donec in est dolor. Sed faucibus lacinia sem vel eleifend. Cras ac malesuada risus. Integer gravida mauris varius facilisis scelerisque. Morbi ullamcorper placerat sollicitudin.


Primary Buttons: Dark

button button__primary--dark button--big



button button__primary--dark button--small



Primary Buttons: Light

button button__primary--light button--big



button button__primary--light button--small



Call to Action: Shopping and checkout flow only

button btn-cart button__primary--maritime


Secondary Buttons: Dark

button button__secondary--dark button--big



button button__secondary--dark button--small



Secondary Buttons: Light

button button__secondary--light button--big



button button__secondary--light button--small




button btn-cart button__secondary--maritime



Text Link: Blog use