Cards

Elements that display content and actions on a single context can be called cards. Text and images, should be used in a way that clearly indicates intention. Content can be ordered in different ways and the card it self can have different states.

Default styling

Card

Text to summarize and describe what the card is all about.

raised

Raises the card by applying a larger shadow.

Card

Text to summarize and describe what the card is all about.

flat

No shadow.

Card

Text to summarize and describe what the card is all about.

Markup

<div pam-Card="[modifier]">
    <section pam-Card-Primary-Action>
        <div pam-Card-Primary>
            <h1 pam-Typography="title"> Card</h1>
            <p pam-Typography="body-1">
             Text to summarize and describe what the card is all about.
            </p>
        </div>
    </section>
</div>

Basic

A basic card

Keanu Reeves

By Chuck Norris

Put some text here to summarize and describe what the card is all about.

Markup

<div pam-Card>
    <section pam-Card-Primary-Action>
        <div pam-Card-Media style='background-image: url("https://placekeanu.com/350/200");'>
        </div>
        <div pam-Card-Primary>
            <h1 pam-Typography="title">Keanu Reeves</h1>
            <p pam-Typography="body-1">By Chuck Norris</p>
        </div>
        <div pam-Card-Secondary pam-Typography="body-1">
        Put some text here to summarize and describe what the card is all about.
        </div>
    </section>
    <section pam-Card-Actions>
        <div pam-Card-Action-Buttons>
            <button pam-Button="flat">Action 1</button>
            <button pam-Button="flat">Action 2</button>
        </div>
        <div pam-Card-Action-Icons>
            <button pam-Button="circle flat">
                <i class="material-icons">share</i>
            </button>
            <button pam-Button="circle flat">
                <i class="material-icons">more_vert</i>
            </button>
    </section>
</div>

Header

Card with header.

Keanu Reeves

By Chuck Norris

Put some text here to summarize and describe what the card is all about.

Markup

<div pam-Card>
    <section pam-Card-Primary-Action>
        <div pam-Card-Primary>
            <h1 pam-Typography="title">Keanu Reeves</h1>
            <p pam-Typography="body-1">By Chuck Norris</p>
        </div>
        <div pam-Card-Media style='background-image: url("https://placekeanu.com/350/200");'>
        </div>
        <div pam-Card-Secondary pam-Typography="body-1">
            Put some text here to summarize and describe what the card is all about.
        </div>
    </section>
    <section pam-Card-Actions>
        <div pam-Card-Action-Buttons>
            <button pam-Button="flat">Action 1</button>
            <button pam-Button="flat">Action 2</button>
        </div>
        <div pam-Card-Action-Icons>
            <button pam-Button="circle flat">
                <i class="material-icons">share</i>
            </button>
            <button pam-Button="circle flat">
                <i class="material-icons">more_vert</i>
            </button>
    </section>
</div>

Media

Card with text over media.

Keanu Reeves

By Chuck Norris

Put some text here to summarize and describe what the card is all about.

Markup

<div pam-Card>
    <section pam-Card-Primary-Action>
        <div pam-Card-Media style='background-image: url("https://placekeanu.com/350/200");'>
            <div pam-Card-Media-Content>
        <div pam-Card-Primary>
            <h1 pam-Typography="title">Keanu Reeves</h1>
            <p pam-Typography="body-1">By Chuck Norris</p>
        </div>
            </div>
        </div>
        <div pam-Card-Secondary pam-Typography="body-1">
            Put some text here to summarize and describe what the card is all about.
        </div>
    </section>
    <section pam-Card-Actions>
        <div pam-Card-Action-Buttons>
            <button pam-Button="flat">Action 1</button>
            <button pam-Button="flat">Action 2</button>
        </div>
        <div pam-Card-Action-Icons>
            <button pam-Button="circle flat">
                <i class="material-icons">share</i>
            </button>
            <button pam-Button="circle flat">
                <i class="material-icons">more_vert</i>
            </button>
    </section>
</div>

Hooks

.hook-card .hook-card-action-buttons .hook-card-action-icons .hook-card-actions .hook-card-flat .hook-card-media-content .hook-card-media .hook-card-primary-action .hook-card-primary .hook-card-raised .hook-card-secondary

Variables

These are all the component specific variables that can be used for customization.

Name	Value
@card-background-color	`@skin-surface`
@card-border-radius	`@border-radius`
@card-max-width	`350px`
@card-padding	`@space-16`
@card-shadow-raised	`@shadow-z8`
@card-shadow	`@shadow-z1`
@card-secondary-font	`@font-size-medium`
@card-secondary-padding	`0 @card-padding @card-padding / 2 @card-padding`
@card-primary-action-opacity	`0.08`
@card-media-border-radius	`@card-border-radius @card-border-radius 0 0`
@card-media-16-9	`56.25%`
@card-media-content-color	`@skin-white`
@card-media-content-alignment	`flex-end`
@card-transition-duration	`@transition-duration-default`
@card-transition-property	`all`
@card-transition-timing	`ease`