a.anchor(name="typography")

h1 Typography

hr

ul(style="list-style-type: disc;")
  li
    h1 h1 - some header text

  li
    h2 h2 - some header text

  li
    h3 h3 - some header text

  li
    h4 h4 - some header text

  li
    h5 h5 - some header text

  li
    h6 h6 - some header text

  li
    time time - 10/24/2015

  li
    label label

  li this is <strong>strong</strong>

  li
    a a - this is a link

  li
    a.button.action a.button.action

  li
    p p (Lorem ipsum dolor sit amet, <br />consectetur adipiscing elit, <br />sed do eiusmod tempor incididunt ut labore)

  li
    p.error p.error

  li
    p.secondary p.secondary

- fontSizes = ['font-size-smallest', 'font-size-small', 'font-size', 'font-size-big', 'font-size-biggest']

a.anchor(name="font-sizes")

h1 <strike>Font Sizes</strike>

ul.examples.font-sizes
  - for fontSize in fontSizes
    li
      label <strike>$#{fontSize}</strike>

      .example(class=fontSize) Lorem ipsum dolor sit amet, <br />consectetur adipiscing elit, <br />sed do eiusmod tempor incididunt ut labore

- fontWeights = ['font-weight-lightest', 'font-weight-light', 'font-weight', 'font-weight-bold', 'font-weight-boldest']

a.anchor(name="font-weights")

h1 Font Weights

ul.examples.font-weights
  - for fontWeight in fontWeights
    li
      label $#{fontWeight}

      .example(class=fontWeight) Lorem ipsum dolor sit amet, <br />consectetur adipiscing elit, <br />sed do eiusmod tempor incididunt ut labore

- lineHeights = ['line-height-smallest', 'line-height-small', 'line-height', 'line-height-big', 'line-height-biggest']

a.anchor(name="line-heights")

h1 <strike>Line Heights</strike>

ul.examples.line-heights
  - for lineHeight in lineHeights
    li
      label <strike>$#{lineHeight}</strike>

      .example(class=lineHeight style="background-color:grey") Lorem ipsum dolor sit amet, <br />consectetur adipiscing elit, <br />sed do eiusmod tempor incididunt ut labore