Cards
Cards are flexible content containers.
Microsoft
Software and hardware
Empower every person and every organization on the planet to achieve more.
Apple
Hardware and software
To make a contribution to the world by making tools for the mind that advance humankind.
Google I/O
Software and hardware
An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
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.
Google
Software and hardware
Organize the world’s information and make it universally accessible and useful.
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>
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>