p Cards are flexible content containers.

.docs-demo.columns
  .column.col-6.col-xs-12
    .card
      .card-image
        img.img-responsive(src="img/osx-el-capitan.jpg" alt="OS X El Capitan")
      .card-header
        .card-title.h5 Microsoft
        .card-subtitle.text-gray Software and hardware
      .card-body
        | Empower every person and every organization on the planet to achieve more.
      .card-footer
        a.btn.btn-primary(href="#cards") Do
  .column.col-6.col-xs-12
    .card
      .card-header
        .card-title.h5 Apple
        .card-subtitle.text-gray Hardware and software
      .card-image
        img.img-responsive(src="img/osx-yosemite.jpg" alt="OS X Yosemite")
      .card-body
        | To make a contribution to the world by making tools for the mind that advance humankind.
      .card-footer
        .btn-group.btn-group-block
          button.btn.btn-primary Buy
          button.btn Buy
          button.btn Buy
  .column.col-6.col-xs-12
    .card
      .card-image
        img.img-responsive(src="img/macos-sierra-2.jpg" alt="macOS Sierra")
      .card-header
        button.btn.btn-primary.float-right
          i.icon.icon-plus
        .card-title.h5 Google I/O
        .card-subtitle.text-gray Software and hardware
      .card-body
        | An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
  .column.col-6.col-xs-12
    .card
      .card-image
        img.img-responsive(src="img/osx-el-capitan-2.jpg" alt="OS X El Capitan")
      .card-footer
        a.btn.btn-primary(href="#cards") Buy
        a.btn.btn-link(href="#cards") Share
      .card-body
        strong Surface Studio
        | . Turn your desk into a Studio. Surface Studio is designed for the creative process.
  .column.col-6.col-xs-12
    .card
      .card-header
        .card-title.h5 Apple
        .card-subtitle.text-gray Hardware and software
      .card-body
        | To make a contribution to the world by making tools for the mind that advance humankind.
      .card-image
        img.img-responsive(src="img/macos-sierra.jpg" alt="macOS Sierra")
  .column.col-6.col-xs-12
    .card
      .card-header
        .card-title.h5 Google
        .card-subtitle.text-gray Software and hardware
      .card-body
        | Organize the world’s information and make it universally accessible and useful.
      .card-image
        img.img-responsive(src="img/osx-yosemite-2.jpg" alt="OS X Yosemite")
      .card-footer
        a.btn.btn-primary(href="#cards") Search
        a.btn.btn-link(href="#cards") Share

p
  | Add a container element with the #[code card] class.
  | And add child elements with the #[code card-image], #[code card-header], #[code card-body] and/or #[code card-footer] classes.
  | The #[code card-image] can be placed in any position.

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

...
          
...

          ...

          ...

