24Pane

The pane component is a simple multipurpose component that can be used on its own or utilized as a base for other components (like search cards and resource cards). To use the pane as a base component, add the .pane class or the pane() mixin to your custom component. You can pass in custom padding values to the mixin if needed.

While .pane can easily be used by itself, you can also add subcomponents within a .pane, including .pane__header, .pane__body and .pane__footer. You can use rows and columns within each of these as needed. Occasionally, you'll need multiple body sections in a pane. In that case, a border will automatically separate each .pane__body from its neighbor.

Panes commonly appear in dashboards with header and/or footer actions. See examples below.

Header Actions: Add .pane__header-action along with the type class .heading--micro to a link, along with the appropriate icon and action copy.

Footer Actions: Modify the .pane__footer with .pane__footer--action, and it's ready for you to drop in some buttons.

Lastly, you can group sets of .panes together using .pane-group. (See the resource page as an example.)

This is a generic all-purpose pane.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Pane with standard header
Pane body content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Pane with all the works Edit
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
This is a second pane__body, note the border separating this one and the first one.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

Pane with the alternative looks.

Header 1
Header 2

Body Title

Don't have an account?

Join to Serve

Looking for service year opportunities or just to explore Service Year?

Join to Manage an Organization

Want to host service year positions and recruit corps members for them?

Show Markup

<div class="pane">
    <p>This is a generic all-purpose pane.</p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
</div>
<div class="pane">
    <div class="pane__header">
        <span class="heading--micro">Pane with standard header</span>
    </div>
    <div class="pane__body">
        <div class="row">
            <div class="columns medium-12">
                Pane body content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
    </div>
    <div class="pane__footer">
        <div class="row">
            <div class="columns medium-12">
                Optional pane footer
            </div>
        </div>
    </div>
</div>
<div class="pane">
    <div class="pane__header">
        <span class="heading--micro">Pane with all the works</span>
        <a class="pane__header-action heading--micro" href="#">
            <svg class="svg-icon svg-icon--blue" role="img" ><use xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pencil"></use></svg>
            Edit
        </a>
    </div>
    <div class="pane__body">
        <div class="row">
            <div class="columns medium-6">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
            </div>
            <div class="columns medium-6">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
            </div>
        </div>
    </div>
    <div class="pane__body">
        <div class="row">
            <div class="columns medium-6">
                This is a second pane__body, note the border separating this one and the first one.
            </div>
            <div class="columns medium-6">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
            </div>
        </div>
    </div>
    <div class="pane__footer pane__footer--action">
        <div class="row">
            <div class="columns medium-12">
                <div class="sy-button-group text-right">
                    <a href="#" class="button button--secondary button--small-expand">Cancel</a>
                    <a href="#" class="button  button--small-expand">Save</a>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="pane js-filter-pane">
    <div class="pane__header pane__header--black vertical-align">
        <img class="pane__header-icon" src="../../../../static/images/icons/icon-listing.svg" alt="">
        <span class="heading--micro">Search All</span>
    </div>
    <div class="pane__body pl0 pr0">
        <div class="pane__row--search-wrapper">
            <a href="#" class="pane__row--search-wrapper">
                <div class="pane__row--search">
                    <div class="pane__avatar-wrapper">
                        <div class="pane__avatar lazyloaded" data-bg="https://placehold.it/250x150" style="background-image: url('https://placehold.it/250x150');"></div>
                        <noscript>
                            <div class="org-card__avatar" style="background-image: url('https://placehold.it/250x150');"></div>
                        </noscript>
                    </div>

                    <div class="flex1 m1s">
                        <div class="org-card__header b0">
                            <div class="flex1">
                                <h2 class="heading--small org-card__org-name">
                                   Corps Member Name
                                </h2>
                                <p class="search-card__meta">
                                    <span class="search-card__meta-item text-align-left">
                                        <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pointer"></use></svg>
                                        Washington, DC
                                    </span>
                                </p>
                            </div>

                            <div class="text-right show-for-medium">
                                <button name="join" value="" class="button button--secondary mb0">View Corps Members</button>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="pane__row--search-wrapper">
            <a href="#" class="pane__row--search-wrapper">
                <div class="pane__row--search">
                    <div class="pane__avatar-wrapper">
                        <div class="pane__avatar lazyloaded" data-bg="https://placehold.it/250x150" style="background-image: url('https://placehold.it/250x150');"></div>
                        <noscript>
                            <div class="org-card__avatar" style="background-image: url('https://placehold.it/250x150');"></div>
                        </noscript>
                    </div>

                    <div class="flex1 m1s">
                        <div class="org-card__header b0">
                            <div class="flex1">
                                <h2 class="heading--small org-card__org-name">
                                   Corps Member Name
                                </h2>
                                <p class="search-card__meta">
                                    <span class="search-card__meta-item text-align-left">
                                        <svg class="svg-icon svg-icon--deep-medium-navy mrh" role="presentation" ><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/svg/sprite/symbol/sprite.svg#icon--pointer"></use></svg>
                                        Washington, DC
                                    </span>
                                </p>
                            </div>

                            <div class="text-right show-for-medium">
                                <button name="join" value="" class="button button--secondary mb0">View Corps Members</button>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="pane__footer mt0">
        <div class="row">
            <div class="columns medium-12 text-center">
                <a href="" class="link--primary">View All</a>
            </div>
        </div>
    </div>
</div>

<div class="pane pane--complex">
    <div class="pane__header">
        <p class="title">Pane with the alternative looks.</p>
        <span class="header-text">Header 1</span><br>
        <span class="header-text">Header 2</span>
        <div class="header-buttons">
            <a class="button button--secondary mb0 js-open-enroll-modal" href="#">
                <span>Button</span>
            </a>
            <a class="button button--secondary mb0 js-open-enroll-modal" href="#">
                <span>Button</span>
            </a>
            <a href="#" class="button button--main mrh mb0">
                Primary Button
            </a>
        </div>
    </div>
    <div class="pane__body">
        <p class="body-title mb1h">Body Title</p>
    </div>
    <div class="pane__footer mt0">
        <div class="row">
            <div class="columns medium-12 text-center">
                <a href="#" class="link--primary">View All</a>
            </div>
        </div>
    </div>
</div>

    <div class="large-10 large-offset-1 columns mb2">
        <div class="text-center mb2" id="dont_have_an_account_header"><h5>Don't have an account?</h5></div>
        <div class="row">
            <div class="large-6 columns">
                <div class="help-block" style="background-image: url('/static/images/icons/icon-corps-member.svg')">

                    <h3 class="help-block__title">Join to Serve</h3>
                    <div class="help-block__body">
                        <p>Looking for service year opportunities or just to explore Service Year?</p>
                    </div>
                    <div class="help-block__links">
                        <a href="">Join as a Corps Member &rarr;</a>
                    </div>

                </div>
            </div>
            <div class="large-6 columns">
                <div class="help-block" style="background-image: url('/static/images/icons/icon-organization.svg')">

                    <h3 class="help-block__title">Join to Manage an Organization</h3>
                    <div class="help-block__body">
                        <p>Want to host service year positions and recruit corps members for them?</p>
                    </div>
                    <div class="help-block__links">
                        <a href="">Join as an Organization Admin &rarr;</a>
                    </div>

                </div>
            </div>
        </div>
    </div>