iWeb Component Library

Align

Center

<img src="//placehold.it/100x100" class="u-center u-img-responsive">

Pull Left

Curabitur facilisis mi a nunc tempus, vel ornare enim pharetra. Donec mattis tellus iaculis metus fringilla, vel maximus lorem condimentum. In in viverra velit. Vestibulum eu turpis non velit consectetur feugiat vitae et dolor. Aliquam molestie, risus sed tempor bibendum, justo nisi finibus ante, id iaculis neque nibh a risus. Nunc ex orci, ullamcorper vitae ullamcorper ut, facilisis ut lectus. Donec ut lectus ut risus congue maximus. Sed dapibus auctor egestas. In pretium iaculis elit. Suspendisse euismod turpis sollicitudin augue interdum dictum. Quisque ullamcorper libero eu tortor porttitor ullamcorper.

<div class="u-clearfix">
    <img src="//placehold.it/100x100" class="u-pull-left">
    <p>Curabitur facilisis mi a nunc tempus, vel ornare enim pharetra. Donec mattis tellus iaculis metus fringilla, vel maximus lorem condimentum. In in viverra velit. Vestibulum eu turpis non velit consectetur feugiat vitae et dolor. Aliquam molestie, risus sed tempor bibendum, justo nisi finibus ante, id iaculis neque nibh a risus. Nunc ex orci, ullamcorper vitae ullamcorper ut, facilisis ut lectus. Donec ut lectus ut risus congue maximus. Sed dapibus auctor egestas. In pretium iaculis elit. Suspendisse euismod turpis sollicitudin augue interdum dictum. Quisque ullamcorper libero eu tortor porttitor ullamcorper.</p>
</div>

Pull Right

Curabitur facilisis mi a nunc tempus, vel ornare enim pharetra. Donec mattis tellus iaculis metus fringilla, vel maximus lorem condimentum. In in viverra velit. Vestibulum eu turpis non velit consectetur feugiat vitae et dolor. Aliquam molestie, risus sed tempor bibendum, justo nisi finibus ante, id iaculis neque nibh a risus. Nunc ex orci, ullamcorper vitae ullamcorper ut, facilisis ut lectus. Donec ut lectus ut risus congue maximus. Sed dapibus auctor egestas. In pretium iaculis elit. Suspendisse euismod turpis sollicitudin augue interdum dictum. Quisque ullamcorper libero eu tortor porttitor ullamcorper.

<div class="u-clearfix">
    <img src="//placehold.it/100x100" class="u-pull-right">
    <p>Curabitur facilisis mi a nunc tempus, vel ornare enim pharetra. Donec mattis tellus iaculis metus fringilla, vel maximus lorem condimentum. In in viverra velit. Vestibulum eu turpis non velit consectetur feugiat vitae et dolor. Aliquam molestie, risus sed tempor bibendum, justo nisi finibus ante, id iaculis neque nibh a risus. Nunc ex orci, ullamcorper vitae ullamcorper ut, facilisis ut lectus. Donec ut lectus ut risus congue maximus. Sed dapibus auctor egestas. In pretium iaculis elit. Suspendisse euismod turpis sollicitudin augue interdum dictum. Quisque ullamcorper libero eu tortor porttitor ullamcorper.</p>
</div>

Text Center

This is center aligned text

<p class="u-text-center">This is center aligned text</p>

Text Left

This is left aligned text

<p class="u-text-left">This is left aligned text</p>

Text Right

This is right aligned text

<p class="u-text-right">This is right aligned text</p>

Block

Adds padding and explicitly displays the element as a block.

Available classes:

  • .u-block
  • .u-block-top
  • .u-block-bottom
  • .u-block-xs
  • .u-block-xs-top
  • .u-block-xs-bottom
  • .u-block-sm
  • .u-block-sm-top
  • .u-block-sm-bottom
  • .u-block-lg
  • .u-block-lg-top
  • .u-block-lg-bottom
  • .u-block-xl
  • .u-block-xl-top
  • .u-block-xl-bottom

Base

Text inside block

<div class="u-block u-fill-neutral-lighter">
    <p>Text inside block</p>
</div>

Color

Fill

primary pink

.u-fill-primary-pink

neutral black

.u-fill-neutral-black

neutral white

.u-fill-neutral-white

