CPC
CPC CPC
  • Web Components Guide

Content App

  • Core Components
    • Basic Content
    • Hero Banners
    • Layout Element
    • Letter
  • Media Components
    • Images
    • Videos
    • Icons
  • Interactive Components
    • Full Width Accordion
    • Accordion List
    • Tabs
    • Vertical Tabs
    • CTA Block
    • Contact Playlist
    • Datapoint

Custom Apps

  • Artifact Library App
    • Artifact Grid
    • Asset Grid Carousel
    • Playlist Tabs Collection
    • Resources Carousel
    • Resources Download
  • Events App
    • Event List
    • Event Page
  • Forms App
    • ClickDimensions Widget
  • Products App
    • Carousel - Products
    • Carousel - Series
    • Carousel - Recently Viewed
    • Carousel - Custom
    • Series Page URL Handler

Other

  • Alert Banners
    • Overiview
    • DNN Alert Banner
    • Adam Alert Banner

Alert Banners

Other | Web Components Guide

Alert Banners

Overview

Unlike the other apps mentioned in this guide, these banners do not fall under a single app, and are not contained to a single page. Thus, they are to be used sparingly and with caution.

When activated, these banners will be displayed across multiple pages, or across the entire site (Depending on the banner).

Alert Banners

DNN Alert Banner

This banner has historically been used as a promotional banner, alerting users (across multiple pages) of a new product, or a change happening that we want to make them aware of. This banner will be placed above the site header on the selected section of the site.

Unlike the Content App and Custom Apps mentioned in the other categories, this banner lives in the 'Content Admin' page on the site. To navigate to this banner, simply click the "My Account" button in the top right corner of the site header, and choose 'Catalog Admin' from the dropdown.

>

Once the page loads, choos the first option under 'Website Content', titled 'Alert Banner'. A page with an older site theme will load, displaying two primary sections: an edit field and a list of existing DNN Alert Banners.

 

Alert Banner List

The second half of the page displays the existing DNN Alert Banners on our site, in use or not. The list is separated by which pages the banner is applied to: Sitewide, Biopharma, Thermal, General Purpose, and Medical. Each banner's Title, Description, and Start and End dates will also be visible from this preview. Each row has an Edit button (pencil and paper icon) to make changes to an existing banner, and a Delete button (red X) to permanently remove it from the site.

 

Banner Editing

This section may appear a bit wonky, as its styling has been affected by a recent change to our site. All the input fields should still work, though they may not be properly aligned with their associated label. Incase their display is incorrect, the input labels and fields are in order as follows:

  Label Input
1 Title text field
2 Description WYSIWYG editor for body content and copy - allowing for deep customization
3 CTA Link Text text field
4 CTA Link text field
5 Open CTA in New Tab checkbox
6 Image URL text field
7 Gradient-Left Color HEX Code color picker
8 Gradient-Right Color HEX Code color picker
9 Where Does This Appear On dropdown to choose which seciton of the site to apply the banner
10 Start Date calendar
11 End Date calendar
12 Add button

 

 

Examples:

DNN Alert Banner | DF2 example
DNN Alert Banner | DF2 example
DNN Alert Banner | NVIDIA GTC example
DNN Alert Banner | NVIDIA GTC example

Alert Banner

Adam Alert Banner

This is a much simpler banner in many ways. The Adam Alert Banner is baked-into the site header, and as such will be displayed on every site page.

To edit the banner, login and go to edit any page. Hover over the site header, and click the Adam edit icon (pencil). A dialogue box will popup with three sections:

  1. Alerts
  2. Utility Navigation
  3. Primary Navigation

These represent each of the three rows of our site header. Alerts is the section we want. Click that and dropdown and two inputs will become available: A toggle to show or hide the banner, and a dropdown to either select an existing banner or create a new one. The content of these banners use a WYSIWYG editor meaning it supports many complex structures, so consult the digital team for any questions regarding building/editing the banner.

Adam Alert Banner | Site Header with: My Account Submenu Alert
Adam Alert Banner | Site Header with: My Account Submenu Alert
Adam Alert Banner | Scheduled Restoration Alert
Adam Alert Banner | Scheduled Restoration Alert
© 2026 Colder Products Company®. All Rights Reserved