Style Guide

Typography

Headings

This site uses three H1 styles, each with a different font size based on the page’s depth in the site hierarchy (up to three levels). The H1 tag should only be use on the page title in the header section. H2–H6 tags can be used freely throughout the page content as needed.

These settings are the same for all heading styles.

  • Font Family: Erbaum
  • Font Weight: 700 (Bold)
  • Text Transform: Uppercase
  • Letter Spacing: 0px

H1 - Level 1 Page Title

H1 - Level 2 Page Title

H1 - Level 3 Page Title

H2

  • Font Size: 2rem (32px)
  • Line Height: 1.2em

H3

  • Font Size: 1.5rem (24px)
  • Line Height: 1.2em

H4

  • Font Size: 1rem (16px)
  • Line Height: 1.2em
H5
  • Font Size: 1rem (16px)
  • Line Height: 1.2em
H6
  • Font Size: 1rem (16px)
  • Line Height: 1.2em

Body Copy

Default settings for all text that is not otherwise styled.

  • Font Family: Montserrat
  • Font Size: 1rem
  • Font Weight: 400 (Normal)
  • Line Height: 1.5em

Example

Leverage agile frameworks to provide a robust synopsis for high-level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User-generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low-hanging fruit to identify a ballpark value-added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. Podcasting operational change management inside of workflows to establish a framework.

Menus

Main Menu

Floating Menu

Default settings for the floating sub-menu that shows on select pages of the site such as Products pages.

Floating Menu – Level 1

  • Font Family: Erbaum
  • Font Size: 0.75rem
  • Font Weight: 400 (Normal)
  • Transform: Uppercase
  • Line Height: 1.5em

Floating Menu – Level 2

  • Font Family: Erbaum
  • Font Size: 0.75rem
  • Font Weight: 400 (Normal)
  • Transform: Normal
  • Line Height: 1.5em

Floating CTA

Default settings for the floating CTA buttons (Find An Integrator and Live Help) that are present on all pages of the site.

Floating CTA

  • Font Family: Erbaum
  • Font Size: 1rem
  • Font Weight: 400 (Normal)
  • Transform: Uppercase

Primary CTA

Settings for Primary CTA.

Typography

  • Font Family: Erbaum
  • Font Size: 1rem
  • Font Weight: 400 (Normal)
  • Transform: Uppercase

Colors

  • Text: Primary CTA Text (#232729)
  • Background: Primary CTA Background (#FFDD00)

Example

Secondary CTA

Settings for Secondary CTA

  • Font Family: Erbaum
  • Font Size: 1.8rem
  • Font Weight: 700 (Bold)
  • Transform: Uppercase

Colors

  • Text: Secondary CTA Text (#FFFFFF)
  • Background: Secondary CTA Background (#5F9DD4)

Example

Tertiary CTA

Settings for Tertiary CTA.

Typography

  • Font Family: Montserrat
  • Font Size: 1rem
  • Font Weight: 400 (Normal)

Colors

  • Text: Tertiary CTA Text (#FFFFFF)
  • Background: Tertiary CTA Background (#395B46)

Example

Support CTA

Settings for Support CTA.

Typography

  • Font Family: Erbaum
  • Font Size: 1.5rem (24px)
  • Font Weight: 700 (Bold)
  • Line Height: 1.5 em

Example

Read More Link

Settings for Read More links. Read More links are primarily used on Product Family pages in the Overview section when the column with copy in it is longer than the column with images in it. Typography
  • Font Family: Erbaum
  • Font Size: 1.5rem
  • Font Weight: 700 (Normal)
  • Transform: Uppercase
Example An example is on the Live Roller Conveyor page.

Locate an Integration Partner

Looking to buy conveyor? You’ve come to the right place. At Hytrol, we’ve been dedicated to selling conveyor exclusively through our Integration Partner Network for more than 75 years. You can find any of our integration partners using the map or the form below. If you aren’t sure where to start, use the “Match Me” button to have a Hytrol business expert contact you and put you in touch with the partner who is right for your project.