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 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>
OS X El Capitan
Microsoft
Software and hardware
Empower every person and every organization on the planet to achieve more.

Add card-shadow class to a card element to get a card with shadow.

<div class="card card-shadow">
  ...
</div>

Cards - Color

Add card-color class to a card element to get a color card.

primary-color.bg-primary$primary-color#5755D9 Primary color
<div class="card card-color card-shadow bg-primary">
  <span class="card-color-code">primary-color</span>
  <span class="card-color-class">.bg-primary</span>
  <span class="card-color-sass">$primary-color</span>
  <span class="card-color-hex">#5755D9</span>
  <input class="card-color-picker" type="color" name="primary-color" value="#5755D9" />
  <span class="card-color-name">Primary color</span>
</div>