<< Go back

Card contextual


Cards with contextual colours

Success with a header and a footer
Default card title

Default card body

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

Warning with a header and a footer
Default card title

Default card body

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

Information with a header and a footer
Default card title

Default card body

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

Danger with a header and a footer
Default card title

Default card body

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