Skip to main content
Experimental This website is used for testing – your feedback will help us to improve it.

Card

Overview

Use the .bsk-card class to display information that is distinct from main content, but which is shown within it.

.bsk-card replaces .bsk-panel which has been depreciated.

You must pick a variant for each card, otherwise it will look strange. It is not enough to use .bsk-card on its own.

See the Sidebar component to display information that is distinct from main content, but which is shown next to it.

See the Thumbnail component to display media items that are distinct from main content, but which is shown within it.

Variants

Default card

Add the .bsk-card-default class for standard cards. For added context you can use contextual colours.

Default card example 
<div class="bsk-card">
  <div class="bsk-card-body">
    Default card example
  </div>
</div>

Card title

Add the .bsk-card-title class and .bsk-card-subtitle class to add a title & subtitle.

Example title

Example subtitle

<div class="bsk-card">
  <div class="bsk-card-body">
    <h3 class="bsk-card-title">Example title</h3>
    <h4 class="bsk-card-subtitle bsk-text-muted">Example subtitle</h4>
  </div>
</div>

Contextual colours

The standard contextual colours can be used for context by adding these classes:

Standard Context Card Contextual Class
Success .bsk-text-bg-primary
Warning .bsk-text-bg-warning
Danger .bsk-text-bg-danger
Info .bsk-text-bg-info
Success card example header

Success card example body

Warning card example header

Warning card example body

Danger card example header

Danger card example body

Info card example header

Info card example body

<div class="bsk-card bsk-text-bg-primary">
  <div class="bsk-card-header">Success card example header</div>
  <div class="bsk-card-body">
    <h3 class="bsk-card-title">Success card example body</h3>
  </div>
</div>

<div class="bsk-card bsk-text-bg-warning">
  <div class="bsk-card-header">Warning card example header</div>
  <div class="bsk-card-body">
    <h3 class="bsk-card-title">Warning card example body</h3>
  </div>
</div>

<div class="bsk-card bsk-text-bg-danger">
  <div class="bsk-card-header">Danger card example header</div>
  <div class="bsk-card-body">
    <h3 class="bsk-card-title">Danger card example body</h3>
  </div>
</div>

<div class="bsk-card bsk-text-bg-info">
  <div class="bsk-card-header">Info card example header</div>
  <div class="bsk-card-body">
    <h3 class="bsk-card-title">Info card example body</h3>
  </div>
</div>

Components

Body

Use .bsk-card-body class on a <main> element within a card for its contents.

Example card body 
<div class="bsk-card">
  <main class="bsk-card-body">
    Example card body
  </main>
</div>

Use the .bsk-card-header within a card to add a header.

Example card header
Example card body 
<div class="bsk-card">
  <div class="bsk-card-header">
    Example card header
  </div>
  <div class="bsk-card-body">
    Example card body
  </div>
</div>

Use .bsk-card-footer class to add a footer.

Example card body
Example card footer 
<div class="bsk-card">
  <div class="bsk-card-body">
    Example card body
  </div>
  <div class="bsk-card-footer">
    Example card footer
  </div>
</div>

Table

Tables can be added to cards directly. Providing table borders aren’t used they will look seamless, a dividing border will be added automatically if a card body is used.

Don’t put tables within card bodies, as they may look strange.

Name Location
Ny-Ålesund Svalbard, High Arctic
Rothera Adelaide Island, Antarctica
Halley VI Brunt Ice Shelf, Antarctica
Example card body
Name Location
Ny-Ålesund Svalbard, High Arctic
Rothera Adelaide Island, Antarctica
Halley VI Brunt Ice Shelf, Antarctica 
<div class="bsk-card">
  <table class="bsk-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Location</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ny-Ålesund</td>
        <td>Svalbard, High Arctic</td>
      </tr>
      <tr>
        <td>Rothera</td>
        <td>Adelaide Island, Antarctica</td>
      </tr>
      <tr>
        <td>Halley VI</td>
        <td>Brunt Ice Shelf, Antarctica</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="bsk-card">
  <main class="bsk-card-body">
    Example card body
  </main>
  <table class="bsk-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Location</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ny-Ålesund</td>
        <td>Svalbard, High Arctic</td>
      </tr>
      <tr>
        <td>Rothera</td>
        <td>Adelaide Island, Antarctica</td>
      </tr>
      <tr>
        <td>Halley VI</td>
        <td>Brunt Ice Shelf, Antarctica</td>
      </tr>
    </tbody>
  </table>
</div>

List group

List groups can be added to cards directly. A dividing border will be added automatically if a card body is used.

Don’t put list groups within card bodies, as they may look strange.

  • List group item
  • Another list group item
<div class="bsk-card">
  <ul class="bsk-list-group bsk-list-group-flush">
    <li class="bsk-list-group-item">List group item</li>
    <li class="bsk-list-group-item">Another list group item</li>
  </ul>
</div>
Example card header
  • List group item
  • Another list group item
<div class="bsk-card">
  <div class="bsk-card-header">
    Example card header
  </div>
  <ul class="bsk-list-group bsk-list-group-flush">
    <li class="bsk-list-group-item">List group item</li>
    <li class="bsk-list-group-item">Another list group item</li>
  </ul>
</div>