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;

Headers

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

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, see List

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.

bf-toc

See table of contents documentation at css/list

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.

Interactive demo

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.

Font CSS playground