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.
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
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

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 h4">...</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>

Action Cards

Give cards an card-action class to make them stand out as actionable. Action cards have a .card-action-primary and .card-action-secondary as well.

Shopify
Tires & Wheels Integration
Organize the world’s information and make it universally accessible and useful.
WooCommerce
Tires & Wheels Integration
Organize the world’s information and make it universally accessible and useful.
Custom API
Tires & Wheels Integration
Organize the world’s information and make it universally accessible and useful.
<div class="card card-action">
  <!-- .card- elements -->
</div>
<div class="card card-action card-action-primary">
  <!-- .card- elements -->
</div>
<div class="card card-action card-action-secondary">
  <!-- .card- elements -->
</div>