How to add alert and highlight styles to Renaissance

Renaissance Renaissance Guide
#1

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:

Default

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

Highlight

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

Important

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

Success Alert

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

Warning Alert

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

Error Alert

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

#2

Do you need . Before and after?

#3

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

#4

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
#5

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