Panels and Alert Boxes
Alert boxes and Notification Panels
There are two styles of panel: regular and callout. A regular panel requires simply a class of 'panel', while a callout requires 'panel callout'. A regular panel is a light teal, a callout panel is a light yellow.
This is a regular panel.
So she called softly after it, 'Mouse dear! Do come back again, and we won't talk about cats or dogs either, if you don't like them!'
<div class="panel radius">
<h5>This is a regular panel.</h5>
<p>So she called softly after it, 'Mouse dear! Do come back again, and we won't
talk about cats or dogs either, if you don't like them!'</p>
</div>This is a callout panel.
So she called softly after it, 'Mouse dear! Do come back again, and we won't talk about cats or dogs either, if you don't like them!'
<div class="panel callout radius">
<h5>This is a callout panel.</h5>
<p>So she called softly after it, 'Mouse dear! Do come back again, and we won't
talk about cats or dogs either, if you don't like them!'</p>
</div>Top-of-page Notification panel / Alert box
These boxes can be coloured so that they are appropriate for the message being delivered. This pagelet needs to be inserted in Pagelet zone 1, which inserts the notification box directly beneath the <body> tag.
If the message is a notification of something important but not of an emergency nature, you can use a teal-hued panel, like tealbg-light or tealbg-pale.
Title of notification (if needed)
This is the notification content.
<div class="notify tealbg-light">
<div class="row alert-box tealbg-light">
<h4>Title of notification (if needed)</h4>
<p>This is the notification content.</p>
</div>
</div>
If the message is of an urgent or emergency nature, you should use a more vibrant and larger box. To do so, change the color (in both divs) to yellowbg and add a v3pad class to make the box taller, like so:
Title of notification (if needed)
This is the notification content.
<div class="notify yellowbg v1pad">
<div class="row alert-box yellowbg">
<h4>Title of notification (if needed)</h4>
<p>This is the notification content.</p>
</div>
</div>
