Codebase

Documentation

Responsive Layouts
Utilities
Components
Simple Components

Cards

Codebase cards are built entirely of utility classes – they have no unique card CSS.

Control the width of a card any way that makes sense in your design. “Raise” cards with a box-shadow – or not. Give them [rounded corners](/4-utilities/rounded-corners' | url }}) – or not. Add an image if you need to. Or a header and footer. You’ll probably want a call-to-action button or link. But it’s all up to you.

Card Title

Lorem ipsum dolor sit amet, adipiscing honestatis ius ut, nisl consulatu pro in.

Button 
<div class="flex flex-column b-thin rounded bs-1">
  <a href="">
    <img src="" alt="">
  </a>
  <div class="flex-item-grow-1 p-2">
    <h4 class="mb-2">Card Title</h4>
    <p class="mb-2">
      Explanation text...
    </p>
    <a href="" class="btn btn-primary">Button</a>
  </div>
</div>

Another example, with a header and a footer:

Header

Card Title

Lorem ipsum dolor sit amet, adipiscing honestatis ius ut, nisl consulatu pro in. Imperdiet evertitur no usu, his te suavitate salutatus.

Footer
<div class="mx-auto b-thin rounded">
  <div class="bb-thin p-block">Header</div>
  <div class="flex flex-column">
    <a href="">
      <img src="" alt="">
    </a>
    <div class="p-2">
      <h4 class="mb-0">Card Title</h4>
      <p class="mb-0">Lorem ipsum dolor sit amet, adipiscing honestatis ius ut, nisl consulatu pro in. Imperdiet evertitur no usu, his te suavitate salutatus. </p>
    </div>
  </div>
  <div class="bt-thin p-block">Footer</div>
</div>

Another example, with multiple mid-sections:

Lorem ipsum dolor sit amet, adipiscing honestatis ius ut, nisl consulatu pro in.
Imperdiet evertitur no usu, his te suavitate salutatus.
Nullam ridens deterruisset an duo.
Cum harum insolens ei, cum probo placerat praesent et. 
<div class="b-thin rounded">
  <div class="bb-thin p-block">
    Lorem ipsum dolor sit amet, adipiscing honestatis ius ut, nisl consulatu pro in.
  </div>
  <div class="bb-thin p-block">
    Imperdiet evertitur no usu, his te suavitate salutatus.
  </div>
  <div class="bb-thin p-block">
    Nullam ridens deterruisset an duo.
  </div>
  <div class="p-block">
    Cum harum insolens ei, cum probo placerat praesent et.
  </div>
</div>

Example with a scrollable main content (and a specified height that’s less than the main content height):

Header

This Card has a Scrollable Body

Lorem ipsum dolor sit amet, vis in blandit singulis, an unum doming facilisi vim. Facete aliquam bonorum id quo, ex labore tincidunt mel, usu no quod liberavisse. Ex sea dolorum insolens assueverit, sed ut harum latine dignissim.

Vis cibo vidit ea, eu duo debet platonem explicari, pro ex graece meliore. Illum graeci inciderint mei et, ei decore nostro vim.

Movet voluptaria voluptatum has at, qui cu timeam ancillae democritum. Ad veniam detraxit his. In est bonorum fabulas deleniti, eam ex soluta verear albucius. Sale aperiri repudiandae eu cum, at cum sint dicunt. Prima tibique constituto cum ne, quidam dolorem detraxit pro no, sea an aeque zril.

Et ponderum tacimates vim. Laudem ornatus intellegam no cum. Porro omittantur pro te. Iisque mandamus ei eum. Pri idque iudico appetere ex. Has no altera veritus civibus.

At civibus aliquando usu. Vide libris has ut, eum illum luptatum ad. Quando scripta nusquam est te. Eleifend principes pertinacia sed cu, vix ut meis diceret salutandi, ea inermis ocurreret voluptatibus eam. Ei vidisse conclusionemque eam, vix eros mediocrem at. Graeco laboramus te mea, ius fabellas consequat voluptatum et.

Footer
<div class="flex flex-column w-xxs mx-auto mb-3 b-thin rounded" style="height: 400px;">
  <div class="bb-thin p-block">Header</div>
  <div class="flex-item-grow-1 overflow-y p-2">
    <h4>Title</h4>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div class="bt-thin p-block">Footer</div>
</div>