Typography
Documentation and examples for typography, including global settings,
headings, body text, lists, and more.
Global settings
Startkit sets basic global display, typography, and link styles. When more control
is needed, check out
the
assets/scss/base/_typography.scss
file.
- For a more inclusive and accessible type scale, the default root
font-size
is 16px
.
- Use the
$regular-font
, $headline-font
,
$font-size-base
,
and $line-height-base
attributes as our typographic base applied to the <html>
.
- Set the global link color via
$link-color
.
- Use
$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.
Headings
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>
Display headings
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.
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
<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.
Button types
get_partial('components/button', [
'class' => 'btn--solid',
'href' => '#',
'buttonText' => 'Solid Button'
]);
get_partial('components/button', [
'class' => 'btn--solid btn--primary',
'href' => '#',
'buttonText' => 'Primary Solid Button'
]);
get_partial('components/button', [
'class' => 'btn--outline',
'href' => '#',
'buttonText' => 'Outline Button'
]);
get_partial('components/button', [
'type' => 'button',
'buttonText' => 'Type button'
]);