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

Toggle example guides Toggle HTML 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>