12.1 #Typography.headings Headings
All headings. Styled with duk-headings().
This is a heading 1
This is a Heading 2
This is a Heading 3
This is a Heading 4
This is a Heading 5
This is a Heading 6
Markup
<h1>This is a heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>styles/scss/base/_typography.scss, line 14
12.2 #Typography.text Text
Basic text styles including links, strong, underline, em.
This is lead text
Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie roll jujubes.
This is description text
Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder chocolate cake pudding. Candy fruitcake jelly beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy.
Markup
<p class="lead">This is lead text</p>
<p>Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie
dessert sugar plum toffee <a href="#">marzipan bonbon sesame</a> snaps halvah.
Macaroon croissant sweet cheesecake. <em>Croissant icing</em> muffin. Gingerbread
pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear
claw <u>tootsie roll jujubes</u>.</p>
<p class="description">This is description text</p>
<p>Jelly donut dragée sweet <a href="#">roll</a> sesame snaps <strong>tootsie
roll</strong>. Halvah powder chocolate cake pudding. Candy fruitcake jelly
beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer.
<em>Danish cake candy</em>.</p>styles/scss/base/_typography.scss, line 31
12.3 #Typography.text-body Body text
Default typography for any body text content. Applied to all generic field body fields rather than as a sitewide default.
Heading 2
Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie roll jujubes.
Heading 3
Jelly donut dragée sweet roll sesame snaps tootsie roll. Halvah powder chocolate cake pudding. Candy fruitcake jelly beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer. Danish cake candy.
Markup
<div class="text-body">
<h2>Heading 2</h2>
<p>Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie
dessert sugar plum toffee <a href="#">marzipan bonbon sesame</a> snaps halvah.
Macaroon croissant sweet cheesecake. <em>Croissant icing</em> muffin. Gingerbread
pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear
claw <u>tootsie roll jujubes</u>.</p>
<h3>Heading 3</h3>
<p>Jelly donut dragée sweet <a href="#">roll</a> sesame snaps <strong>tootsie
roll</strong>. Halvah powder chocolate cake pudding. Candy fruitcake jelly
beans cake. Marshmallow jelly apple pie cookie. Wafer chupa chups powder wafer.
<em>Danish cake candy</em>.</p>
</div>styles/scss/objects/_text-body.scss, line 2
styles/scss/tools/_typography.scss, line 1
12.4.1 #Typography.mixins.responsive-description responsive-description
Applies a description style that is responsive.
.my-description {
@include responsive-description();
}
styles/scss/tools/_typography.scss, line 36
12.4.2 #Typography.mixins.responsive-heading responsive-heading
Applies a heading style that is responsive.
.my-heading {
@include responsive-heading();
}
styles/scss/tools/_typography.scss, line 7
styles/scss/objects/_typography.scss, line 1
12.5.1 #Typography.objects.responsive-description responsive-description
Applies a heading style that is responsive.
.my-heading {
@extent %responsive-description;
}
<div class="responsive-description">My description</div>
Markup
<div class="responsive-description">Ipsa semper do cursus, autem excepteur voluptate pretium proin nisl, corporis. Auctor? Architecto? Cras metus </div>styles/scss/objects/_typography.scss, line 29
12.5.2 #Typography.objects.responsive-heading responsive-heading
Applies a heading style that is responsive.
.my-heading {
@extent %responsive-heading;
}
<div class="responsive-heading">My Heading</div>
Markup
<div class="responsive-heading">My Heading</div>styles/scss/objects/_typography.scss, line 7