CSS reference - Bifrost

Home

CSS

Box design

Class names

The react <Box> component provides a way to access CSS classes with some default values for bifrost styling:

Class name	Applied style
`.bf-padding`	`padding: var(--bf-box-padding);`
`.bf-padding-x`	`padding-inline: var(--bf-box-padding);`
`.bf-padding-y`	`padding-block: var(--bf-box-padding);`
`.bf-border`	`border: var(--bf-border);`
`.bf-border-top`	`border-top: var(--bf-border);`
`.bf-border-right`	`border-right: var(--bf-border);`
`.bf-border-bottom`	`border-bottom: var(--bf-border);`
`.bf-border-left`	`border-left: var(--bf-border);`
`.bf-radius`	`border-radius: var(--bf-radius-m);`
`.bf-shadow`	`box-shadow: var(--bf-shadow);`

In addition to .bfc-[color]-bg background-color classes.

They are based on bifrost variables like:

CSS variable	Value
`--bf-box-padding`	`16px` up to 1280px viewport width, `24px` for wider
`--bf-border`	`1px solid var(--bfc-base-dimmed)`
`--bf-radius`	`12px`
`--bf-shadow`	`0 0 var(--bf-shadow-blur) var(--bfc-shadow)`

Combining these you can compose different boxes:

Border

Padded box with a border and rounded corners.

<div class="bf-padding bf-radius bf-border">bf-padding bf-radius bf-border</div>
<div class="bf-padding bf-radius bf-border">bf-padding bf-radius bf-border</div>

bf-padding bf-radius bf-border

Background color

Valid background color classnames are:

.bfc-base-bg

.bfc-base-2-bg

.bfc-base-3-bg

.bfc-dimmed-bg

.bfc-inverted-bg

.bfc-inverted-2-bg

.bfc-disabled-bg

.bfc-theme-bg

.bfc-theme-fade-bg

.bfc-neutral-bg

.bfc-neutral-fade-bg

.bfc-brand-bg

.bfc-brand-fade-bg

.bfc-attn-bg

.bfc-attn-fade-bg

.bfc-chill-bg

.bfc-chill-fade-bg

.bfc-success-bg

.bfc-success-fade-bg

.bfc-warning-bg

.bfc-warning-fade-bg

.bfc-alert-bg

.bfc-alert-fade-bg

<div class="bf-padding bf-radius bfc-base-3-bg">
  bf-padding bf-radius bfc-base-3-bg
</div>
<div class="bf-padding bf-radius bfc-chill-bg">
  bf-padding bf-radius bfc-chill-bg
</div>
<div class="bf-padding bf-radius bfc-warning-bg">
  bf-padding bf-radius bfc-warning-bg
</div>
<div class="bf-padding bf-radius bfc-base-3-bg">
  bf-padding bf-radius bfc-base-3-bg
</div>
<div class="bf-padding bf-radius bfc-chill-bg">
  bf-padding bf-radius bfc-chill-bg
</div>
<div class="bf-padding bf-radius bfc-warning-bg">
  bf-padding bf-radius bfc-warning-bg
</div>

bf-padding bf-radius bfc-base-3-bg

bf-padding bf-radius bfc-chill-bg

bf-padding bf-radius bfc-warning-bg

Clickable box

Use .bf-neutral-link to remove default link or button styling, and wrap any text you would like underlined on hover in .bf-neutral-link-text.

Button

To make a "box" clickable, use the<button> element to make it accessible.

The .bf-block class applies display: block; width: 100%; when applied to a <button>.

<button
  class="bf-neutral-link bf-block bf-padding bfc-base-3-bg bf-radius bf-shadow"
>
  This is a <span class="bf-neutral-link-text">button</span>
</button>
<button
  class="bf-neutral-link bf-block bf-padding bfc-base-3-bg bf-radius bf-shadow"
>
  This is a <span class="bf-neutral-link-text">button</span>
</button>

Link

Anchor (<a>) elements are inline by default, to use it as a "box", you can either apply display: block; or use the .bf-block class which does just that.

<a
  href="#page"
  class="bf-neutral-link bf-block bf-padding bfc-base-3-bg bf-radius bf-shadow"
>
  This is a <span class="bf-neutral-link-text">link</span>
</a>
<a
  href="#page"
  class="bf-neutral-link bf-block bf-padding bfc-base-3-bg bf-radius bf-shadow"
>
  This is a <span class="bf-neutral-link-text">link</span>
</a>

This is a link

