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>
    
    <div class="card card-outline">
      <div class="card-header">Header</div>
      <div class="card-content">
        <!-- 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

      • card-outline - additional class that can be added to card element to make it outline

    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>

    Outline Cards

    <div class="card card-outline">
      <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 card-outline">
      <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 card-outline">
      <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 &nbsp;&nbsp; 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>