Modules


The types in the subnavigation above are considered Frost's most popular types and come with many different module styles. The Frost 2.0 module library offers additional types that have proven to be useful to publishers, but have only one style when used. Learn more about what they are and what they look like below.

AD Modules

  • If you configure Google Adsense in your business console, you can cut out the everyday usage of that console by placing Ad slots manually and dynamically in your site or page layout in Brightspot.

—————————————-——

Form Modules

  • Frost 2.0 has Contact Us, and Custom Form field options, with Newsletter Module styles.
Title of the Example Form
Description of the Example Form

—————————————-——

Gallery Modules

  • Galleries can live alone as landing pages like this, or can live as modules in a page or text body. This is a way for editors to program multiple images without taking up too much room on the page.

Title of the Example Gallery Module:


willian-justen-de-vasconcellos-t4hA-zCALUQ-unsplash.jpg
1  of  8
willian-justen-de-vasconcellos-t4hA-zCALUQ-unsplash.jpg
ty-lorenz-6Yeh-Fy8Aa4-unsplash.jpg
2  of  8
ty-lorenz-6Yeh-Fy8Aa4-unsplash.jpg
thom-holmes-e41n_rwTiZM-unsplash.jpg
3  of  8
thom-holmes-e41n_rwTiZM-unsplash.jpg
pexels-zack-melhus-3363359.jpg
4  of  8
pexels-zack-melhus-3363359.jpg
nicolas-cool-GSQISzQlYtY-unsplash.jpg
5  of  8
nicolas-cool-GSQISzQlYtY-unsplash.jpg
johny-goerend-bZBqaFrFT-I-unsplash.jpg
6  of  8
johny-goerend-bZBqaFrFT-I-unsplash.jpg
daniel-j-schwarz-a4M-Vegh7Y4-unsplash.jpg
7  of  8
daniel-j-schwarz-a4M-Vegh7Y4-unsplash.jpg
arnaud-jaegers-DS55CX0wYKk-unsplash.jpg
8  of  8
arnaud-jaegers-DS55CX0wYKk-unsplash.jpg
1  of  8
willian-justen-de-vasconcellos-t4hA-zCALUQ-unsplash.jpg
1 of 8

—————————————-——

HTML Modules

  • HTML Modules can be an extremely useful tool for third party embed code on a site. Using HTML Modules instead of directly copy + pasting into articles makes the embed code searchable, editable and reusable within Brightspot.
  • HTML Modules do not appear in AMP pages or feeds. For iframe embeds, please use the Iframe Module instead.

—————————————-——

iFrame Modules

  • iFrame Modules are very similar to the HTML Module above, except the iFrame is has URL field instead of an embed code, and the editor can control the height and width of the module. Also, iFrame should be used for AMP pages!

—————————————-——

Media Modules

  • The Media Module allows editors to promote video, image or audio files with a title and description. This module type allows an audio or video file to be played within the page, instead of taking the user to a separate page promoting the video.

Here are two examples of the Media Module showcasing a video.

Media Module Full Width

Description text. You may have a background color or a background image for this module. You also have the option to change the text color to a hex value. You may also choose to left, center or right align the header and description text.
0:00 / 0:00
Video Companion

Default Media Module

Description text. You can set a background color or image. You also can control the text color with a hex picker. The module's title and description text can also be on the left or right of the media. Additional options for this style: you can choose the actual text alignment, so your text can be either left, center or right aligned.

Note: There is no CTA button option on this module. The purpose of it is to keep the user engaging with content within the current page.
0:00 / 0:00
Video Companion

—————————————-——

Playlist Modules

  • Playlists can live alone as landing pages like this, or can live as modules in a page or text body. Think of it as the Gallery module, but with videos!
0:00 / 0:00
Video Companion
Promoted content titile
Image of Brightspot CMS customer logo
On Now
Brightspot CMS Demo

—————————————-——

Rich Text Modules

  • Rich Text Modules provide the ability to place a text block in any page grid. The Rich Text Module comes in a card and a full-width option. This module allows editors to publish enhancements within it, such as images, videos and other modules. Fun fact, this page was created with a Rich Text Module!

—————————————-——

Tabs Modules

  • Tab Modules are a way for the editors to break up a long page's content. Think of the Tab Module as a subnavigation within a page, that allows users to toggle and view the content programmed within each tab. Each Tab item is an anchor link of the page it is placed on.

Title of the Example Tabs Module

Description text for the Example Tabs Module.

