<< Go back

Card default

Default

Default card body

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

Default with a header

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>

Default with a header and a footer

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>
      <hr class="border-gray-400 border-dashed">
      <footer>Default card footer</footer>
  </div>
</div>

Default with a header, a footer and an image

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>
      <img src="https://www.bas.ac.uk/wp-content/uploads/2026/03/BAS-DISCOVERY-BUILDING-Drone-Photography-03-BAM-1-360x255.jpg" class="" alt="">
      <p>Default card body</p>
      <hr class="border-gray-400 border-dashed">
      <footer>Default card footer</footer>
  </div>
</div>

Default, with a link (anchor tag). A header, a footer and an image

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>
          <a class="bsk-card__link" href="#">		
  		Default card title
          </a>
      </header>
      <img src="https://www.bas.ac.uk/wp-content/uploads/2026/03/BAS-DISCOVERY-BUILDING-Drone-Photography-03-BAM-1-360x255.jpg" class="" alt="">
      <p>Default card body</p>
      <hr class="border-gray-400 border-dashed">
      <footer>Default card footer</footer>
  </div>
</div>

Default, with a header, a table and a footer

Default card title

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>Default card title</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">
      <footer>Default card footer</footer>
  </div>
</div>

Default, with a link (anchor tag). A header, a footer and an image

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>
          <a class="bsk-card__link" href="#">		
  		Default card title
          </a>
      </header>
      <img src="https://www.bas.ac.uk/wp-content/uploads/2026/03/BAS-DISCOVERY-BUILDING-Drone-Photography-03-BAM-1-360x255.jpg" class="" alt="">
      <p>Default card body</p>
      <hr class="border-gray-400 border-dashed">
      <footer>Default card footer</footer>
  </div>
</div>

Default, with a header, a list group and a footer

Default card title

List group item
Another list group item

<div class="grid grid-cols-4">
  <div class="bsk-card bg-gray-200 rounded py-2 px-4">
      <header>Default card title</header>
      <ul>
          <li>List group item</li>
          <li>Another list group item</li>
      </ul>
      <hr class="border-gray-400 border-dashed">
      <footer>Default card footer</footer>
  </div>
</div>