Cards

Cards, along with List View, is a great way to contain and orginize your information. Cards contain 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.

Card Layout

Lets look at a basic card HTML layout

<div class="card">
    <div class="card-header">Header</div>
    <div class="card-content">
        <!-- Card content -->
    </div>
    <div class="card-footer">Footer</div>
</div>

<div class="card">
    <div class="card-header">Header</div>
    <div class="card-content card-content-padding">
        <!-- Card content -->
    </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 card-content-padding"> - Additional card-content-padding used to add extra padding to card-content

Note that "card-header" and "card-footer" have a flexbox layout (display:flex) where as items have a center vertical alignment. If you need to align items to top or to bottom of header/footer, then you may use additional typography classes, for example:

<div class="card-header align-items-flex-start"> - align header items by header top line

<div class="card-footer align-items-flex-end"> - align footer items by footer bottom line

Examples

Simple Cards

<div class="card">
  <div class="card-content card-content-padding">This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element.</div>
</div>
<div class="card">
  <div class="card-header">Card header</div>
  <div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions.</div>
  <div class="card-footer">Card Footer</div>
</div>
<div class="card">
  <div class="card-content card-content-padding">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>

Styled Cards

.demo-card-header-pic .card-header {
  height: 40vw;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.demo-card-header-pic .card-content-padding .date{
  color: #8e8e93;
}
<div class="card demo-card-header-pic">
  <div style="background-image:url(http://lorempixel.com/1000/600/nature/3/)" class="card-header align-items-flex-end">Journey To Mountains</div>
  <div class="card-content card-content-padding">
    <p class="date">Posted on January 21, 2015</p>
    <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit...</p>
  </div>
  <div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Read more</a></div>
</div>
<div class="card demo-card-header-pic">
  <div style="background-image:url(http://lorempixel.com/1000/600/people/6/)" class="card-header align-items-flex-end">Lorem Ipsum</div>
  <div class="card-content card-content-padding">
    <p class="date">Posted on January 21, 2015</p>
    <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit...</p>
  </div>
  <div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Read more</a></div>
</div>

Facebook Cards

.demo-facebook-card .card-header {
  display: block;
  padding: 10px;
}
.demo-facebook-card .demo-facebook-avatar {
  float: left;
}
.demo-facebook-card .demo-facebook-name {
  margin-left: 44px;
  font-size: 14px;
  font-weight: 500;
}
.demo-facebook-card .demo-facebook-date {
  margin-left: 44px;
  font-size: 13px;
  color: #8e8e93;
}
.demo-facebook-card .card-footer {
  background: #fafafa;
}
.demo-facebook-card .card-footer a {
  color: #81848b;
  font-weight: 500;
}
.demo-facebook-card .card-content img {
  display: block;
}
.demo-facebook-card .card-content-padding {
  padding: 15px 10px;
}
.demo-facebook-card .card-content-padding .likes {
  color: #8e8e93;
}
<div class="card demo-facebook-card">
  <div class="card-header">
    <div class="demo-facebook-avatar"><img src="http://lorempixel.com/68/68/people/1/" width="34" height="34"/></div>
    <div class="demo-facebook-name">John Doe</div>
    <div class="demo-facebook-date">Monday at 3:47 PM</div>
  </div>
  <div class="card-content"> <img src="http://lorempixel.com/1000/700/nature/8/" width="100%"/></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="card demo-facebook-card">
  <div class="card-header">
    <div class="demo-facebook-avatar"><img src="http://lorempixel.com/68/68/people/1/" width="34" height="34"/></div>
    <div class="demo-facebook-name">John Doe</div>
    <div class="demo-facebook-date">Monday at 2:15 PM</div>
  </div>
  <div class="card-content card-content-padding">
    <p>What a nice photo i took yesterday!</p><img src="http://lorempixel.com/1000/700/nature/8/" width="100%"/>
    <p class="likes">Likes: 112    Comments: 43</p>
  </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>

Cards With List View

<div class="card">
  <div class="card-content">
    <div class="list links-list">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
      </ul>
    </div>
  </div>
</div>
<div class="card">
  <div class="card-header">New Releases:</div>
  <div class="card-content">
    <div class="list media-list">
      <ul>
        <li class="item-content">
          <div class="item-media"><img src="http://lorempixel.com/88/88/fashion/4" 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>
        <li class="item-content">
          <div class="item-media"><img src="http://lorempixel.com/88/88/fashion/5" width="44"/></div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Don't Stop Me Now</div>
            </div>
            <div class="item-subtitle">Queen</div>
          </div>
        </li>
        <li class="item-content">
          <div class="item-media"><img src="http://lorempixel.com/88/88/fashion/6" width="44"/></div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Billie Jean</div>
            </div>
            <div class="item-subtitle">Michael Jackson</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="card-footer"> <span>January 20, 2015</span><span>5 comments</span></div>
</div>