neutral darkest

.u-fill-neutral-darkest

neutral darker

.u-fill-neutral-darker

neutral dark

.u-fill-neutral-dark

neutral light

.u-fill-neutral-light

neutral lighter

.u-fill-neutral-lighter

neutral lightest

.u-fill-neutral-lightest

contextual success

.u-fill-contextual-success

contextual success light

.u-fill-contextual-success-light

contextual warning

.u-fill-contextual-warning

contextual warning light

.u-fill-contextual-warning-light

contextual error

.u-fill-contextual-error

contextual error light

.u-fill-contextual-error-light

contextual info

.u-fill-contextual-info

contextual info light

.u-fill-contextual-info-light

social twitter

.u-fill-social-twitter

social facebook

.u-fill-social-facebook

social google

.u-fill-social-google

social pinterest

.u-fill-social-pinterest

social instagram

.u-fill-social-instagram

social vimeo

.u-fill-social-vimeo

social linkedin

.u-fill-social-linkedin

social youtube

.u-fill-social-youtube

social tumblr

.u-fill-social-tumblr


<div class="grid g-gutter">
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-primary-pink">
                </div>
                <div class="cc-color__body">
                    <h6>primary pink</h6>
                    <p><code>.u-fill-primary-pink</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-neutral-black">
                </div>
                <div class="cc-color__body">
                    <h6>neutral black</h6>
                    <p><code>.u-fill-neutral-black</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-neutral-white">
                </div>
                <div class="cc-color__body">
                    <h6>neutral white</h6>
                    <p><code>.u-fill-neutral-white</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-neutral-darkest">
                </div>
                <div class="cc-color__body">
                    <h6>neutral darkest</h6>
                    <p><code>.u-fill-neutral-darkest</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-neutral-darker">
                </div>
                <div class="cc-color__body">
                    <h6>neutral darker</h6>
                    <p><code>.u-fill-neutral-darker</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-neutral-dark">
                </div>
                <div class="cc-color__body">
                    <h6>neutral dark</h6>
                    <p><code>.u-fill-neutral-dark</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-neutral-light">
                </div>
                <div class="cc-color__body">
                    <h6>neutral light</h6>
                    <p><code>.u-fill-neutral-light</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-neutral-lighter">
                </div>
                <div class="cc-color__body">
                    <h6>neutral lighter</h6>
                    <p><code>.u-fill-neutral-lighter</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-neutral-lightest">
                </div>
                <div class="cc-color__body">
                    <h6>neutral lightest</h6>
                    <p><code>.u-fill-neutral-lightest</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-contextual-success">
                </div>
                <div class="cc-color__body">
                    <h6>contextual success</h6>
                    <p><code>.u-fill-contextual-success</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-contextual-success-light">
                </div>
                <div class="cc-color__body">
                    <h6>contextual success light</h6>
                    <p><code>.u-fill-contextual-success-light</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-contextual-warning">
                </div>
                <div class="cc-color__body">
                    <h6>contextual warning</h6>
                    <p><code>.u-fill-contextual-warning</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-contextual-warning-light">
                </div>
                <div class="cc-color__body">
                    <h6>contextual warning light</h6>
                    <p><code>.u-fill-contextual-warning-light</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-contextual-error">
                </div>
                <div class="cc-color__body">
                    <h6>contextual error</h6>
                    <p><code>.u-fill-contextual-error</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-contextual-error-light">
                </div>
                <div class="cc-color__body">
                    <h6>contextual error light</h6>
                    <p><code>.u-fill-contextual-error-light</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-contextual-info">
                </div>
                <div class="cc-color__body">
                    <h6>contextual info</h6>
                    <p><code>.u-fill-contextual-info</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-contextual-info-light">
                </div>
                <div class="cc-color__body">
                    <h6>contextual info light</h6>
                    <p><code>.u-fill-contextual-info-light</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-social-twitter">
                </div>
                <div class="cc-color__body">
                    <h6>social twitter</h6>
                    <p><code>.u-fill-social-twitter</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-social-facebook">
                </div>
                <div class="cc-color__body">
                    <h6>social facebook</h6>
                    <p><code>.u-fill-social-facebook</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-social-google">
                </div>
                <div class="cc-color__body">
                    <h6>social google</h6>
                    <p><code>.u-fill-social-google</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-social-pinterest">
                </div>
                <div class="cc-color__body">
                    <h6>social pinterest</h6>
                    <p><code>.u-fill-social-pinterest</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-social-instagram">
                </div>
                <div class="cc-color__body">
                    <h6>social instagram</h6>
                    <p><code>.u-fill-social-instagram</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-social-vimeo">
                </div>
                <div class="cc-color__body">
                    <h6>social vimeo</h6>
                    <p><code>.u-fill-social-vimeo</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-social-linkedin">
                </div>
                <div class="cc-color__body">
                    <h6>social linkedin</h6>
                    <p><code>.u-fill-social-linkedin</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-social-youtube">
                </div>
                <div class="cc-color__body">
                    <h6>social youtube</h6>
                    <p><code>.u-fill-social-youtube</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-fill-social-tumblr">
                </div>
                <div class="cc-color__body">
                    <h6>social tumblr</h6>
                    <p><code>.u-fill-social-tumblr</code></p>
                </div>
            </div>
        </div>
    </div>

Text

Text
primary pink

.u-text-primary-pink

Text
neutral black

.u-text-neutral-black

Text
neutral white

.u-text-neutral-white

Text
neutral darkest

.u-text-neutral-darkest

Text
neutral darker

.u-text-neutral-darker

Text
neutral dark

.u-text-neutral-dark

Text
neutral light

.u-text-neutral-light

Text
neutral lighter

.u-text-neutral-lighter

Text
neutral lightest

.u-text-neutral-lightest

Text
contextual success

.u-text-contextual-success

Text
contextual success light

.u-text-contextual-success-light

Text
contextual warning

.u-text-contextual-warning

Text
contextual warning light

.u-text-contextual-warning-light

Text
contextual error

.u-text-contextual-error

Text
contextual error light

.u-text-contextual-error-light

Text
contextual info

.u-text-contextual-info

Text
contextual info light

.u-text-contextual-info-light

social twitter

.u-text-social-twitter

social facebook

.u-text-social-facebook

Text
social google

.u-text-social-google

Text
social pinterest

.u-text-social-pinterest

Text
social instagram

.u-text-social-instagram

Text
social vimeo

.u-text-social-vimeo

Text
social linkedin

.u-text-social-linkedin

Text
social youtube

.u-text-social-youtube

Text
social tumblr

.u-text-social-tumblr


<div class="grid g-gutter">
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-primary-pink">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>primary pink</h6>
                    <p><code>.u-text-primary-pink</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-neutral-black">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>neutral black</h6>
                    <p><code>.u-text-neutral-black</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-neutral-white">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>neutral white</h6>
                    <p><code>.u-text-neutral-white</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-neutral-darkest">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>neutral darkest</h6>
                    <p><code>.u-text-neutral-darkest</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-neutral-darker">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>neutral darker</h6>
                    <p><code>.u-text-neutral-darker</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-neutral-dark">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>neutral dark</h6>
                    <p><code>.u-text-neutral-dark</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-neutral-light">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>neutral light</h6>
                    <p><code>.u-text-neutral-light</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-neutral-lighter">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>neutral lighter</h6>
                    <p><code>.u-text-neutral-lighter</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-neutral-lightest">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>neutral lightest</h6>
                    <p><code>.u-text-neutral-lightest</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-contextual-success">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>contextual success</h6>
                    <p><code>.u-text-contextual-success</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-contextual-success-light">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>contextual success light</h6>
                    <p><code>.u-text-contextual-success-light</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-contextual-warning">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>contextual warning</h6>
                    <p><code>.u-text-contextual-warning</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-contextual-warning-light">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>contextual warning light</h6>
                    <p><code>.u-text-contextual-warning-light</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-contextual-error">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>contextual error</h6>
                    <p><code>.u-text-contextual-error</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-contextual-error-light">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>contextual error light</h6>
                    <p><code>.u-text-contextual-error-light</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-contextual-info">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>contextual info</h6>
                    <p><code>.u-text-contextual-info</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-contextual-info-light">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>contextual info light</h6>
                    <p><code>.u-text-contextual-info-light</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-social-twitter">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>social twitter</h6>
                    <p><code>.u-text-social-twitter</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-social-facebook">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>social facebook</h6>
                    <p><code>.u-text-social-facebook</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-social-google">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>social google</h6>
                    <p><code>.u-text-social-google</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-social-pinterest">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>social pinterest</h6>
                    <p><code>.u-text-social-pinterest</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-social-instagram">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>social instagram</h6>
                    <p><code>.u-text-social-instagram</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-social-vimeo">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>social vimeo</h6>
                    <p><code>.u-text-social-vimeo</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-social-linkedin">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>social linkedin</h6>
                    <p><code>.u-text-social-linkedin</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-social-youtube">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>social youtube</h6>
                    <p><code>.u-text-social-youtube</code></p>
                </div>
            </div>
        </div>
            <div class="g-col-xs-6 g-col-sm-4 g-col-lg-3 g-col-xl-2">
            <div class="cc-color">
                <div class="cc-color__swatch u-text-social-tumblr">
                    <strong>Text</strong>
                </div>
                <div class="cc-color__body">
                    <h6>social tumblr</h6>
                    <p><code>.u-text-social-tumblr</code></p>
                </div>
            </div>
        </div>
    </div>

