Cards

A card is a sheet that serves as an entry point to more detailed information.

About cards

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.

Simple card

Card header
Card with header and footer. Card header is used to display card title and footer for some additional information or for custom actions.

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

Image header

Journey To Mountains

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>
                

Likes card

John Doe
Monday at 3:47 PM
John Doe
Monday at 3:47 PM
What a nice photo i took yesterday!
Likes: 112 Comments: 43

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

Icon box

cpu traffic
90%
likes
41,410
sales
1024
BOOKMARKS
41,400
70% Increase in 30 Days
LIKES
41,400
70% Increase in 30 Days
EVENTS
41,400
70% Increase in 30 Days

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

More info box

150

New Orders
More info

53%

Bounce Rate
More info

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

Skill box

Jackie Chan
Cool Men
  • Kung-Fu 90%
  • Karate Do
  • Dancing
  • Singing
Jack Sparrow
Pirate captain
  • Projects 25
  • Tasks 5
  • Completed Projects 21
  • Followers 1024

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

Social box


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