Skip to main content
Color mode
Color theme
Code repository
GitHub repository
Releases
Changelogs
@intility/bifrost-css@6.10.0
@intility/bifrost-react@6.18.0
@intility/bifrost-react-datepicker@6.2.9
@intility/bifrost-react-select@6.1.2
/
/
/
Card

Card

Panel with optional title, content and image

DesignReactCSS
Figma
Card
Go to top
Also see /react/card
React component

Basic card

HTML
<div class="bf-card">
  <div class="bf-card-title">Card title</div>
  <div class="bf-card-content">
    Wrap card text content in <code>.bf-card-content</code>
  </div>
</div>
Card title
Wrap card text content in .bf-card-content

Image banner

HTML
<div class="bf-card">
  <div
    class="bf-card-image"
    style="background-image: url(/card/meetingroom.png)"
  ></div>
  <div class="bf-card-title">Card title</div>
  <div class="bf-card-content">
    Wrap card text content in <code>.bf-card-content</code>
  </div>
</div>
Card title
Wrap card text content in .bf-card-content

Card button

You can place a <button> at the bottom of the card.

HTML
<div class="bf-card">
  <div class="bf-card-title">Card title</div>
  <div class="bf-card-content">
    Wrap card text content in <code>.bf-card-content</code>
  </div>
  <button class="bf-card-button bf-title-link">Go to shop</button>
</div>
Card title
Wrap card text content in .bf-card-content

Clickable card

Or you can make a card clickable by wrapping its content in a link or button.

HTML
<div class="bf-card">
  <a href="#path">
    <div
      class="bf-card-image"
      style="background-image: url(/card/meetingroom.png)"
    ></div>
    <div class="bf-card-title">Wrapped in a link</div>
    <div class="bf-card-content">
      Wrap card text content in <code>.bf-card-content</code>
    </div>
  </a>
</div>
<div class="bf-card">
  <button>
    <div
      class="bf-card-image"
      style="background-image: url(/card/meetingroom.png)"
    ></div>
    <div class="bf-card-title">Wrapped in a button</div>
    <div class="bf-card-content">
      Wrap card text content in <code>.bf-card-content</code>
    </div>
  </button>
</div>
Wrapped in a link
Wrap card text content in .bf-card-content

Circular image or icon

HTML
<div>
  <div class="bf-card bf-card-align-center">
    <div
      class="bf-card-image"
      style="background-image: url(/card/profilebg_transparent.png); aspect-ratio: 4/1"
    ></div>
    <div
      class="bf-card-logo"
      style="background-image: url(/card/profile.png)"
    ></div>
    <div class="bf-card-title">Ola nordmann</div>
  </div>
</div>
<div>
  <div class="bf-card bf-card-align-center">
    <div class="bf-card-logo">
      <i class="bf-card-logo-icon fa-solid fa-shopping-cart"></i>
    </div>
    <div class="bf-card-title">Card title</div>
    <div class="bf-card-content">
      Wrap card text content in <code>.bf-card-content</code>
    </div>
  </div>
</div>
Ola nordmann
Card title
Wrap card text content in .bf-card-content

Responsive padding

The default inner padding for card content is 12px, other options are:

HTML
<div class="bf-card">
  <div class="bf-card-title">Default padding</div>
  <div class="bf-card-content">12px padding for all screen widths</div>
</div>
<div class="bf-card bf-card-no-padding">
  <div class="bf-card-title">No padding</div>
  <div class="bf-card-content">
    No padding with <code>.bf-card-no-padding</code>
  </div>
</div>
<div class="bf-card bf-card-padding-m">
  <div class="bf-card-title">Medium padding</div>
  <div class="bf-card-content">
    Resize window to get 12px for small screens, 16px for (1280px+) screens
  </div>
</div>
<div class="bf-card bf-card-padding-l">
  <div class="bf-card-title">Large padding</div>
  <div class="bf-card-content">
    Resize window to get 16px for small screens, 24px for (1280px+) screens
  </div>
</div>
Default padding
12px padding for all screen widths
No padding
No padding with .bf-card-no-padding
Medium padding
Resize window to get 12px for small screens, 16px for (1280px+) screens
Large padding
Resize window to get 16px for small screens, 24px for (1280px+) screens

Sandbox

Open on CodeSandboxOpen Sandbox
<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css">
<link rel="stylesheet" href="styles.css">

<div class="bf-page-padding">
  <div class="bf-card">
    <div class="bf-card-title">Card title</div>
    <div class="bf-card-content">
      Wrap card text content in <code>.bf-card-content</code>
    </div>
  </div>
</div>