Cards

Codebase cards are a flexbox implementation of Nicole Sullivan’s media objects, with some added features for a wide range of applications.

The Simplest Card

Note: Codebase cards have no decorative styling – you are free to add your own, or use Codebase utility classes for margin, border, padding, background color, etc.

<div class="card">

  <a href="" class="card-image card-image-left">
    <img src="" alt="">
  </a>

  <div class="card-body">
    <h4>Card Title</h4>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>

</div>

Card images can have .card-image-left or .card-image-right. This changes the flexbox order of the image. However, if your card image spans the whole width of the card, then you don’t need these modifier classes.

Horizontal or Vertical Cards

By default, cards display their main content (the image and the body) arranged horizontally, as 'columns'. But if your card image is wide enough, or if the card width is (constrained) narrow enough, then the card columns wrap to become rows.

<div class="card">

  <a href="" class="card-image">
    <img src="" alt="">
  </a>

  <div class="card-body">
    <h4>Card Title</h4>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>

</div>

Also, you can force card layout to become vertical even if your card image is too narrow, by adding the modifier class .card-vertical to the component container.

Additionally, for vertically arranged cards (accomplished by either mothod above) you can set .card-image-top or .card-image-bottom – instead of setting .card-image-left or .card-image-right.

Adding a Header, Footer, and Multiple Sections

Codebase cards can easily accommodate headers and footers, using .card-header and .card-footer.

<div class="card">

  <div class="card-header">Header</div>

  <a href="" class="card-image card-image-right" >
    <img src="" alt="">
  </a>

  <div class="card-body">
    <h4>Card Title</h4>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>

  <div class="card-footer">Footer</div>

</div>

If your require multiple mid-sections within your card, comply use a few .card-section classed elements instead of one .card-body.

Card Overlay

The class .card-overlay can be used to insert a block of (e.g. text) on a layer over the other content within the card (e.g. over the image).

Notes on usage of the card overlay:

1. The card overlay must have less/smaller content than the other content that it is overlaying. (In these examples above: an image is being overlayed by text – too much text would stick out beyond the image.)
2. If you need to use the card overlay with the header header and/or footer, be aware of the fact that the overlay will overlay the header and/or footer too. If this is a problem for your design, then you need to add an extra container around the overlay, and give it CSS position: relative. (But exclude the header and/or footer from this extra container.)

Cards With Constrained Height

If the height of a card is constrained (by a stated height on itself or on a container), then the .card-body has auto overflow scrolling (vertical). (Note: .card-section does not have this same behavior.)

Cards Can Be Nested

There may be some circumstances where you need to "nest" cards – or place smaller card(s) "inside" a bigger card. As Codebase cards are media objects, you would expect to be able to do this and you can, easily.

<div class="card">

  <a href="" class="card-image card-image-left" >
    <img src="" alt="Square Thumbnail">
  </a>

  <div class="card-body">
    <h4>Card Title</h4>
    <p>Lorem ipsum dolor sit amet...</p>

    <!-- Place nested `.card` here ... -->

  </div>

</div>

Card Classes