Grid

    
      <div class="row12">
        <div class="span4">
        </div>
        <div class="span4">
        </div>
        <div class="span4">
        </div>
      </div>
    
    

Typography

Guidelines:

  • Use available CSS classes whenever possible
  • Use em for font-size value
  • Use px for line-height value
  • Be mindful of font-sizes in nested elements
  • If needed, reset font-sizes for a nested container by using the base font-size 10px

page-title (H1)

Baseline

  • Size: 4.2 em
  • Line Height: 50px
  • Color: #555555
  • Top Margin: 10px
  • Bottom Margin: 9px

Under 600 Breakpoint Overrides

  • Size: 2.8 em
  • Line Height: 32px

Secondary Heading (H2)

Baseline

  • 3.2 em; line-height 42 px
  • color# 8f4399
  • Color: #555555

Under 600 Breakpoint Overrides

  • size: 2.6 em;
  • line-height: 36 px

Slideshow Overrides

  • size: 2.0 em;
  • line-height: 30 px

Other classes to style content elements:

  • hl-content-copy
  • hl-content-link
  • hl-primary-heading
  • hl-secondary-heading
  • hl-tertiary-heading
Examples:
Page Title
General content copy
Primary Heading
SecondaryHeading
TertiaryHeading
    <span class="page-title">Page Title</span>
    

Forms

    <input type="text" class="hl-input-text" name="lastname" />
    

Buttons

    <button class="primary-button">Search</button>
    

Font Icons

    <span class="hl-icon-estethoscope"></span>
    

Colors

#8f4399
#7c3886
#6b2d74
#bc86b4
#e2d0e2
#f2ebf2
#faf8f7
#00abc7
#0396ae
#008297
#86d0ea
#d4e4ed
#eef5fb
#f5fafc
#7dc248
#6b9944
#478957
#adce91
#cee5b7
#e4f1de
#f9fff5
#f6931f
#dd2b0e
#d61772
#ffcf7b
#f9f2c7
#fffce0
#fcfbf2

Tips and Tricks

  • Please use !important as a last resort.
  • If you are having trouble overriding selectors, use more specific patterns. for example: .hl input.hl-my-class-name.
  • Please use this pattern when creating CSS class names: Start with "hl"; Limit the number of words to five; Example: hl-primary-heading
  • Use our StyleGuide CSS classes as much as possible.