SDC Pattern Library

Panel: Warning

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
<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>
 
/* No context defined for this component. */