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