TLDR

Typography styles are not applied by default. To enable Bifrost typography styling throughout your app, wrap your application in the .bf-elements class:

<div class="bf-elements">
  <!-- Your entire app -->
  <h1>This heading will be styled</h1>
  <p>This paragraph will be styled</p>
</div>

This applies styles to all headings, paragraphs, links, lists, etc. without needing individual classes on each element. See .bf-elements and .bf-content below for more details.

Fonts

Use Satoshi for headings, and Open Sans for anything else.

They should automatically be included and applied by our css bundle (bifrost-all.css for css setup or bifrost-app.css for React).

You can either use the headers found in the documentation below (like .bf-h1 or .bf-content), or set the font explicitly through .bf-open-sans and .bf-satoshi;

<div class="bf-satoshi">The quick brown fox jumps over Satoshi</div>
<div class="bf-open-sans">The quick brown fox jumps over Open Sans</div>

Headers

<h1 class="bf-h1">H1 The quick brown fox jumps over the lazy dog</h1>
<h2 class="bf-h2">H2 The quick brown fox jumps over the lazy dog</h2>
<h3 class="bf-h3">H3 The quick brown fox jumps over the lazy dog</h3>
<h4 class="bf-h4">H4 The quick brown fox jumps over the lazy dog</h4>
<h5 class="bf-h5">H5 The quick brown fox jumps over the lazy dog</h5>

Paragraphs

• .bf-p for paragraphs
• .bf-strong for bold text
• .bf-em for italic text
• .bf-small for small (12px) font-size
• .bf-medium for medium (14px) font-size
• .bf-large for large (16px) font-size

<p class="bf-p bf-large">
  Large (regular) - The quick brown fox jumps over the lazy dog
</p>
<p class="bf-p bf-large bf-em">
  Large (italic) - The quick brown fox jumps over the lazy dog
</p>
<p class="bf-p bf-large bf-strong">
  Large (bold) - The quick brown fox jumps over the lazy dog
</p>
<p class="bf-p bf-medium">
  Medium (regular) - The quick brown fox jumps over the lazy dog
</p>
<p class="bf-p bf-medium bf-em">
  Medium (italic) - The quick brown fox jumps over the lazy dog
</p>
<p class="bf-p bf-medium bf-strong">
  Medium (bold) - The quick brown fox jumps over the lazy dog
</p>
<p class="bf-p bf-small">
  Small (regular) - The quick brown fox jumps over the lazy dog
</p>
<p class="bf-p bf-small bf-em">
  Small (italic) - The quick brown fox jumps over the lazy dog
</p>
<p class="bf-p bf-small bf-strong">
  Small (bold) - The quick brown fox jumps over the lazy dog
</p>

CSS classes

Some additional utility classes are provided for styling common elements.

• .bf-link for styling <a> tags, also see link styling
• .bf-code for inline code or keywords
• .bf-strong for bold
• .bf-em for italic
• .bf-ul, .bf-ol, and .bf-li for lists

<p class="bf-p">
  A .bf-p paragraph with some
  <small class="bf-small">.bf-small text</small>,
  <a href="#path" class="bf-link">a .bf-link</a>, and a
  <code className="bf-code">.bf-code</code>. Here's some
  <strong class="bf-strong">.bf-strong text</strong> and some
  <em class="bf-em">.bf-em emphasized text</em>
</p>

<ul class="bf-ul">
  <li class="bf-li">Unordered list</li>
  <li class="bf-li">
    .bf-li inside .bf-ul
    <ul class="bf-ul">
      <li class="bf-li">Nested</li>
      <li class="bf-li">List</li>
    </ul>
  </li>
  <li class="bf-li">Items</li>
</ul>

<ol class="bf-ol">
  <li class="bf-li">Ordered (numbered) list</li>
  <li class="bf-li">.bf-li inside .bf-ol</li>
  <li class="bf-li">Items</li>
</ol>

bf-elements

Recommended for most apps: Wrap your entire application in .bf-elements to automatically apply Bifrost typography styles to all headings, paragraphs, lists, and other elements without needing to add classes to each element individually.

This approach gives you consistent styling throughout your app without adding extra margins or spacing, making it ideal for application layouts where you want better control over spacing via gap when using <Grid>, <AutoCol>, display: flex, or display: grid etc.

The class also applies a default medium font-size (14px), so you typically won't need .bf-medium.

<div class="bf-elements">
  <h1>Styled heading without needing .bf-h1</h1>
  <p>Styled paragraph without needing .bf-p</p>
  <ul>
    <li>Styled list items without needing .bf-ul or .bf-li</li>
  </ul>
</div>

bf-content

Use for dynamic content you don't control: When rendering content from a CMS, API response, or other external source where you can't add classes to individual elements, use .bf-content instead.

This does the same as .bf-elements but also adds margins between elements, making it perfect for article-style content blocks where automatic spacing is desired.