Use .bf-box-arrow (or .bf-box-arrow-external) on an arrow-right icon to animate on hover.

You can place it on the right hand side using .bf-inline and .bf-inline-stretch.

<a
  href="#page"
  class="bf-neutral-link bf-block bf-padding bfc-base-3-bg bf-radius bf-shadow bf-inline"
  style="align-items: center"
>
  <span class="bf-inline-stretch">
    This is a <span class="bf-neutral-link-text">link</span>
  </span>
  <i class="fa-solid fa-arrow-right bf-box-arrow"></i>
</a>
<a
  target="_blank"
  href="https://intility.com"
  class="bf-neutral-link bf-block bf-padding bfc-base-3-bg bf-radius bf-shadow bf-inline"
  style="align-items: center"
>
  <span class="bf-inline-stretch">
    This is an <span class="bf-neutral-link-text">external link</span>
  </span>
  <i class="fa-solid fa-arrow-right bf-box-arrow-external"></i>
</a>
<a
  href="#page"
  class="bf-neutral-link bf-block bf-padding bfc-base-3-bg bf-radius bf-shadow bf-inline"
  style="align-items: center"
>
  <span class="bf-inline-stretch">
    This is a <span class="bf-neutral-link-text">link</span>
  </span>
  <i class="fa-solid fa-arrow-right bf-box-arrow"></i>
</a>
<a
  target="_blank"
  href="https://intility.com"
  class="bf-neutral-link bf-block bf-padding bfc-base-3-bg bf-radius bf-shadow bf-inline"
  style="align-items: center"
>
  <span class="bf-inline-stretch">
    This is an <span class="bf-neutral-link-text">external link</span>
  </span>
  <i class="fa-solid fa-arrow-right bf-box-arrow-external"></i>
</a>

This is a link This is an external link

Examples

Card with button

Also see typography docs, .bfl-grid, and .bf-button

<div class="bf-radius bfc-base-3-bg bfl-grid bf-shadow" style="padding: 16px">
  <h5 class="bf-h5">Ingrid Berntsen</h5>
  <p class="bf-p">
    Sosialantropolog med utdanning fra Universitetet i Oslo (UiO).
  </p>
  <button class="bf-button bf-button-filled">
    <i class="fa-solid fa-download bf-icon-margin-right"></i>Last ned kontakt
  </button>
</div>
<div class="bf-radius bfc-base-3-bg bfl-grid bf-shadow" style="padding: 16px">
  <h5 class="bf-h5">Ingrid Berntsen</h5>
  <p class="bf-p">
    Sosialantropolog med utdanning fra Universitetet i Oslo (UiO).
  </p>
  <button class="bf-button bf-button-filled">
    <i class="fa-solid fa-download bf-icon-margin-right"></i>Last ned kontakt
  </button>
</div>

Ingrid Berntsen

Sosialantropolog med utdanning fra Universitetet i Oslo (UiO).

<a
  href="#path"
  class="bf-neutral-link bf-padding bf-radius bfc-base-3-bg bf-shadow bfl-grid"
>
  <div class="bf-inline" style="align-items: center">
    <h5 class="bf-h5 bf-inline-stretch bf-neutral-link-text">
      <i class="fa-solid fa-info-circle bf-icon-margin-right"></i>More
      information
    </h5>
    <i class="fa-solid fa-arrow-right bf-box-arrow"></i>
  </div>
  <p class="bf-p">Read about this and a lot more</p>
</a>
<a
  href="#path"
  class="bf-neutral-link bf-padding bf-radius bfc-base-3-bg bf-shadow bfl-grid"
>
  <div class="bf-inline" style="align-items: center">
    <h5 class="bf-h5 bf-inline-stretch bf-neutral-link-text">
      <i class="fa-solid fa-info-circle bf-icon-margin-right"></i>More
      information
    </h5>
    <i class="fa-solid fa-arrow-right bf-box-arrow"></i>
  </div>
  <p class="bf-p">Read about this and a lot more</p>
</a>

More information

Read about this and a lot more

Circle icon card

<div class="bf-padding bf-radius bfc-base-3-bg bf-inline bf-shadow">
  <div
    class="bf-radius-full bfc-base-bg"
    style="width: 40px; height: 40px; display: grid; place-items: center;"
  >
    <i class="fa-regular fa-comment bfc-base-2 bf-large"></i>
  </div>
  <div class="bf-inline-stretch">
    <small class="bfc-base-2">Message to signees</small>
    <div>Don't forget to celebrate</div>
  </div>
