SDC Pattern Library

Panel

Rationale

Panels are used to draw information to the attention of the user.

Default

This panel is used to provide information in a neutral context.

Error

Used to provide feedback to the user that something is in an error state. This can range form input validation errors to server downtime.

Content should be descriptive of the error and always direct the user towards a resolution.

Success

Success panels are used to provide positive, reassuring feedback to the user.

Warning

Warning panels are to draw the attention of the user to information before an error state occurs. The message should be succinct, descriptive and provide sufficient detail to the user to avoid an error state.

Spacious variants

Use of the .panel--spacious class provides increased padding for simple variants.

Research

Usage

Scope

Global

Dependencies

  • /components/_panel.scss
  • vars/_colours.sccs
<!-- Information (default) -->
<div class="panel panel--info">
    <div class="panel__header">
        <div class="venus">Information</div>
    </div>
    <div class="panel__body">
        <div>Here's some important information.</div>
    </div>
</div>


<!-- Success -->
<div class="panel panel--success">
    <div class="panel__header">
        <div class="venus">Success</div>
    </div>
    <div class="panel__body">
        <div>You did something correctly.</div>
    </div>
</div>


<!-- Warning -->
<div class="panel panel--warn">
    <div class="panel__header">
        <div class="venus">Warning</div>
    </div>
    <div class="panel__body">
        <div>You've done something that is a bit bad, you can carry on though.</div>
    </div>
</div>


<!-- Error -->
<div class="panel panel--error">
    <div class="panel__header">
        <div class="venus">Error</div>
    </div>
    <div class="panel__body">
        <p class="mars">This is wrong, fix it before continuing.</p>
        <ul class="list list--bare">
            <li class="list__item mars">
                1) <a class="js-inpagelink" href="#1">Select an answer to continue.</a>
            </li>
        </ul>
    </div>
</div>


<!-- Inline information (default) -->



<!-- Inline success -->
<div class="panel panel--simple panel--success">
    <div class="panel__body">
        <h2 class="venus">Simple success panel</h2>
        <div>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
            consectetur purus sit amet fermentum.</div>
    </div>
</div>


<!-- Inline warning -->
<div class="panel panel--simple panel--warn">
    <div class="panel__body">
        <h2 class="venus">Simple warning panel</h2>
        <div>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
            consectetur purus sit amet fermentum.</div>
    </div>
</div>


<!-- Inline error information -->
<div class="panel panel--simple panel--error">
    <div class="panel__body">
        <h2 class="venus">Simple error panel</h2>
        <p class="mars">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
            consectetur purus sit amet fermentum.</p>
    </div>
</div>


<!-- Spacious variant (all simple) -->
<div class="panel panel--simple panel--info panel--spacious">
    <div class="panel__body">
        <h2 class="venus">Simple info panel - spacious</h2>
        <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
            consectetur purus sit amet fermentum.</p>
    </div>
</div>


/* Information (default): No context defined */


/* Success: No context defined */


/* Warning: No context defined */


/* Error: No context defined */


/* Inline information (default): No context defined */


/* Inline success: No context defined */


/* Inline warning: No context defined */


/* Inline error information: No context defined */


/* Spacious variant (all simple): No context defined */