Component documentation

Basics

Components

Objects

Utilities

Panels are used to separate page content into logical sections. A panel can consist of a panel header, a panel body, and a panel footer.

Panel simple

This is the simplest panel possible.

Panel content

<div class="c-panel">
    <div class="c-panel__body">
        <p>Panel content</p>
    </div>
</div>

.c-panel
    .c-panel__body
        p Panel content

Panel simple

A panel usually has a header. This example uses a simplified markup structure in the header.

Panel content

<div class="c-panel">
    <div class="c-panel__header">
        <h2 class="c-panel__title">Panel header</h2>
    </div>
    <div class="c-panel__body">
        <p>Panel content</p>
    </div>
</div>

.c-panel
    .c-panel__header
        h2.c-panel__title Panel header
    .c-panel__body
        p Panel content

Panel (with toolbar)

This example uses a toolbar markup structure in the header, to allow for the positioning of controls. See toolbar.

Panel content

<div class="c-panel">
    <div class="c-panel__header">
        <div class="c-toolbar">
            <div class="c-toolbar__left">
                <div class="c-toolbar__item">
                    <h2 class="c-toolbar-title">Panel title</h2>
                </div>
            </div>
            <div class="c-toolbar__right">
                <div class="c-toolbar__item">
                    <div class="c-button-toolbar">
                        <button class="c-button c-button--secondary" type="button">
                            <span class="c-button__content">
                                <span class="c-button__label">Button Label</span>
                            </span>
                        </button>
                        <button class="c-button c-button--primary" type="button">
                            <span class="c-button__content">
                                <span class="c-button__label">Button Label</span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="c-panel__body">
        <p>Panel content</p>
    </div>
</div>

.c-panel
    .c-panel__header
        .c-toolbar
            .c-toolbar__left
                .c-toolbar__item
                    h2.c-toolbar-title Panel title
            .c-toolbar__right
                .c-toolbar__item
                    .c-button-toolbar
                        +c-button({}) Button Label
                        +c-button({skin: 'primary'}) Button Label
    .c-panel__body
        p Panel content