Component documentation

Components

Basics

Components

Objects

Utilities

Basics

Components

Objects

Utilities

Blank slate

Default

#

There are no items yet.

There are no items yet.

<div class="c-blank-slate">
    <p class="u-text-muted c-body-1">There are no items yet.</p>
</div>
<div class="c-blank-slate c-blank-slate--bg-alt">
    <p class="u-text-muted c-body-1">There are no items yet.</p>
</div>
.c-blank-slate
    p.u-text-muted.c-body-1 There are no items yet.

.c-blank-slate.c-blank-slate--bg-alt
    p.u-text-muted.c-body-1 There are no items yet.

Blank slate with action

#

There are no items yet.

There are no items yet.

<div class="c-blank-slate">
    <p class="u-text-muted c-body-1">There are no items yet.</p>
    <button class="c-button c-button--secondary" type="button">
        <span class="c-button__content">
            <div class="o-svg-icon o-svg-icon-add  ">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                </svg>
            </div>
            <span class="c-button__label">Add item</span>
        </span>
    </button>
</div>
<div class="c-blank-slate c-blank-slate--bg-alt">
    <p class="u-text-muted c-body-1">There are no items yet.</p>
    <button class="c-button c-button--secondary" type="button">
        <span class="c-button__content">
            <div class="o-svg-icon o-svg-icon-add  ">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                </svg>
            </div>
            <span class="c-button__label">Add item</span>
        </span>
    </button>
</div>
.c-blank-slate
    p.u-text-muted.c-body-1 There are no items yet.
    +c-button({icon: 'add'}) Add item

.c-blank-slate.c-blank-slate--bg-alt
    p.u-text-muted.c-body-1 There are no items yet.
    +c-button({icon: 'add'}) Add item

Blank slate decorated

#

There are no items yet.

There are no items yet.

<div class="c-blank-slate">
    <div class="c-avatar c-avatar--large">
        <div class="o-svg-icon o-svg-icon-document o-svg-icon--undefined ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6 2C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8C20 7.73478 19.8946 7.48043 19.7071 7.29289L14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2H6ZM12 4V9C12 9.55228 12.4477 10 13 10H18V20H6V4L12 4ZM17.5858 8H14V4.41421L17.5858 8Z" fill="#595959" />
                <path d="M8 13C8 13.5523 8.44772 14 9 14H15C15.5523 14 16 13.5523 16 13C16 12.4477 15.5523 12 15 12H9C8.44772 12 8 12.4477 8 13Z" fill="#595959" />
                <path d="M8 17C8 16.4477 8.44772 16 9 16H15C15.5523 16 16 16.4477 16 17C16 17.5523 15.5523 18 15 18H9C8.44772 18 8 17.5523 8 17Z" fill="#595959" />
            </svg>
        </div>
    </div>
    <p class="u-text-muted c-body-1">There are no items yet.</p>
</div>
<div class="c-blank-slate c-blank-slate--bg-alt">
    <div class="c-avatar c-avatar--large">
        <div class="o-svg-icon o-svg-icon-document o-svg-icon--undefined ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6 2C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8C20 7.73478 19.8946 7.48043 19.7071 7.29289L14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2H6ZM12 4V9C12 9.55228 12.4477 10 13 10H18V20H6V4L12 4ZM17.5858 8H14V4.41421L17.5858 8Z" fill="#595959" />
                <path d="M8 13C8 13.5523 8.44772 14 9 14H15C15.5523 14 16 13.5523 16 13C16 12.4477 15.5523 12 15 12H9C8.44772 12 8 12.4477 8 13Z" fill="#595959" />
                <path d="M8 17C8 16.4477 8.44772 16 9 16H15C15.5523 16 16 16.4477 16 17C16 17.5523 15.5523 18 15 18H9C8.44772 18 8 17.5523 8 17Z" fill="#595959" />
            </svg>
        </div>
    </div>
    <p class="u-text-muted c-body-1">There are no items yet.</p>
</div>
.c-blank-slate
    +c-avatar({icon: 'document', size: 'large'})
    p.u-text-muted.c-body-1 There are no items yet.

.c-blank-slate.c-blank-slate--bg-alt
    +c-avatar({icon: 'document', size: 'large'})
    p.u-text-muted.c-body-1 There are no items yet.

Blank slate decorated with action

#

There are no items yet.

There are no items yet.

<div class="c-blank-slate">
    <div class="c-avatar c-avatar--large">
        <div class="o-svg-icon o-svg-icon-document o-svg-icon--undefined ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6 2C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8C20 7.73478 19.8946 7.48043 19.7071 7.29289L14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2H6ZM12 4V9C12 9.55228 12.4477 10 13 10H18V20H6V4L12 4ZM17.5858 8H14V4.41421L17.5858 8Z" fill="#595959" />
                <path d="M8 13C8 13.5523 8.44772 14 9 14H15C15.5523 14 16 13.5523 16 13C16 12.4477 15.5523 12 15 12H9C8.44772 12 8 12.4477 8 13Z" fill="#595959" />
                <path d="M8 17C8 16.4477 8.44772 16 9 16H15C15.5523 16 16 16.4477 16 17C16 17.5523 15.5523 18 15 18H9C8.44772 18 8 17.5523 8 17Z" fill="#595959" />
            </svg>
        </div>
    </div>
    <p class="u-text-muted c-body-1">There are no items yet.</p>
    <button class="c-button c-button--secondary" type="button">
        <span class="c-button__content">
            <div class="o-svg-icon o-svg-icon-add  ">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                </svg>
            </div>
            <span class="c-button__label">Add item</span>
        </span>
    </button>
</div>
<div class="c-blank-slate c-blank-slate--bg-alt">
    <div class="c-avatar c-avatar--large">
        <div class="o-svg-icon o-svg-icon-document o-svg-icon--undefined ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6 2C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8C20 7.73478 19.8946 7.48043 19.7071 7.29289L14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2H6ZM12 4V9C12 9.55228 12.4477 10 13 10H18V20H6V4L12 4ZM17.5858 8H14V4.41421L17.5858 8Z" fill="#595959" />
                <path d="M8 13C8 13.5523 8.44772 14 9 14H15C15.5523 14 16 13.5523 16 13C16 12.4477 15.5523 12 15 12H9C8.44772 12 8 12.4477 8 13Z" fill="#595959" />
                <path d="M8 17C8 16.4477 8.44772 16 9 16H15C15.5523 16 16 16.4477 16 17C16 17.5523 15.5523 18 15 18H9C8.44772 18 8 17.5523 8 17Z" fill="#595959" />
            </svg>
        </div>
    </div>
    <p class="u-text-muted c-body-1">There are no items yet.</p>
    <button class="c-button c-button--secondary" type="button">
        <span class="c-button__content">
            <div class="o-svg-icon o-svg-icon-add  ">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
                </svg>
            </div>
            <span class="c-button__label">Add item</span>
        </span>
    </button>
</div>
.c-blank-slate
    +c-avatar({icon: 'document', size: 'large'})
    p.u-text-muted.c-body-1 There are no items yet.
    +c-button({icon: 'add'}) Add item

.c-blank-slate.c-blank-slate--bg-alt
    +c-avatar({icon: 'document', size: 'large'})
    p.u-text-muted.c-body-1 There are no items yet.
    +c-button({icon: 'add'}) Add item