Panels are used to draw information to the attention of the user.
This panel is used to provide information in a neutral context.
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 panels are used to provide positive, reassuring feedback to the user.
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.
Use of the .panel--spacious class provides increased padding for simple variants.
Global
/components/_panel.scssvars/_colours.sccs
<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>
/* No context defined for this component. */