</div>
<div class="bf-padding bf-radius bfc-base-3-bg bf-inline bf-shadow">
  <div
    class="bf-radius-full bfc-base-bg"
    style="width: 40px; height: 40px; display: grid; place-items: center;"
  >
    <i class="fa-regular fa-comment bfc-base-2 bf-large"></i>
  </div>
  <div class="bf-inline-stretch">
    <small class="bfc-base-2">Message to signees</small>
    <div>Don't forget to celebrate</div>
  </div>
</div>

Message to signees

Don't forget to celebrate

Split card

<div class="bf-radius bfc-base-3-bg bf-shadow">
  <div class="bf-padding bf-inline">
    <div class="bf-inline-stretch">
      <h5 class="bf-h5">27</h5>
      cats
    </div>
    <div
      class="bf-radius-full bfc-base-bg"
      style="width: 40px; height: 40px; display: grid; place-items: center;"
    >
      <i class="fa-solid fa-cat bfc-base-2 bf-large"></i>
    </div>
  </div>
  <div
    class="bf-padding bfc-base-2-bg"
    style="border-radius: 0 0 var(--bf-radius) var(--bf-radius);
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 8px"
  >
    <strong style="justify-self: end">4</strong>
    <div>Burmese</div>
    <strong style="justify-self: end">3</strong>
    <div>Voids</div>
    <strong style="justify-self: end">20</strong>
    <div>Orange ones</div>
  </div>
</div>
<div class="bf-radius bfc-base-3-bg bf-shadow">
  <div class="bf-padding bf-inline">
    <div class="bf-inline-stretch">
      <h5 class="bf-h5">27</h5>
      cats
    </div>
    <div
      class="bf-radius-full bfc-base-bg"
      style="width: 40px; height: 40px; display: grid; place-items: center;"
    >
      <i class="fa-solid fa-cat bfc-base-2 bf-large"></i>
    </div>
  </div>
  <div
    class="bf-padding bfc-base-2-bg"
    style="border-radius: 0 0 var(--bf-radius) var(--bf-radius);
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 8px"
  >
    <strong style="justify-self: end">4</strong>
    <div>Burmese</div>
    <strong style="justify-self: end">3</strong>
    <div>Voids</div>
    <strong style="justify-self: end">20</strong>
    <div>Orange ones</div>
  </div>
</div>

27

cats

Burmese

Voids

Orange ones

Sandbox

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/solid.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/regular.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/fontawesome.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css" /><link rel="stylesheet" href="styles.css" />

<div class="bfl-grid my-container bf-page-padding bf-elements">
  <div class="bf-padding bf-border bf-radius">
    Padded box with a border and rounded corners.
  </div>

  <div class="bf-padding bfc-warning-bg bf-shadow bf-radius">
    Padded box with a background, shadow and rounded corners.
  </div>

  <div class="demo-grid">
    <a
      href="#path"
      class="bf-neutral-link bf-padding bf-radius bfc-base-3-bg bf-shadow bfl-grid"
    >
      <div class="bf-inline" style="align-items: center">
        <h5 class="bf-inline-stretch bf-neutral-link-text">
          <i class="fa-solid fa-info-circle bf-icon-margin-right"></i>More
          information
        </h5>
        <i class="fa-solid fa-arrow-right bf-box-arrow"></i>
      </div>
      <p>Read about this and a lot more</p>
    </a>

    <div
      class="bf-padding bf-radius bfc-base-3-bg bf-inline bf-shadow"
      style="align-items: center"
    >
      <div class="circle bf-radius-full bfc-base-bg">
        <i class="fa-regular fa-comment bfc-base-2 bf-large"></i>
      </div>
      <div class="bf-inline-stretch">
        <small class="bfc-base-2">Message to signees</small>
        <div>Don't forget to celebrate</div>
      </div>
    </div>

    <div class="bf-radius bfc-base-3-bg bf-shadow">
      <div class="bf-padding bf-inline">
        <div class="bf-inline-stretch">
          <h5>27</h5>
          cats
        </div>
        <div class="circle bf-radius-full bfc-base-bg">
          <i class="fa-solid fa-cat bfc-base-2 bf-large"></i>
        </div>
      </div>
      <div class="cats-grid bf-padding bfc-base-2-bg">
        <strong style="justify-self: end">4</strong>
        <div>Burmese</div>
        <strong style="justify-self: end">3</strong>
        <div>Voids</div>
        <strong style="justify-self: end">20</strong>
        <div>Orange ones</div>
      </div>
    </div>
  </div>
</div>

Open Sandbox