typography

/* Each heading has it's own mixin */
@include h1($color);
@include h2($color);
@include h3($color);
@include h4($color);
@include h5($color);
@include h6($color);

/* Paragraph get's one too 🤙 */
@include p($color);

Description

For each heading and paragraph settings defined in Design > Fonts, we generate a mixin that can be called to recreate all of heading's settings.

These mixins are helpful when you don't have access to change DOM elements, or when you want to visually alter the size of a heading without losing the semantic DOM hierarchy.

Parameters

$color (color)
The color you want the heading to be.
Default: null

Return

(CSS) Styles to replicate specified typographic element.

Examples

Change heading 2 to appear like a heading 5

.foo h2 {
  @include h5();
}