Documentation and examples for typography, including global settings, headings, body text, lists, and more.
Startkit sets basic global display, typography, and link styles. When more control is needed, check out
the
assets/scss/base/_typography.scss file.
font-size
is 16px.$regular-font, $headline-font, $font-size-base,
and $line-height-base
attributes as our typographic base applied to the <html>.$link-color.$page-bg to set a background-color on the
<html>
(#fff by default).These styles can be found within _fonts.scss, and the global color variables are defined
in _colors.scss.
Make sure to set $font-size-base in px.
All HTML headings, <h1> through <h6>, are available.
| Heading | Example |
|---|---|
<h1></h1> | h1. Heading |
<h2></h2> | h2. Heading |
<h3></h3> | h3. Heading |
<h4></h4> | h4. Heading |
<h5></h5> | h5. Heading |
<h6></h6> | h6. Heading |
<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
h1. Heading
h2. Heading
h3. Heading
h4. Heading
h5. Heading
h6. Heading
<p class="h1">h1. Heading</p>
<p class="h2">h2. Heading</p>
<p class="h3">h3. Heading</p>
<p class="h4">h4. Heading</p>
<p class="h5">h5. Heading</p>
<p class="h6">h6. Heading</p>
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
Display headings are configured inside assets/scss/base/_typography.scss file.
Svi button tipovi iz dizajn sistema — btn-magnetic varijante i utility dugmad.
.btn-magnetic--orange
.btn-magnetic--ghost-light
.btn-magnetic.btn-magnetic
.btn-magnetic--ghost
.btn-magnetic--orange.btn--nav
.btn--nav.btn--nav-light.btn--filter .btn--filter.is-active.btn--view .btn--view.is-active.btn--share.btn--zoom