Headings

Both heading and paragraph text can be modified in various ways by using predisposed typography classes. These classes can be found in the typography, mixins, and helper sass files. Below are a few examples of these classes:


  • .sans-serif - changes the typeface to Avenir

  • .uppercase - make the font uppercase

  • .border-bottom - adds a 1px grey border bottom

  • Heading 1

    32px / 2.462em

    Font Family

    Bembo Regular

    Notes

    Used for large headlines, homepage features, and unique product pages. H1's have a border-bottom style. To remove the border-bottom style a class of no-border must be added.

      <!-- h1 container starts -->
      <div class="container_4 d-grid_3">
        <h1 class="no-border">Heading 1</h1>
        <p>32px / 2.462em</p>
      </div>
      <!-- h1 container ends -->
                

    Heading 2

    24px / 1.846em

    Font Family

    Bembo Regular

    Notes

    Used for section and module titles.

      <!-- h2 container starts -->
      <div class="d-container_12 d-grid_3">
        <h2>Heading 2</h2>
        <p>24px / 1.846em</p>
      </div>
      <!-- h2 container ends -->
                

    Heading 3

    17px / 1.30769em

    Font Family

    Bembo Regular

    Notes

    N/A

      <!-- h3 container starts -->
      <div class="d-container_12 d-grid_3">
        <h3>Heading 3</h3>
        <p>17px / 1.30769em</p>
      </div>
      <!-- h3 container ends -->
                

    Heading 4

    15px / 1.154em

    Font Family

    Bembo Regular

    Notes

    N/A

      <!-- h4 container starts -->
      <div class="d-container_12 d-grid_3">
        <h4>Heading 4</h4>
        <p>15px / 1.154em</p>
      </div>
      <!-- h4 container ends -->
                
    Heading 5

    13px / 1em

    Font Family

    Bembo Bold

    Notes

    Medium bold titles

      <!-- h5 container starts -->
      <div class="d-container_12 d-grid_3">
        <h5>Heading 5</h5>
        <p>15px / 1.154em</p>
      </div>
      <!-- h5 container ends -->
                
    Heading 6

    13px / 1em

    Font Family

    Bembo Bold

    Notes

    Small copy notes.

      <!-- h6 container starts -->
      <div class="d-container_12 d-grid_3">
        <h6>Heading 1</h6>
        <p>13px / 1em</p>
      </div>
      <!-- h6 container ends -->
                

    Paragraphs

    Paragraph tags have a 17px base size and a margin bottom of 0.33333 em's.


    Integer nec urna vel ligula adipiscing pellentesque vitae varius risus. Duis pharetra lacus lectus, sit amet congue est consequat at. Duis sit amet felis turpis. Nunc non ante ut nisi tristique vehicula sed eu arcu. Ut sit amet nisi orci.

    Duis libero urna, eleifend faucibus adipiscing non, ullamcorper at ligula. Integer vehicula magna mauris, et ornare metus consequat eu. Cras eu congue urna. Etiam venenatis mi mollis mauris lacinia suscipit. Fusce a molestie elit.

    Paragraph

    17px / 1.30769em

    Font Family

    Bembo Regular

    Notes

    Paragraphs tags serve various purposes and can be either be the sans-serif or serif typeface; font weights and font colors may also vary depending on application.

      <!-- p container starts -->
      <div class="container_4 d-grid_3">
        <p>Paragraph</p>
        <p>17px / 1.30769em</p>
      </div>
      <!-- p container ends -->