Headlines:

  • .headline-1

    • Font: Aleo, Regular

    • Size: 32px

    • Color: 100/123/95 - #647b5f

    • Used for: Front Page Hero Only

  • .headline-2

    • Font: Aleo, Regular

    • Size: 32px

    • Color: 219/116/71 - #db7447

    • Used for: Highest level headline for most landing pages

  • .headline-3

    • Font: Aleo, Regular

    • Size: 48px

    • Color: white - #fff

    • Used for: White text for dark images in hero sliders

  • .headline-4 

    • Font: Aleo, Regular

    • Size: 48px

    • Color: black - #000

    • Used for: Black text for lign images in hero sliders

  • .headline-5

    • Font: Sarabun

    • Size: 32px

    • Color: 100/123/95 - #647b5f

    • Used for: Together Campaign page headline

  • .headline-6

    • Font: Sarabun

    • Size: 32px

    • Color: 219/116/71 - #db7447

    • Used for: Highest level headline for most landing pages

  • .headline-7 NEW

    • Font: Aleo, Regular

    • Size: 32px

    • Color:  102/102/102 - #666666

    • Used for: lower page headlines

 

Subheads:

  • .subhead-1

    • Font:Aleo Regular

    • Size:16px

    • Color:White - #fff

    • Used for: Additional text on hero image sliders

  • .subhead-2

    • Font: Aleo

    • Size:16px

    • Color:Black - #000

    • Used for: additional text on hero image sliders

  • .subhead-3

    • Font: Aleo Regular

    • Size: 20px

    • Color:129/129/129, #818181

    • Used for:the text on the illustrations at bottom of home page

  • .subhead-4

    • Font: Sarabun Regular

    • Size: 20px

    • Color: 129/129/129, #818181

    • Used for:subheadlines for news items in carousal/cards and call out sub titles in 4 gray boxes on Careers page

Body Text:

  • .lead

    • Font: Sarabun

    • Size: 16px

    • Color: black - #000

    • Used for: Leading paragraph with call to action

  • .display-1

    • Font: Sarabun

    • Size: 14px

    • Color: black - #000

    • Used for: main body text

  • .display-2

    • Font: Aleo

    • Size: 16px

    • Color: 192/116/71 - #db7447

    • Used for:call to actions, taglines, within body copy most of site

  • .display-3

    • Font:

    • Size:

    • Color:

    • Used for:

  • .display-4

    • Font:

    • Size:

    • Color:

    • Used for:

  • .display-5

    • Font:

    • Size:

    • Color:

    • Used for:

Buttons:

  • .button-1

    • Font: Sarabun

    • Size:

    • Color: White - #fff

    • Used for: buttons on images

  • .button-2

    • Font: Sarabun

    • Size:

    • Color: White - #fff

    • Used for: Gray buttons with white text used on Read more and other single buttons on site

  • .button-3

    • Font:

    • Size:

    • Color:

    • Used for:

Hero Images

This is 3 different Hero Image Components placed in a 3 column page layout.