Link

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

.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 1px underline
• mouse hover: 2px underline
• keyboard focus: dashed outline

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

To inherit parent text color, try .bf-neutral-link instead (see below).

bf-title-link

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

• theme colored, no underline
• mouse hover: 2px underline
• keyboard focus: dashed outline

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

Button styling

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

Button variants

Links styled with .bf-button can be combined with button variants and states.

Tag styling

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

Link card

<button> styled as a link

Button card