Cards

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

About cards

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

                    <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

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