Text

Skin colors as text

Primary
Primary light
Primary dark
Secondary
Secondary light
Secondary dark
Info
Success
Warning
error
Markup

Toggle example guides Toggle HTML markup

<div pam-Grid>
    <div pam-Unit="1-2 medium:1-5">
        <div grid-block>
            <span pam-skin="primary:text">Primary</span>
        </div>
    </div>
    <div pam-Unit="1-2 medium:1-5">
        <div grid-block>
            <span pam-skin="primary:light:text">Primary light</span>
        </div>
    </div>
    <div pam-Unit="1-2 medium:1-5">
        <div grid-block>
            <span pam-skin="primary:dark:text">Primary dark</span>
        </div>
    </div>
    <div pam-Unit="1-2 medium:1-5">
        <div grid-block>
            <span pam-skin="secondary:text">Secondary</span>
        </div>
    </div>
    <div pam-Unit="1-2 medium:1-5">
        <div grid-block>
            <span pam-skin="secondary:light:text">Secondary light</span>
        </div>
    </div>
    <div pam-Unit="1-2 medium:1-5">
        <div grid-block>
            <span pam-skin="secondary:dark:text">Secondary dark</span>
        </div>
    </div>
    <div pam-Unit="1-2 medium:1-5">
        <div grid-block>
            <span pam-skin="info:text">Info</span>
        </div>
    </div>
    <div pam-Unit="1-2 medium:1-5">
        <div grid-block>
            <span pam-skin="success:text">Success</span>
        </div>
    </div>
    <div pam-Unit="1-2 medium:1-5">
        <div grid-block>
            <span pam-skin="warning:text">Warning</span>
        </div>
    </div>
    <div pam-Unit="1-2 medium:1-5">
        <div grid-block>
            <span pam-skin="error:text">error</span>
        </div>
    </div>
</div>