Typography
Default Usage
By default we apply margin to the bottom of all of the basic typograhical elements. This allows us to establish a more clear vertical rhythm to enhance readibility.
To learn how to remove this margin see below.
<h1 class="go-heading-1">Heading 1</h1>
<h2 class="go-heading-2">Heading 2</h2>
<h3 class="go-heading-3">Heading 3</h3>
<h4 class="go-heading-4">Heading 4</h4>
<h5 class="go-heading-5">Heading 5</h5>
<h6 class="go-heading-6">Heading 6</h6>
<p class="go-body-copy">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit amet repudiandae deserunt voluptas reprehenderit tempora!
Eveniet sunt itaque molestias obcaecati, quasi sit quod deleniti iure incidunt repellat ipsam nam dolore!
</p>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit amet repudiandae deserunt voluptas reprehenderit tempora! Eveniet sunt itaque molestias obcaecati, quasi sit quod deleniti iure incidunt repellat ipsam nam dolore!
Removing Margin
The default heading margin can be removed by adding the go-heading--no-margin modifier class to any heading.
The same styles can be applied on body copy by adding the body-copy--no-margin modifier class to any paragraph.
<h3 class="go-heading-3 go-heading--no-margin">
Heading without margin
</h3>
<h4 class="go-heading-4 go-heading--no-margin">
Heading without margin
</h4>
<p class="go-body-copy go-body-copy--no-margin">
Body copy without margin
</p>
Heading with margin
Heading with margin
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Heading without margin
Heading without margin
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?