Skip to main content
Color mode
Color theme
Code repository
GitHub repository
Releases
Changelogs
@intility/bifrost-css@6.0.0
@intility/bifrost-react@6.1.1
@intility/bifrost-react-datepicker@6.0.1
@intility/bifrost-react-select@6.0.0
/
/
/
Link styling

Link styling

Usage

For navigating to a new URL always use a html anchor element <a> (or <Link> or <NavLink> if you're using react-router). This enables browser features like "copy link" or "open in new tab".

For any action that does not navigate (like expanding a section, opening a modal), always use a HTML <button> element.

An anchor (link) can be made to look like a button, or vice versa, see separate sections below.

Variants

.bf-link provides the default bifrost styling for inline text links.

Equivalent to an <a> element inside .bf-content or .bf-elements.

  • theme colored with underline
  • mouse hover: dashed underline
  • keyboard focus: dashed outline
<a class="bf-link" href="#path">.bf-link</a>

<a class="bf-link" href="#path">.bf-link</a>
.bf-link

If you need a link in a different color, you can also apply color classes like .bfc-base.

<a class="bf-link bfc-base" href="#path">base colored link</a>

<a class="bf-link bfc-base" href="#path">base colored link</a>
base colored link

.bf-title-link is suitable for stand-alone links like titles or table of contents.

  • theme colored, no underline
  • mouse hover: underlined
  • keyboard focus: dashed outline
<a class="bf-title-link" href="#path"> .bf-title-link </a>

<a class="bf-title-link" href="#path"> .bf-title-link </a>
.bf-title-link

.bf-neutral-link is useful for unstyled clickable content blocks, or resetting browser-native <a> or <button> styling.

  • inherited color, no underline
  • mouse hover: no change
  • keyboard focus: dashed outline
  • descendant elements with .bf-neutral-link-text are underlined when block is hovered
<a class="bf-neutral-link" href="#path">.bf-neutral-link</a>
<a class="bf-neutral-link" href="#path">
  .bf-neutral-link with
  <span class="bf-neutral-link-text">.bf-neutral-link-text</span> inside
</a>

<a class="bf-neutral-link" href="#path">.bf-neutral-link</a>
<a class="bf-neutral-link" href="#path">
  .bf-neutral-link with
  <span class="bf-neutral-link-text">.bf-neutral-link-text</span> inside
</a>
.bf-neutral-link .bf-neutral-link with .bf-neutral-link-text inside

Button styling

Use .bf-button to style a link as a bifrost Button, see css button docs for more variants.

<a class="bf-button" href="#path">link as button</a>

<a class="bf-button" href="#path">link as button</a>
link as button

Tag styling

Combine .bf-button and .bf-tag to style a link as a bifrost Tag.

<a class="bf-button bf-tag" href="#path">Tag</a>
<a class="bf-button bf-tag bf-button-filled" href="#path">Filled tag</a>
<a class="bf-button bf-tag bf-tag-compact" href="#path">Compact tag</a>
<a class="bf-button bf-tag bf-tag-compact bf-button-filled" href="#path">
  Compact filled tag
</a>

<a class="bf-button bf-tag" href="#path">Tag</a>
<a class="bf-button bf-tag bf-button-filled" href="#path">Filled tag</a>
<a class="bf-button bf-tag bf-tag-compact" href="#path">Compact tag</a>
<a class="bf-button bf-tag bf-tag-compact bf-button-filled" href="#path">
  Compact filled tag
</a>
Tag Filled tag Compact tag Compact filled tag
Also see /css/card
Card styling
Also see /react/card
React Card component
Also see /css/box
Box styling
Also see /react/box
React Box component
<a class="bf-neutral-link bfc-base-3-bg bf-padding bfl-grid" href="#path">
  <h3 class="bf-neutral-link-text bf-h3">&lt;h3&gt; .bf-neutral-link-text</h3>
  <p class="bf-p">
    &lt;a&gt; with .bf-neutral-link and .bfc-base-3-bg to create a clickable
    block.
  </p>
</a>

<a class="bf-neutral-link bfc-base-3-bg bf-padding bfl-grid" href="#path">
  <h3 class="bf-neutral-link-text bf-h3">&lt;h3&gt; .bf-neutral-link-text</h3>
  <p class="bf-p">
    &lt;a&gt; with .bf-neutral-link and .bfc-base-3-bg to create a clickable
    block.
  </p>
</a>

<h3> .bf-neutral-link-text

<a> with .bf-neutral-link and .bfc-base-3-bg to create a clickable block. 

<button class="bf-link">button with .bf-link</button>
<button class="bf-title-link">button with .bf-title-link</button>
<button class="bf-neutral-link">button with .bf-neutral-link</button>
<button class="bf-neutral-link">
  button with .bf-neutral-link and
  <span class="bf-neutral-link-text">.bf-neutral-link-text</span> inside
</button>

<button class="bf-link">button with .bf-link</button>
<button class="bf-title-link">button with .bf-title-link</button>
<button class="bf-neutral-link">button with .bf-neutral-link</button>
<button class="bf-neutral-link">
  button with .bf-neutral-link and
  <span class="bf-neutral-link-text">.bf-neutral-link-text</span> inside
</button>

Button card

<button class="bf-neutral-link bfc-base-3-bg bf-padding bfl-grid">
  <h3 class="bf-neutral-link-text bf-h3">&lt;h3&gt; .bf-neutral-link-text</h3>
  <p class="bf-p">
    &lt;button&gt; with .bf-neutral-link and .bfc-base-3-bg to create a
    clickable block.
  </p>
</button>

<button class="bf-neutral-link bfc-base-3-bg bf-padding bfl-grid">
  <h3 class="bf-neutral-link-text bf-h3">&lt;h3&gt; .bf-neutral-link-text</h3>
  <p class="bf-p">
    &lt;button&gt; with .bf-neutral-link and .bfc-base-3-bg to create a
    clickable block.
  </p>
</button>