Container

Containers are centered with various max widths.

Available classes:
  • .u-container
  • .u-container-sm
  • .u-container-md
  • .u-container-lg
  • .u-container-xl

Base

I am in a container
<div class="u-container">
    <div class="u-block u-fill-neutral-lighter">I am in a container</div>
</div>

Full Height

Base

1
2
3
1 
<div class="grid g-gutter">
    <div class="g-col-xs-6 u-full-height">
        <div class="u-fill-neutral-lighter">
            1<br>
            2<br>
            3
        </div>
    </div>
    <div class="g-col-xs-6 u-full-height">
        <div class="u-fill-neutral-lighter">
            1
        </div>
    </div>
</div>

Grid

Columns

Grids are 12 columns at all screen sizes. At each breakpoint columns can be adapted. The following classes are available for columns:

  • .g-col-xs-1
  • .g-col-xs-2
  • .g-col-xs-3
  • .g-col-xs-4
  • .g-col-xs-5
  • .g-col-xs-6
  • .g-col-xs-7
  • .g-col-xs-8
  • .g-col-xs-9
  • .g-col-xs-10
  • .g-col-xs-11
  • .g-col-xs-12
  • .g-col-sm-1
  • .g-col-sm-2
  • .g-col-sm-3
  • .g-col-sm-4
  • .g-col-sm-5
  • .g-col-sm-6
  • .g-col-sm-7
  • .g-col-sm-8
  • .g-col-sm-9
  • .g-col-sm-10
  • .g-col-sm-11
  • .g-col-sm-12
  • .g-col-md-1
  • .g-col-md-2
  • .g-col-md-3
  • .g-col-md-4
  • .g-col-md-5
  • .g-col-md-6
  • .g-col-md-7
  • .g-col-md-8
  • .g-col-md-9
  • .g-col-md-10
  • .g-col-md-11
  • .g-col-md-12
  • .g-col-lg-1
  • .g-col-lg-2
  • .g-col-lg-3
  • .g-col-lg-4
  • .g-col-lg-5
  • .g-col-lg-6
  • .g-col-lg-7
  • .g-col-lg-8
  • .g-col-lg-9
  • .g-col-lg-10
  • .g-col-lg-11
  • .g-col-lg-12
  • .g-col-xl-1
  • .g-col-xl-2
  • .g-col-xl-3
  • .g-col-xl-4
  • .g-col-xl-5
  • .g-col-xl-6
  • .g-col-xl-7
  • .g-col-xl-8
  • .g-col-xl-9
  • .g-col-xl-10
  • .g-col-xl-11
  • .g-col-xl-12

Gutters

Gutters add spacing on the left and right of each column. All gutters are available for both x and y, just x or just y. Classes available for gutters:

  • .g-gutter-x
  • .g-gutter
  • .g-gutter-y
  • .g-gutter-x-sm
  • .g-gutter-sm
  • .g-gutter-y-sm
  • .g-gutter-x-lg
  • .g-gutter-lg
  • .g-gutter-y-lg

Center

Grids can be centered vertically, horizontally or both at the same time. Classes available:

  • .g-center-x
  • .g-center-y
  • .g-center

Base

