Typography

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>
<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>

The quick brown fox jumps over Satoshi

The quick brown fox jumps over Open Sans

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>
<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>

H1 The quick brown fox jumps over the lazy dog

H2 The quick brown fox jumps over the lazy dog

H3 The quick brown fox jumps over the lazy dog

H4 The quick brown fox jumps over the lazy dog

H5 The quick brown fox jumps over the lazy dog

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>
<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>

Large (regular) - The quick brown fox jumps over the lazy dog

Large (italic) - The quick brown fox jumps over the lazy dog

Large (bold) - The quick brown fox jumps over the lazy dog

Medium (regular) - The quick brown fox jumps over the lazy dog

Medium (italic) - The quick brown fox jumps over the lazy dog

Medium (bold) - The quick brown fox jumps over the lazy dog

Small (regular) - The quick brown fox jumps over the lazy dog

Small (italic) - The quick brown fox jumps over the lazy dog

Small (bold) - The quick brown fox jumps over the lazy dog

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>
<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>

A .bf-p paragraph with some .bf-small text, a .bf-link, and a .bf-code. Here's some .bf-strong text and some .bf-em emphasized text

<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>
<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>

Unordered list
.bf-li inside .bf-ul
- Nested
- List
Items

<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>
<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>

Ordered (numbered) list
.bf-li inside .bf-ol
Items

bf-elements

To apply the above styles to all elements inside a container without resorting to using the classnames on every element, use the .bf-elements CSS class on a parent.

This also applies a default medium font-size so you probably won't need .bf-medium.

<h1 class="bf-h1">bifrost-styled heading</h1>
<div class="bf-elements">
  <h1>also a bifrost-styled heading</h1>
</div>
<h1 class="bf-h1">bifrost-styled heading</h1>
<div class="bf-elements">
  <h1>also a bifrost-styled heading</h1>
</div>

bf-content

To apply the styles to a block of HTML content you don't control, wrap it in the .bf-content CSS class instead, which does the same as .bf-elements and also applies margins.

<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>
<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>

<h1> heading 1

<h2> heading 2

<h3> heading 3

<h4> heading 4

<h5> heading 5

A <p> paragraph with some <small> text, <a> link, and some <code>. Both <strong> strong and <b> bold text looks the same. As does <em> emphasized and <i> italic.

Unordered list
<ul> inside .bf-content
- Nested
- List
Items

Ordered (numbered) list
<ol> inside .bf-content
Items

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>
<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>

1st level
1st level
1. 2nd level
  1. 3rd level
  2. 3rd level
2. 2nd level
3. 2nd level
1st level

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 */
}
.myClass {
  font-size: var(--bf-font-size-m); /* sets the font size to 14px */
}

CSS variable	Size	Preview
`--bf-font-size-s`	12px	Lorem ipsum dolor sit amet
`--bf-font-size-m`	14px	Lorem ipsum dolor sit amet
`--bf-font-size-l`	16px	Lorem ipsum dolor sit amet
`--bf-font-size-h5`	18px	Lorem ipsum dolor sit amet
`--bf-font-size-h4`	20px	Lorem ipsum dolor sit amet
`--bf-font-size-h3`	24px	Lorem ipsum dolor sit amet
`--bf-font-size-h2`	29px	Lorem ipsum dolor sit amet
`--bf-font-size-h1`	32px	Lorem ipsum dolor sit amet

Highlight active header

Also see /react/examples/toc

Table of Contents code example

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>
<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>

Open Sandbox

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>
<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>

Some text inside .bf-break-word withareallylongwordthatismadeupfortestingpurposes in the middle

Some default rendering text withareallylongwordthatismadeupfortestingpurposes in the middle

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>

Open Sandbox