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
32px / 2.462em
Bembo Regular
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 -->
|
24px / 1.846em
Bembo Regular
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 -->
|
17px / 1.30769em
Bembo Regular
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 -->
|
15px / 1.154em
Bembo Regular
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 -->
|
13px / 1em
Bembo Bold
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 -->
|
13px / 1em
Bembo Bold
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 -->
|
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 -->
|
All links and/or CTAs's are pink to indicate that they are active areas.
<!-- cta container starts -->
<div class="d-container_12 d-grid_3">
<a href="#" class="cta">Call to Action</a>
<p>13px / 1em</p>
</div>
<!-- cta container ends -->
|