Cards, along with List View, is a one more great way to contain and orginize your information. Cards contains unique related data, for example, a photo, text, and link all about a single subject. Cards are typically an entry point to more complex and detailed information.
Let's look at basic card HTML layout
<div class="card"> <div class="card-header">Header</div> <div class="card-content"> <div class="card-content-inner">Card content</div> </div> <div class="card-footer">Footer</div> </div>
Where
<div class="card"> - Card container
<div class="card-header"> - Card header. Mostly used to display card title. Optional
<div class="card-footer"> - Card footer is used for some additional information or for custom actions/links. Optional
<div class="card-content"> - Main container for card content. Required
<div class="card-content-inner"> - Additional inner wrapper. Used to add additional padding to card-content. Optional
Note, that "card-header" and "card-footer" has flexbox layout (display:flex) where items have center vertical alignment. If you need to align items to top or to bottom of header/footer, then you may use additional valign attribute, for exame:
<div class="card-header" valgin="top"> - align header items by header top line
<div class="card-footer" valgin="bottom"> - align footer items by footer bottom line
<div class="content-block-title">Simple Cards</div> <div class="card"> <div class="card-content"> <div class="card-content-inner">This is simple card with plain text. But card could contain its own header, footer, list view, image, and any elements inside.</div> </div> </div> <div class="card"> <div class="card-header">Card header</div> <div class="card-content"> <div class="card-content-inner">Card with header and footer. Card header is used to display card title and footer for some additional information or for custom actions.</div> </div> <div class="card-footer">Card Footer</div> </div> <div class="card"> <div class="card-content"> <div class="card-content-inner">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div> </div> </div>
<style>
.demo-card-header-pic .card-header {
height: 40vw;
background-size: cover;
background-position: center;
}
</style>
<div class="content-block-title">Styled Cards</div>
<div class="card demo-card-header-pic">
<div style="background-image:url(...)" valign="bottom" class="card-header color-white no-border">Journey To Mountains</div>
<div class="card-content">
<div class="card-content-inner">
<p class="color-gray">Posted on January 21, 2015</p>
<p>Quisque eget vestibulum nulla...</p>
</div>
</div>
<div class="card-footer">
<a href="#" class="link">Like</a>
<a href="#" class="link">Read more</a>
</div>
</div>
...<style>
.facebook-card .card-header {
display: block;
padding: 10px;
}
.facebook-card .facebook-avatar {
float: left;
}
.facebook-card .facebook-name {
margin-left: 44px;
font-size: 14px;
font-weight: 500;
}
.facebook-card .facebook-date {
margin-left: 44px;
font-size: 13px;
color: #8e8e93;
}
.facebook-card .card-footer {
background: #fafafa;
}
.facebook-card .card-footer a {
color: #81848b;
font-weight: 500;
}
.facebook-card .card-content img {
display: block;
}
.facebook-card .card-content-inner {
padding: 15px 10px;
}
</style>
<div class="content-block-title">Facebook Cards</div>
<div class="card facebook-card">
<div class="card-header no-border">
<div class="facebook-avatar"><img src="..." width="34" height="34"></div>
<div class="facebook-name">John Doe</div>
<div class="facebook-date">Monday at 3:47 PM</div>
</div>
<div class="card-content"><img src="..." width="100%"></div>
<div class="card-footer no-border">
<a href="#" class="link">Like</a>
<a href="#" class="link">Comment</a>
<a href="#" class="link">Share</a>
</div>
</div>
<div class="card facebook-card">
<div class="card-header">
<div class="facebook-avatar"><img src="..." width="34" height="34"></div>
<div class="facebook-name">John Doe</div>
<div class="facebook-date">Monday at 2:15 PM</div>
</div>
<div class="card-content">
<div class="card-content-inner">
<p>What a nice photo i took yesterday!</p>
<img src="..." width="100%">
<p class="color-gray">Likes: 112 Comments: 43</p>
</div>
</div>
<div class="card-footer">
<a href="#" class="link">Like</a>
<a href="#" class="link">Comment</a>
<a href="#" class="link">Share</a>
</div>
</div><div class="content-block-title">Cards With List View</div> <div class="card"> <div class="card-content"> <div class="list-block"> <ul> <li> <a href="#" class="item-link item-content"> <div class="item-media"><i class="icon icon-f7"></i></div> <div class="item-inner"> <div class="item-title">Link 1</div> </div> </a> </li> ... </ul> </div> </div> </div>
<div class="card"> <div class="card-header">New Releases:</div> <div class="card-content"> <div class="list-block media-list"> <ul> <li class="item-content"> <div class="item-media"> <img src="..." width="44"> </div> <div class="item-inner"> <div class="item-title-row"> <div class="item-title">Yellow Submarine</div> </div> <div class="item-subtitle">Beatles</div> </div> </li> ... </ul> </div> </div> <div class="card-footer"> <span>January 20, 2015</span> <span>5 comments</span> </div> </div>
It could be useful to use Cards as elements of List View, in this case it would be possible to use Seearch Bar, Virtual List and other List View features with Cards. In this case we need to add additional cards-list class to <div class="list-block">
<div class="list-block cards-list"> <ul> <li class="card"> <div class="card-header">Card Header</div> <div class="card-content"> <div class="card-content-inner">Card content</div> </div> <div class="card-footer">Card footer</div> </li> <li class="card"> <div class="card-header">Card Header</div> <div class="card-content"> <div class="card-content-inner">Card content</div> </div> <div class="card-footer">Card footer</div> </li> ... </ul> </div>