<div class="grid g-gutter">
    <div class="g-col-xs-12"><div class="u-block u-fill-neutral-lighter"></div></div>
</div>

<div class="grid g-gutter">
    <div class="g-col-xs-6"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-6"><div class="u-block u-fill-neutral-lighter"></div></div>
</div>

<div class="grid g-gutter">
    <div class="g-col-xs-4"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-4"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-4"><div class="u-block u-fill-neutral-lighter"></div></div>
</div>

<div class="grid g-gutter">
    <div class="g-col-xs-3"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-3"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-3"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-3"><div class="u-block u-fill-neutral-lighter"></div></div>
</div>

<div class="grid g-gutter">
    <div class="g-col-xs-2"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-2"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-2"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-2"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-2"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-2"><div class="u-block u-fill-neutral-lighter"></div></div>
</div>

<div class="grid g-gutter">
    <div class="g-col-xs-1"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-1"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-1"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-1"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-1"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-1"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-1"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-1"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-1"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-1"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-1"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-1"><div class="u-block u-fill-neutral-lighter"></div></div>
</div>

Collapse

<div class="grid g-gutter-x g-collapse">
    <div>
        <div class="u-block u-fill-neutral-lighter"></div>
    </div>
    <div>
        <div class="u-block u-fill-neutral-lighter"></div>
    </div>
</div>

Reverse

1
2
3
4
<div class="grid g-gutter-x g-reverse">
    <div class="g-col-xs-3"><div class="u-block u-fill-neutral-lighter">1</div></div>
    <div class="g-col-xs-3"><div class="u-block u-fill-neutral-lighter">2</div></div>
    <div class="g-col-xs-3"><div class="u-block u-fill-neutral-lighter">3</div></div>
    <div class="g-col-xs-3"><div class="u-block u-fill-neutral-lighter">4</div></div>
</div>

Space

<div class="grid g-space">
    <div class="g-col-xs-3"><div class="u-block u-fill-neutral-lighter"></div></div>
    <div class="g-col-xs-3"><div class="u-block u-fill-neutral-lighter"></div></div>
</div>

Stretch First

<div class="grid g-gutter-x g-stretch-first">
    <div>
        <div class="u-block u-fill-neutral-lighter"></div>
    </div>
    <div>
        <div class="u-block u-fill-neutral-lighter"></div>
    </div>
</div>

Stretch Last

<div class="grid g-gutter-x g-stretch-last">
    <div>
        <div class="u-block u-fill-neutral-lighter"></div>
    </div>
    <div>
        <div class="u-block u-fill-neutral-lighter"></div>
    </div>
</div>

List

Inline

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
<ul class="u-list-inline">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

Ordered

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
<ul class="u-list-ordered">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

Unordered

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
<ol class="u-list-unordered">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ol>

Unstyled

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
<ol class="u-list-unstyled">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ol>

Ratio

Makes an element a fixed ratio. Default is square with options for 16x9 and 4x3. Direct descendants fill the area. Images keep aspect ratio and will not stretch above their natural size.

Base

<div class="u-ratio u-fill-neutral-light cc-pattern-width-sm">
    <img src="/build/img/placeholder/300x300.jpg" />
</div>

16x9

<div class="u-ratio u-ratio--16x9 cc-pattern-width-lg">
    <iframe src="https://www.youtube.com/embed/qrO4YZeyl0I" frameborder="0" allowfullscreen=""></iframe>
</div>

4x3

<div class="u-ratio u-ratio--4x3 cc-pattern-width-lg">
    <iframe src="https://www.youtube.com/embed/qrO4YZeyl0I" frameborder="0" allowfullscreen=""></iframe>
</div>

Landscape

<div class="u-ratio u-fill-neutral-light cc-pattern-width-sm">
    <img src="/build/img/placeholder/1240x400.jpg" />
</div>

Portrait

<div class="u-ratio u-fill-neutral-light cc-pattern-width-sm">
    <img src="http://pims.iweb.co.uk/100x1000?fg=ff0000&bg=000000" />
</div>

Section

Sections add large margin above, below or both to a section.

Available classes:

  • .u-section-xs
  • .u-section-xs-top
  • .u-section-xs-bottom
  • .u-section-sm
  • .u-section-sm-top
  • .u-section-sm-bottom
  • .u-section
  • .u-section-top
  • .u-section-bottom
  • .u-section-lg
  • .u-section-lg-top
  • .u-section-lg-bottom

