Alerts

Using website alerts provides immediate attention to important updates, enhances user engagement, and offers timely notifications about critical events. They can guide users with tips and reminders, enhance security by alerting to suspicious activities, and allow for customizable messaging to specific user segments, all while improving the overall user experience.

Be cautious not to overuse alerts as they will detract from the importance of the message when they conflict with one another. 

In Sitefinity

There are many ways to add alerts to content within Sitefinity websites. Here the most common:

  • Adding the alert to content within the different content modules like Lists, Blogs, Events, etc.
  • Using pre-written classes and writing the HTML within the WYSIWYG is also an option but requires solid HTML and CSS knowledge.

Below we will explain the basics of using the icons and breakdown the options above.

The Basics

Creating an alert will require the user work with HTML and understand the classes written below. The non-closing alert class is applied to the paragraph while the interactive/closing alert has a div wrapped around the paragraph tag. 

Basic Options & Colors

This is an example of an alert.

This is an example of a primary alert.

This is an example of a secondary alert.

This is an example of an info alert.

This is an example of a danger alert.

This is an example of a warning alert.

This is an example of a success alert.

This is an example of a light alert.

This is an example of a dark alert.

<p class="alert">
    This is an example of an alert.
</p>

<p class="alert alert-primary">
    This is an example of a primary alert.
</p>

<p class="alert alert-secondary">
    This is an example of a secondary alert.
</p>

<p class="alert alert-info">
    This is an example of a info alert.
</p>

<p class="alert alert-danger">
    This is an example of a danger alert.
</p>

<p class="alert alert-warning">
    This is an example of a warning alert.
</p>

<p class="alert alert-success">
    This is an example of a success alert.
</p>

<p class="alert alert-light">
    This is an example of a light alert.
</p>

<p class="alert alert-dark">
    This is an example of a dark alert.
</p>

Interactive Alerts w/ Close Button

An interactive alert w/ close button.

<div class="alert alert-danger" uk-alert="">
    <a class="uk-alert-close" uk-close=""></a>
    <p>An interactive alert w/ close button.</p>
</div>

Sitefinity Modules

Content modules create collections of content that can be displayed on your web pages and in templates. The most common modules for content which can be used as an alert are the Content Blocks, Lists, Blogs and Events modules. Learn more about each of these by clicking on the provided links.

Tips:

  • Please note: the "close" or "dismiss" alert option may not function using List, Blogs and Events, please test before committing to the module.
  • The Expanded list module with a hidden title may be the best way to display and manage alerts on your site. Combine this functionality with categories and tags and you will be able to share these alerts throughout your site easily, as needed.

HTML & pre-written classes

Further customization requires a solid knowledge of HTML and CSS. You can write these alerts in any content type which provides a WYSIWYG editor and has a display option of full HTML.

At UTMB we use 2 CSS frameworks to build alerts: UIkit and Bootstrap 3. Using one of these provided links, all available alert options should function within Sitefinity, given they are not conflicting with other settings on the page.

On this page: