OPEN HOUSE » Saturday, March 25, 2017 » 9 a.m. - 3 p.m. » Learn more
Thompson Rivers University
Thompson Rivers University

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.

Button 1
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!'

Click here

<div class="panel radius">
<a href="#" class="button nomargin radius right tealbg-light">Button 1</a>
<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>
<p><a href="#">Click here</a></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!'

Click here

<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>
<p><a href="#">Click here</a></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 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>