Card

There are a couple of different styled cards available. The available card types are: default, simple, caption, default2, album and media.

Title goes here Secondary text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi culpa cum delectus, eligendi perspiciatis quaerat qui recusandae tempora temporibus voluptatum? Asperiores eos expedita ipsa laudantium nulla, optio recusandae ullam vitae.

Action 1

Action 2

    
<div class="card card--default">
    <div class="card__header">
        <img src="//i.pravatar.cc/40" alt="thumbnail" class="card__thumbnail">
        <span class="card__title">Title goes here</span>
        <span class="card__subtitle">Secondary text</span>
    </div>

    <div class="card__media">
        <img src="//placeimg.com/400/200/nature" alt="media">
    </div>

    <div class="card__content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi culpa cum delectus, eligendi perspiciatis quaerat qui recusandae tempora temporibus voluptatum? Asperiores eos expedita ipsa laudantium nulla, optio recusandae ullam vitae.
    </div>

    <div class="card__actions">
        <div class="button button--text">Action 1</div>
        <div class="button button--text">Action 2</div>
    </div>
</div>
    

Title goes here

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam assumenda, at

Action 1

Action 2

    
<div class="card card--simple">
    <div class="card__header">
        <div class="card__title">Title goes here</div>
    </div>

    <div class="card__content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam assumenda, at
    </div>

    <div class="card__media">
        <img src="//placeimg.com/80/80/nature" alt="media">
    </div>

    <div class="card__actions">
        <div class="button button--text">Action 1</div>
        <div class="button button--text">Action 2</div>
    </div>
</div>
    

Caption

Title goes here

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam assumenda, at

Action 1

Action 2

    
<div class="card card--overline">
    <div class="overline">Caption</div>

    <div class="card__header">
        <div class="card__title">Title goes here</div>
    </div>

    <div class="card__content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam assumenda, at
    </div>

    <div class="card__media">
        <img src="//placeimg.com/80/80/nature" alt="media">
    </div>

    <div class="card__actions">
        <div class="button button--text">Action 1</div>
        <div class="button button--text">Action 2</div>
    </div>
</div>
    

Title goes here

Secondary text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad assumenda distinctio doloremque esse explicabo maiores provident quia rerum ut veniam. Accusantium enim expedita fugit in nulla perspiciatis quibusdam sapiente voluptate.

    
<div class="card">
    <div class="card__media">
        <img src="//placeimg.com/400/200/nature" alt="media" class="card--top">
    </div>

    <div class="card__header">
        <div class="card__title">Title goes here</div>
        <div class="card__subtitle">Secondary text</div>
    </div>

    <div class="card__content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad assumenda distinctio doloremque esse explicabo maiores provident quia rerum ut veniam. Accusantium enim expedita fugit in nulla perspiciatis quibusdam sapiente voluptate.
    </div>
</div>
    

Rozes

Under the grave (2016)

Rate this album star_border star_border star_border star_border star_border

    
<div class="card card--album">
    <div class="card__media">
        <img src="//placeimg.com/80/80/nature" alt="media">
    </div>

    <div class="card__header">
        <div class="card__title">Rozes</div>
        <div class="card__subtitle">Under the grave (2016)</div>
    </div>

    <div class="card__content">
        Rate this album

        <i class="material-icons icon">star_border</i>
        <i class="material-icons icon">star_border</i>
        <i class="material-icons icon">star_border</i>
        <i class="material-icons icon">star_border</i>
        <i class="material-icons icon">star_border</i>
    </div>
</div>