Select A Flavor



.c-header-xxl
The quick brown fox jumps over the lazy dog.



.c-text-xxl
The quick brown fox jumps over the lazy dog.



.c-header-xl
The quick brown fox jumps over the lazy dog.



.c-text-xl
The quick brown fox jumps over the lazy dog.



.c-header-lg
The quick brown fox jumps over the lazy dog.



.c-text-lg
The quick brown fox jumps over the lazy dog.



.c-header-md
The quick brown fox jumps over the lazy dog.



.c-text-md
The quick brown fox jumps over the lazy dog.



.c-header-sm
The quick brown fox jumps over the lazy dog.



.c-text-sm
The quick brown fox jumps over the lazy dog.



.c-header-xs
The quick brown fox jumps over the lazy dog.



.c-text-xs
The quick brown fox jumps over the lazy dog.



.c-text-heavy
.c-text-bold
.c-text-semibold
.c-text-light
.c-text-italic
.c-text-uppercase
.c-text-lowercase
.c-text-capitalize
.c-text-monospace
.c-text-underline
.c-text-strikethrough
.c-text-primary
.c-text-success
.c-text-warning
.c-text-danger


.c-text-primary-0
.c-text-primary-1
.c-text-primary-2
.c-text-primary-3
.c-text-primary-4
.c-text-primary-5
.c-text-primary-6
.c-text-primary-7
.c-text-primary-8
.c-text-primary-9

.c-text-success-0
.c-text-success-1
.c-text-success-2
.c-text-success-3
.c-text-success-4
.c-text-success-5
.c-text-success-6
.c-text-success-7
.c-text-success-8
.c-text-success-9

.c-text-warning-0
.c-text-warning-1
.c-text-warning-2
.c-text-warning-3
.c-text-warning-4
.c-text-warning-5
.c-text-warning-6
.c-text-warning-7
.c-text-warning-8
.c-text-warning-9

.c-text-danger-0
.c-text-danger-1
.c-text-danger-2
.c-text-danger-3
.c-text-danger-4
.c-text-danger-5
.c-text-danger-6
.c-text-danger-7
.c-text-danger-8
.c-text-danger-9

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Functions and mixins demos


@include font-header();

@include font-header(xxl);

@include font-header(xl);

@include font-header(lg);

@include font-header(md);

@include font-header(sm);

@include font-header(xs);

@include font-body();

@include font-body(xxl);

@include font-body(xl);

@include font-body(lg);

@include font-body(md);

@include font-body(sm);

@include font-body(xs);

@include font-body(xl, $size-only: true);
Function example with line-height, font-weight, and font-size
Output header font family and weight settings only
Output body font family and weight settings only