How to add alert and highlight styles to Renaissance

We often get asked, “How do I add highlight styles to my content?”. With Renaissance, you are able to apply alert and highlight styles to your content with simple edits.

Alerts & Highlights and can be added through a CMS snippet or directly into the source code of a page.

If building CMS snippets or editing source code, a general understanding of HTML will help you accomplish this task easier.

Adding these in is as simple as copy and paste into the section of snippet markup or page source code where you want it displayed, and then you will replace the “Text Here” with the text/content you want to be displayed within the styling.

See below for examples and code needed for implementing:


<div class="notice">TEXT HERE</div>


<div class="highlight">TEXT HERE</div>


<div class="important">TEXT HERE</div>

Success Alert

<div class="notice notice--positive">TEXT HERE</div>

Warning Alert

<div class="notice notice--warning">TEXT HERE</div>

Error Alert

<div class="notice notice--negative">TEXT HERE</div>

Do you need . Before and after?

What do you mean do you need before and after?

In CSS you need opening and closing div tags for these elements, so things go

In here

We apply “classes” in order to define externally what those divs should look like: example <div class=“highlight”>TEXT HERE

To answer your question, the success, warning and error have pseudo elements added to it which create the ::before and ::after <div> elements.

This is used to display the icons which help define the meaning of the alert.

This has been added to be ADA compliant. As website should not rely on color alone to convey content due to people who have visual impairment.

Hope this answers your question.

1 Like

Here is the video guide on How To Add Alert And Highlight Styles To Renaissance