New This website is new, 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

<div class="grid grid-cols-4">
  <div class="bsk-card bg-gray-200 rounded py-2 px-4">
      <p>Default card</p>
  </div>
</div>

Card title

Default card title

Default card body

<div class="grid grid-cols-4">
  <div class="bsk-card bg-gray-200 rounded py-2 px-4">
      <header>Default card title</header>
      <p>Default card body</p>
  </div>
</div>

Contextual colours

Standard Context Card Contextual Class
Success .bsk-card-success
Warning .bsk-card-warning
Danger .bsk-card-danger
Info .bsk-card-info

Success card title

Success card body

Success card footer
<div class="grid grid-cols-4">
  <div class="bsk-card bsk-card-success rounded py-2 px-4">
      <header>Success card title</header>
      <p>Success card body</p>
      <hr class="border-dashed">
      <footer>Success card footer</footer>
  </div>
</div>

Warning card title

Warning card body

Warning card footer
<div class="grid grid-cols-4">
  <div class="bsk-card bsk-card-warning rounded py-2 px-4">
      <header>Warning card title</header>
      <p>Warning card body</p>
      <hr class="border-gray-600 border-dashed">
      <footer>Warning card footer</footer>
  </div>
</div>

Danger card title

Danger card body

Danger card footer
<div class="grid grid-cols-4">
  <div class="bsk-card bsk-card-danger rounded py-2 px-4">
      <header>Danger card title</header>
      <p>Danger card body</p>
      <hr class="border-dashed">
      <footer>Danger card footer</footer>
  </div>
</div>

Information card title

Information card body

Information card footer
<div class="grid grid-cols-4">
  <div class="bsk-card bsk-card-info rounded py-2 px-4">
      <header>Information card title</header>
      <p>Information card body</p>
      <hr class="border-dashed">
      <footer>Information card footer</footer>
  </div>
</div>

Components

Body

Example card body

<div class="grid grid-cols-4">
  <div class="bsk-card bg-gray-200 rounded py-2 px-4">
      <p>Example card body</p>
  </div>
</div>
Example card title

Example card body

<div class="grid grid-cols-4">
  <div class="bsk-card bg-gray-200 rounded py-2 px-4">
      <header>Example card title</header>
      <p>Example card body</p>
  </div>
</div>

Default card body

Default card footer
<div class="grid grid-cols-4">
  <div class="bsk-card bg-gray-200 rounded py-2 px-4">
      <p>Default card body</p>
      <hr class="border-gray-400 border-dashed">
      <footer>Default card footer</footer>
  </div>
</div>

Table

It is a good idea to use a title <header> with a table

Example table
Name Location
Ny-Ålesund Svalbard, High Arctic
Rothera Adelaide Island, Antarctica
Halley VI Brunt Ice Shelf, Antarctica 

<div class="grid grid-cols-4">
  <div class="bsk-card bg-gray-200 rounded py-2 px-4">
      <header>Example table</header>
      <table class="bsk-table bsk-table-spacing w-full text-left">
          <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>
      <br>
      <hr class="border-gray-400 border-dashed">
  </div>
</div>

List group

It is a good idea to use a title <header> with a list group

Example list group title
  • List group item
  • Another list group item
  • Yet another list group item
<div class="grid grid-cols-4">
  <div class="bsk-card bg-gray-200 rounded py-2 px-4">
      <header>Example list group title</header>
      <ul>
          <li>List group item</li>
          <li>Another list group item</li>
          <li>Yet another list group item</li>
      </ul>
  </div>
</div>