Typography


Headings


h1 .h1--huge

H1 Huge Barlow Condensed Semibold

h1, .h1

H1 Barlow Condensed Semibold

h2, .h2

H2 Barlow Medium

h3, .h3

H3 Barlow Condensed Bold

h4, .h4

H4 Barlow Medium

h5, .h5
H5 Barlow Medium
h6, .h6
H6 Barlow Medium
h1 .h1--huge

H1 Huge Barlow Condensed Semibold

h1, .h1, .h1--white

H1 Barlow Condensed Semibold

h2, .h2, .h2--white

H2 Barlow Medium

h3, .h3, .h3--white

H3 Barlow Condensed Bold

h4, .h4, .h4--white

H4 Barlow Medium

h5, .h5, .h5--white
H5 Barlow Medium
h6, .h6, .h6--white
H6 Barlow Medium

Paragraphs

p.large

Large paragraph .large. Friction is a highly variable quantity with a virtually unlimited number of factors influencing it. So, a common question I get in regard to friction is, “What value for coefficient of friction should I use in my calculations?” Learn More.

p

Normal paragraph. Friction is a highly variable quantity with a virtually unlimited number of factors influencing it. So, a common question I get in regard to friction is, “What value for coefficient of friction should I use in my calculations?” Learn More.

p.small

Small paragraph .small. Friction is a highly variable quantity with a virtually unlimited number of factors influencing it. So, a common question I get in regard to friction is, “What value for coefficient of friction should I use in my calculations?” Learn More.


Font Awesome

Frequently Used Icons
.fa-regular
.fa-angle-down .fa-external-link .fa-search

.fa-solid
fa-arrow-right-long .fa-xmark-large .fa-minus .fa-plus .fa-bars

.fa-brands .fa-fw .social-list__icon
.fa-facebook-f .fa-x-twitter .fa-tiktok .fa-linkedin-in .fa-instagram .fa-youtube .fa-twitch

Font Awesome - Custom Icons

.fa-kit .fa-apply .fa-kit .fa-give .fa-kit .fa-quote .fa-kit .fa-request-info .fa-kit .fa-visit

SVG Icons

Carousel-back Carousel-next Video-pause Video-play Back-to-top

Lists


Social List

.social-list



Variant for .social-list social-list--yellow

Ordered List
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Unordered List
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Description List

List Term 1
List description. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
List Term 2
List description. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.link--styled
CONNECT@NKU.COM
.link .link--styled
Styled Link
.link .link--styled .link--large
Styled Link Large
.link .link--styled .link--arrow
Styled Link with Arrow
.link .link--styled .link--large .link--arrow
Styled Link Large with Arrow
.link--styled
CONNECT@NKU.COM
.link .link--styled
Styled Link
.link .link--styled .link--large
Styled Link Large
.link .link--styled .link--arrow
Styled Link with Arrow
.link .link--styled .link--large .link--arrow
Styled Link Large with Arrow

Blockquote


.blockquote
blockquote
I am truly thankful to every Philosophy professor I ever took at NKU because learning the nuance behind philosophical thoughts and theories truly prepared me to understand the law, as well as invigorated…

.link .link--styled .d-block .pt-3 Read Brendan’s Full Story
cite
Brendan Sullivan Philosophy Major, Criminal Justice Major
.bg-black
.blockquote
blockquote
I am truly thankful to every Philosophy professor I ever took at NKU because learning the nuance behind philosophical thoughts and theories truly prepared me to understand the law, as well as invigorated…

.link .link--styled .d-block .pt-3 Read Brendan’s Full Story
cite
Brendan Sullivan Philosophy Major, Criminal Justice Major

Misc


Large Text

p.large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Small Text

p.small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


Buttons


Gray (Default)
.btn .btn-primary


Yellow
.btn .btn-secondary


Black
.btn .btn--black


Black button with arrow
.btn .btn--black .btn--arrow


Outline button
.btn .btn-outline-primary


Outline button with arrow
.btn .btn-outline-primary .btn--arrow


Gray (Default)
.btn .btn-primary


Yellow
.btn .btn-secondary


Black
.btn .btn--black


Black button with arrow
.btn .btn--black .btn--arrow


Outline button
.btn .btn-outline-primary


Outline button with arrow
.btn .btn-outline-primary .btn--arrow


Gray (Default)
.btn .btn-primary


Yellow
.btn .btn-secondary


Black
.btn .btn--black


Black button with arrow
.btn .btn--black .btn--arrow


Yellow outline button
.btn .btn-outline-secondary


Outline button reversed
.btn .btn--reverse-primary


Outline button reversed with arrow
.btn .btn--reverse-primary .btn--arrow


Colors

Brand colors are defined in scss > core > _variables.scss in the $brand-colors array map.

Primary Brand Colors

  • Black
    #000000
    $black, .bg-black, .text-black
  • Gray Dark
    #363636
    $gray-dark, .bg-gray-dark, .text-gray-dark
  • Gray Medium
    #4A4A4A
    $gray-medium, .bg-gray-medium, .text-gray-medium
  • Gray Medium Alt
    #757575
    $gray-medium-alt, .bg-gray-medium-alt, .text-gray-medium-alt
  • Gray Light
    #F6F6F6
    $gray-light, .bg-gray-light, .text-gray-light
  • Gold
    #BD8100
    $gold, .bg-gold, .text-gold
  • Yellow
    #FFC72C
    $yellow, .bg-yellow, .text-yellow
  • Yellow Light
    #FDF5DE
    $yellow-light, .bg-yellow-light, .text-yellow-light
  • White
    #FFFFFF
    $white, .bg-white, .text-white

Form Fields


Custom Form Fields

Filtering

Tables


.table
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
.table .table-striped
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Small Section

This section uses .section-small to apply small vertical padding.

Medium Section

This section uses .section-medium to apply medium vertical padding.

Large Section

This section uses .section-large to apply large vertical padding.

Huge Section

This section uses .section-huge to apply huge vertical padding.

Split Padding

This section has .section-top-large and .section-bottom-medium.

Responsive Padding

This uses .section-huge-md-up to apply huge padding at md and up.

Breakpoint-Specific Sizing

This section uses .section-top-large-xl-up and .section-bottom-small-sm-up for fine-tuned control.