Grace UI Kit
  • Grace - Modern & Minimalistic UI Kit
  • Getting Started
  • File Structure
  • Components
    • Buttons
    • Cards
    • Dropdown
    • Forms
    • Google Maps
    • Headers
    • Navigation
    • Typography
  • Pages
  • Plugins
  • Credits
  • Support
Powered by GitBook
On this page
  • Options
  • Colors
  1. Components

Typography

PreviousNavigationNextPages

Last updated 6 years ago

Options

The typography for the Grace UI Kits makes use of two font styles: and . If you want to use one or the other, you must specify the class .montserrat or .libre. Both fonts are available for free from Google Fonts and need to be imported in the head section of your page.

Here is an example for the Libre headers:

<div class="libre">
    <h1>Headline 1</h1>
    <p class="sub-text">60px</p>
    <h2>Headline 2</h2>
    <p class="sub-text">46px</p>
    <h3>Headline 3</h3>
    <p class="sub-text">34px</p>
    <h4>Headline 4</h4>
    <p class="sub-text">30px</p>
    <h5>Headline 5</h5>
    <p class="sub-text">24px</p>
    <h6>Headline 6</h6>
    <p class="sub-text">18px</p>
</div>

Colors

We have added 2 new classes for text colors .text-pinkish-tan and .text-navy.

<p class="text-pinkish-tan">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p class="text-navy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

If you want to see more examples and properties please check the official

Bootstrap Documentation
Montserrat
Libre Baskerville