List Title: Simple Grid (3 Items)

List Description: The list background may be an image or a color from the palette. There may be 1, 2, 3, 4 or 5 cards per row. This list style also has editorial options to either show or hide the following design elements: List Title, List Description, Card Section, Card Author, Card Description, Card Read Time / Duration, Card Button and CTA Button. Note: The image on each card may also be changed to be bottom aligned, and the card text can be either centered, left or right aligned. This is the Grid programmed with 3 items.
clipart-man-head-8.png
By Author
October 14, 2020
Promoted content description. This description is the longer than the other card descriptions in the list. It will become the tallest in the grid list of card items. The other cards will grow to match this card's height.
1 Min Read
clipart-man-head-8.png
By Author
October 14, 2020
Promoted content description
1 Min Read
clipart-man-head-8.png
By Author
October 14, 2020
Promoted content description
1 Min Read

List Title: Simple Grid (3 Items)

List Description: The list background may be an image or a color from the palette. There may be 1, 2, 3, 4 or 5 cards per row. This list style also has editorial options to either show or hide the following design elements: List Title, List Description, Card Section, Card Author, Card Description, Card Read Time / Duration, Card Button and CTA Button. Note: The image on each card may also be changed to be bottom aligned, and the card text can be either centered, left or right aligned. This is the Grid programmed with 3 items.
clipart-man-head-8.png
By Author
October 14, 2020
Promoted content description. This description is the longer than the other card descriptions in the list. It will become the tallest in the grid list of card items. The other cards will grow to match this card's height.
1 Min Read
clipart-man-head-8.png
By Author
October 14, 2020
Promoted content description
1 Min Read
clipart-man-head-8.png
By Author
October 14, 2020
Promoted content description
1 Min Read

List Title: Simple Grid (3 Items)

List Description: The list background may be an image or a color from the palette. There may be 1, 2, 3, 4 or 5 cards per row. This list style also has editorial options to either show or hide the following design elements: List Title, List Description, Card Section, Card Author, Card Description, Card Read Time / Duration, Card Button and CTA Button. Note: The image on each card may also be changed to be bottom aligned, and the card text can be either centered, left or right aligned. This is the Grid programmed with 3 items.
clipart-man-head-8.png
By Author
October 14, 2020
Promoted content description. This description is the longer than the other card descriptions in the list. It will become the tallest in the grid list of card items. The other cards will grow to match this card's height.
1 Min Read
clipart-man-head-8.png
By Author
October 14, 2020
Promoted content description
1 Min Read
clipart-man-head-8.png
By Author
October 14, 2020
Promoted content description
1 Min Read

List Title: Simple Grid (3 Items)

List Description: The list background may be an image or a color from the palette. There may be 1, 2, 3, 4 or 5 cards per row. This list style also has editorial options to either show or hide the following design elements: List Title, List Description, Card Section, Card Author, Card Description, Card Read Time / Duration, Card Button and CTA Button. Note: The image on each card may also be changed to be bottom aligned, and the card text can be either centered, left or right aligned. This is the Grid programmed with 3 items.
clipart-man-head-8.png
By Author
October 14, 2020
Promoted content description. This description is the longer than the other card descriptions in the list. It will become the tallest in the grid list of card items. The other cards will grow to match this card's height.
1 Min Read
clipart-man-head-8.png
By Author
October 14, 2020
Promoted content description
1 Min Read
clipart-man-head-8.png
By Author
October 14, 2020
Promoted content description
1 Min Read

List Title: Simple Grid (3 Items)

List Description: The list background may be an image or a color from the palette. There may be 1, 2, 3, 4 or 5 cards per row. This list style also has editorial options to either show or hide the following design elements: List Title, List Description, Card Section, Card Author, Card Description, Card Read Time / Duration, Card Button and CTA Button. Note: The image on each card may also be changed to be bottom aligned, and the card text can be either centered, left or right aligned. This is the Grid programmed with 3 items.
clipart-man-head-8.png
By Author
October 14, 2020
Promoted content description. This description is the longer than the other card descriptions in the list. It will become the tallest in the grid list of card items. The other cards will grow to match this card's height.
1 Min Read
clipart-man-head-8.png
By Author
October 14, 2020
Promoted content description
1 Min Read
clipart-man-head-8.png
By Author
October 14, 2020
Promoted content description
1 Min Read

Book your personalized walk-through today!

Frost is powered by the Brightspot content business platform. Learn more about how Brightspot can move your business forward.