Ayo.css
Layout
Elements
Components
Utilities

Cards

Cards are flexible content containers.

OS X El Capitan
Microsoft
Software and hardware
Empower every person and every organization on the planet to achieve more.
Do
Apple
Hardware and software
OS X Yosemite
To make a contribution to the world by making tools for the mind that advance humankind.
macOS Sierra
Google I/O
Software and hardware
An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
OS X El Capitan
BuyShare
Surface Studio. Turn your desk into a Studio. Surface Studio is designed for the creative process.
Apple
Hardware and software
To make a contribution to the world by making tools for the mind that advance humankind.
macOS Sierra
Google
Software and hardware
Organize the world’s information and make it universally accessible and useful.
OS X Yosemite
SearchShare

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

<div class="card">
  <div class="card-image">
    <img src="img/osx-el-capitan.jpg" class="img-responsive">
  </div>
  <div class="card-header">
    <div class="card-title h5">...</div>
    <div class="card-subtitle text-gray">...</div>
  </div>
  <div class="card-body">
    ...
  </div>
  <div class="card-footer">
    <button class="btn btn-primary">...</button>
  </div>
</div>