Base

I am in a section with margin top and bottom


I am in a section with margin top only


I am in a section with bottom top only

<div class="u-clearfix u-fill-neutral-lighter">
    <div class="u-section">
        <p>I am in a section with margin top and bottom</p>
    </div>
</div>
<br>
<div class="u-clearfix u-fill-neutral-lighter">
    <div class="u-section-top">
        <p>I am in a section with margin top only</p>
    </div>
</div>
<br>
<div class="u-clearfix u-fill-neutral-lighter">
    <div class="u-section-bottom">
        <p>I am in a section with bottom top only</p>
    </div>
</div>

Separator

Separators add a border around a div or to one specific side.

Available classes:

  • .u-separator
  • .u-separator-top
  • .u-separator-left
  • .u-separator-bottom
  • .u-separator-right

Base

Top
Top
Bottom
Left
Right 
<div class="grid g-gutter">
    <div>
        <div class="u-block u-separator u-fill-neutral-lightest">
            Top
        </div>
    </div>
    <div class="g-col-xs-6 g-col-md-3">
        <div class="u-block u-separator-top u-fill-neutral-lightest">
            Top
        </div>
    </div>
    <div class="g-col-xs-6 g-col-md-3">
        <div class="u-block u-separator-bottom u-fill-neutral-lightest">
            Bottom
        </div>
    </div>
    <div class="g-col-xs-6 g-col-md-3">
        <div class="u-block u-separator-left u-fill-neutral-lightest">
            Left
        </div>
    </div>
    <div class="g-col-xs-6 g-col-md-3">
        <div class="u-block u-separator-right u-fill-neutral-lightest">
            Right
        </div>
    </div>
</div>

Space

Adds small margins to elements. Can pass through a size and position. Position accepts top or bottom. Size accepts values inside the spacing variables array. Position is optional. Will apply to both top and bottom without it.

Available classes:

  • .u-space
  • .u-space-top
  • .u-space-bottom
  • .u-space-xs
  • .u-space-xs-top
  • .u-space-xs-bottom
  • .u-space-sm
  • .u-space-sm-top
  • .u-space-sm-bottom
  • .u-space-lg
  • .u-space-lg-top
  • .u-space-lg-bottom
  • .u-space-xl
  • .u-space-xl-top
  • .u-space-xl-bottom

Base

Text inside block

<div class="u-clearfix u-fill-neutral-lightest">
    <div class="u-space u-fill-neutral-lighter">
        <p>Text inside block</p>
    </div>
</div>

Toggle

Base

Toggle content

Some content inside toggle.

<p><a href="#" data-cc-toggle-action="toggle" data-cc-toggle-target="#demo-toggle">Toggle content</a></p>

<div class="u-toggle" id="demo-toggle">
    <p>Some content inside toggle.</p>
</div>

Media

Toggle content on screen(sm)

Some content inside toggle.

<p><a href="#" data-cc-toggle-action="toggle" data-cc-toggle-target="#demo-toggle-sm">Toggle content on screen(sm)</a></p>

<div class="u-toggle-sm" id="demo-toggle-sm">
    <p>Some content inside toggle.</p>
</div>

Visible

Visibibility classes show and hide content at different breakpoints.

Visible Classes

  • .u-visible-*`
  • .u-visible-
  • .u-visible
  • .u-visible-inline
  • .u-visible-inline-block
  • .u-visible-sm
  • .u-visible-sm-inline
  • .u-visible-sm-inline-block
  • .u-visible-md
  • .u-visible-md-inline
  • .u-visible-md-inline-block
  • .u-visible-lg
  • .u-visible-lg-inline
  • .u-visible-lg-inline-block
  • .u-visible-xl
  • .u-visible-xl-inline
  • .u-visible-xl-inline-block
  • .u-visible-xs
  • .u-visible-xs-inline
  • .u-visible-xs-inline-block

Hidden Classes

  • .u-hidden
  • .u-hidden-sm
  • .u-hidden-md
  • .u-hidden-lg
  • .u-hidden-xl
  • .u-hidden-xs

Visually Hidden Classes

  • .u-visually-hidden