BOOKMARKS
41,400
70% Increase in 30 Days
A card is a sheet that serves as an entry point to more detailed information.
Metro UI provides any classes to create cards. A card is a sheet that serves as an entry point to more detailed information. Cards may contain a photo, text, and a link about a single subject. They may display content containing elements of varying size, such as photos with captions of variable length.
<div class="card">
<div class="card-header">
Card header
</div>
<div class="card-content p-2">
Card with header and footer...
</div>
<div class="card-footer">
Card Footer
</div>
</div>
By default card have width 100%
. You can set own size for your cards.
Posted on January 21, 2015
Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit...
<div class="card image-header">
<div class="card-header fg-white"
style="background-image: url(http://lorempixel.com/1000/600/)">
Journey To Mountains
</div>
<div class="card-content p-2">
<p class="fg-gray">Posted on January 21, 2015</p>
Quisque eget vestibulum nulla. Quisque quis dui quis ex
ultricies efficitur vitae non felis. Phasellus quis nibh
hendrerit...
</div>
<div class="card-footer">
<button class="button secondary">Read More</button>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="avatar">
<img src="http://lorempixel.com/68/68/people/">
</div>
<div class="name">John Doe</div>
<div class="date">Monday at 3:47 PM</div>
</div>
<div class="card-content p-2">
<img src="http://lorempixel.com/1000/600/" style="width: 100%">
</div>
<div class="card-footer">
<button class="flat-button mif-thumbs-up"></button>
<button class="flat-button mif-tag"></button>
<button class="flat-button mif-share"></button>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="avatar">
<img src="http://lorempixel.com/68/68/people/">
</div>
<div class="name">John Doe</div>
<div class="date">Monday at 3:47 PM</div>
</div>
<div class="card-content p-2">
What a nice photo i took yesterday!
</div>
<div class="card-content">
<img src="http://lorempixel.com/1000/600/" style="width: 100%">
</div>
<div class="card-content fg-gray p-2">
<span><small>Likes: </small>112</span>
<span><small>Comments: </small>43</span>
</div>
<div class="card-footer">
<button class="flat-button mif-thumbs-up mif-2x"></button>
<button class="flat-button mif-tag mif-2x"></button>
<button class="flat-button mif-share mif-2x"></button>
</div>
</div>
<div class="icon-box border bd-default">
<div class="icon bg-cyan fg-white"><span class="mif-cog"></span></div>
<div class="content p-4">
<div class="text-upper">cpu traffic</div>
<div class="text-upper text-bold text-lead">90%</div>
</div>
</div>
<div class="icon-box bg-orange fg-white">
<div class="icon"><span class="mif-calendar"></span></div>
<div class="content">
<div class="p-2">
<div>EVENTS</div>
<div class="text-bold text-leader">41,400</div>
</div>
<div data-role="progress"
data-value="75"
data-small="true"
data-cls-bar="bg-white"
data-cls-back="bg-darkOrange"></div>
<div class="pl-2 pr-2">
<span class="text-small">
70% Increase in 30 Days
</span>
</div>
</div>
</div>
<div class="more-info-box bg-green fg-white">
<div class="content">
<h2 class="text-bold mb-0">53%</h2>
<div>Bounce Rate</div>
</div>
<div class="icon">
<span class="mif-chart-bars"></span>
</div>
<a href="#" class="more"> More info <span class="mif-arrow-right"></span></a>
</div>
<div class="skill-box">
<div class="header bg-orange fg-white">
<img src="images/jeki_chan.jpg" class="avatar">
<div class="title">Jackie Chan</div>
<div class="subtitle">Cool Men</div>
</div>
<ul class="skills">
<li>
<span>Kung-Fu</span>
<span class="float-right">90%</span>
<div data-role="progress" data-value="90" data-small="true"></div>
</li>
<li>
<span>Karate Do</span>
<div data-role="progress" data-value="75" data-small="true" data-cls-bar="bg-cyan"></div>
</li>
<li>
<span>Dancing</span>
<div data-role="progress" data-value="35" data-small="true" data-cls-bar="bg-red"></div>
</li>
<li>
<span>Singing</span>
<div data-role="progress" data-value="45" data-small="true" data-cls-bar="bg-orange"></div>
</li>
</ul>
</div>
<div class="skill-box">
<div class="header bg-green fg-white">
<img src="images/jek_vorobey.jpg" class="avatar">
<div class="title">Jack Sparrow</div>
<div class="subtitle">Pirate captain</div>
</div>
<ul class="skills">
<li>
<span>Projects</span>
<span class="badge bg-orange fg-white">25</span>
</li>
<li>
<span>Tasks</span>
<span class="badge bg-cyan fg-white">5</span>
</li>
<li>
<span>Completed Projects</span>
<span class="badge bg-green fg-white">21</span>
</li>
<li>
<span>Followers</span>
<span class="badge bg-red fg-white">1024</span>
</li>
</ul>
</div>
<div class="social-box">
<div class="header bg-cyan fg-white">
<img src="images/shvarcenegger.jpg" class="avatar">
<div class="title">Arnold Shvarcenegger</div>
<div class="subtitle">Terminator</div>
</div>
<ul class="skills">
<li>
<div class="text-bold">6</div>
<div>AWARDS</div>
</li>
<li>
<div class="text-bold">4</div>
<div>NOMINATIONS</div>
</li>
<li>
<div class="text-bold">36</div>
<div>FILMS</div>
</li>
</ul>
</div>