<div class="bf-content">
  <h1>&lt;h1&gt; heading 1</h1>
  <h2>&lt;h2&gt; heading 2</h2>
  <h3>&lt;h3&gt; heading 3</h3>
  <h4>&lt;h4&gt; heading 4</h4>
  <h5>&lt;h5&gt; heading 5</h5>
  <p>
    A &lt;p&gt; paragraph with some <small>&lt;small&gt; text</small>,
    <a href="#path">&lt;a&gt; link</a>, and some <code>&lt;code&gt;</code>. Both
    <strong>&lt;strong&gt; strong</strong> and <b>&lt;b&gt; bold</b> text looks
    the same. As does <em>&lt;em&gt; emphasized</em> and
    <i>&lt;i&gt; italic</i>.
  </p>
  <ul>
    <li>Unordered list</li>
    <li>
      &lt;ul&gt; inside .bf-content
      <ul>
        <li>Nested</li>
        <li>List</li>
      </ul>
    </li>
    <li>Items</li>
  </ul>
  <ol>
    <li>Ordered (numbered) list</li>
    <li>&lt;ol&gt; inside .bf-content</li>
    <li>Items</li>
  </ol>
</div>

bf-toc

For table of contents styling, use the .bf-toc class on an ordered list. We recommend using the .bf-title-link class on the links:

<ol class="bf-toc">
  <li><a href="#path" class="bf-title-link">1st level</a></li>
  <li>
    <a href="#path" class="bf-title-link">1st level</a>
    <ol>
      <li>
        <a href="#path" class="bf-title-link">2nd level</a>
        <ol>
          <li><a href="#path" class="bf-title-link">3rd level</a></li>
          <li><a href="#path" class="bf-title-link">3rd level</a></li>
        </ol>
      </li>
      <li><a href="#path" class="bf-title-link">2nd level</a></li>
      <li><a href="#path" class="bf-title-link">2nd level</a></li>
    </ol>
  </li>
  <li><a href="#path" class="bf-title-link">1st level</a></li>
</ol>

CSS font-size variables

These variables only store the font size (in px value), not font-family, line-height or weight etc. Usually you will want to use the .bf-h1 etc classes above instead.

.myClass {
  font-size: var(--bf-font-size-m); /* sets the font size to 14px */
}

Highlight active header

Use .bf-hightlight-target on an element to enable hightlighting on descendant headings (h1-h6) when linking to them using their id (like this style guide does).

<article class="bf-highlight-target">
  <a href="#my-heading">Scroll to "my heading"</a>
  <h3 id="my-heading">My heading</h3>
</article>

When clicking on this "scroll to" link or opening a new browser tab with a url including the hash, the <h3> should play a highlight animation: scale slightly 3 times, bfc-theme colored and fade back to default color over a 12s duration.

Sandbox

Here we're using .bf-page-padding for default padding and .bf-toc for table of contents styling.

<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css" /><link rel="stylesheet" href="styles.css" />

<div class="bf-highlight-target bf-content bf-page-padding">
  <nav>
    <ol class="bf-toc">
      <li><a href="#heading1">Heading 1</a></li>
      <li>
        <a href="#heading2">Heading 2</a>
        <ul>
          <li><a href="#heading3">Heading 3</a></li>
          <li><a href="#heading4">Heading 4</a></li>
        </ul>
      </li>
    </ol>
  </nav>
  <article>
    <p>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
      deserunt mollit anim id est laborum.
    </p>
    <h2 id="heading1">Heading 1</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
      amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua.
    </p>
    <p>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
      aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud
      exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <h2 id="heading2">Heading 2</h2>
    <p>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Duis aute irure dolor in reprehenderit in
      voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </p>
    <p>
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
      deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <h3 id="heading3">Heading 3</h3>
    <p>
      Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam
      varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus
      magna felis Curabitur pretium tincidunt lacus. Nulla gravida orci a odio.
      Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec
      luctus magna felis sollicitudin mauris.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <h3 id="heading4">Heading 4</h3>
    <p>
      Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam
      varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus
      magna felis sollicitudin mauris.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
</div>

Long words and URLs

Long words will often make text overflow or stretch its container. If you want to contain long words you can use the .bf-break-word css class.

<div style="max-width: 300px" class="bfl-grid">
  <div class="bf-break-word bfc-success-fade-bg bf-padding">
    Some text inside <code>.bf-break-word</code>
    withareallylongwordthatismadeupfortestingpurposes in the middle
  </div>
  <div class="bfc-alert-fade-bg bf-padding">
    Some default rendering text
    withareallylongwordthatismadeupfortestingpurposes in the middle
  </div>
</div>

Font CSS playground

<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css" /><link rel="stylesheet" href="styles.css" />

<div class="liveDemo">The quick brown fox jumps over the lazy dog</div>
<div class="liveDemo">Ligatures disabled f t ft fi</div>