Type

Goodkit Exclusive

Typography utilities to control text size, color and font family.

Bootstrap Documentation

Font family

Additional font family utilities.

Font family Serif

Font family Sans Serif

<h1 class="font-serif">Font family Serif</h1>
<h1 class="font-sans-serif">Font family Sans Serif</h1>

Sizing

Additional font size utilities.

Font size h2

Font size h3

Font size lg

Font size sm

Font size xs

Font size xxs

<p class="fs-2">Font size h2</p>
<p class="fs-3">Font size h3</p>
<p class="fs-lg">Font size lg</p>
<p class="fs-sm">Font size sm</p>
<p class="fs-xs">Font size xs</p>
<p class="fs-xxs">Font size xxs</p>

Colors

Additional color utilities.

Text white 20

Text white 60

Text white 80

Text gray 300

Text gray 500

Text gray 600

Text gray 800

<p class="text-white-20">Text white 20</p>
<p class="text-white-60">Text white 60</p>
<p class="text-white-80">Text white 80</p>
<p class="text-gray-300">Text gray 300</p>
<p class="text-gray-500">Text gray 500</p>
<p class="text-gray-600">Text gray 600</p>
<p class="text-gray-800">Text gray 800</p>

Underline

Multicolor text underline utilities.

A modern design system for your new SaaS platform.

Investing is Easy. Use MoneyBot.

<h1>A modern design system for your new <span class="text-underline-warning">SaaS platform</span>.</h1>
<h1>Investing is Easy. <span class="text-underline-primary-light">Use MoneyBot</span>.</h1>

Social colors

Additional social color utilities. You can extend the list of social colors by extending the $brand-colors SCSS map.

Stripe

Digital ocean

Airbnb

Coinbase

Netflix

Dribbble

Pinterest

Instagram

<p class="text-stripe">Stripe</p>
<p class="text-digital-ocean">Digital ocean</p>
<p class="text-airbnb">Airbnb</p>
<p class="text-coinbase">Coinbase</p>
<p class="text-netflix">Netflix</p>
<p class="text-dribbble">Dribbble</p>
<p class="text-pinterest">Pinterest</p>
<p class="text-instagram">Instagram</p>

Line height

Additional line height utilities.

  • .lh-1 - sets the line height to 1.