Background

Skin colors as background.

Primary
Primary light
Primary dark
Secondary
Secondary light
Secondary dark
Background
Surface
Error
Info
Success
Warning
Markup

Toggle example guides Toggle HTML markup

<div pam-Grid>
    <div pam-Unit="1-2 medium:1-3">
        <div pam-skin="primary" grid-block="fixed small">
            <span pam-skin="on:primary">Primary</span>
        </div>
    </div>
    <div pam-Unit="1-2 medium:1-3">
        <div pam-skin="primary:light" grid-block="fixed small">
            <span pam-skin="on:primary:light">Primary light</span>
        </div>
    </div>
    <div pam-Unit="1-2 medium:1-3">
        <div pam-skin="primary:dark" grid-block="fixed small">
            <span pam-skin="on:primary:dark">Primary dark</span>
        </div>
    </div>
    <div pam-Unit="1-2 medium:1-3">
        <div pam-skin="secondary" grid-block="fixed small">
            <span pam-skin="on:secondary">Secondary</span>
        </div>
    </div>
    <div pam-Unit="1-2 medium:1-3">
        <div pam-skin="secondary:light" grid-block="fixed small">
            <span pam-skin="on:secondary:light">Secondary light</span>
        </div>
    </div>
    <div pam-Unit="1-2 medium:1-3">
        <div pam-skin="secondary:dark" grid-block="fixed small">
            <span pam-skin="on:secondary:dark">Secondary dark</span>
        </div>
    </div>
    <div pam-Unit="1-2 medium:1-3">
        <div pam-skin="background" grid-block="fixed small">
            <span pam-skin="on:background">Background</span>
        </div>
    </div>
    <div pam-Unit="1-2 medium:1-3">
        <div pam-skin="surface" grid-block="fixed small">
            <span pam-skin="on:surface">Surface</span>
        </div>
    </div>
    <div pam-Unit="1-2 medium:1-3">
        <div pam-skin="error" grid-block="fixed small">
            <span pam-skin="on:error">Error</span>
        </div>
    </div>
    <div pam-Unit="1-2 medium:1-3">
        <div pam-skin="info" grid-block="fixed small">
            <span pam-skin="on:info">Info</span>
        </div>
    </div>
    <div pam-Unit="1-2 medium:1-3">
        <div pam-skin="success" grid-block="fixed small">
            <span pam-skin="on:success">Success</span>
        </div>
    </div>
    <div pam-Unit="1-2 medium:1-3">
        <div pam-skin="warning" grid-block="fixed small">
            <span pam-skin="on:warning">Warning</span>
        </div>
    </div>
</div>