Style Guide

Rich Text Module

This is the Rich Text/WYSIWYG (What You See Is What You Get) editor for the site

Below are examples of the styling for titles, buttons, etc

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Black Solid Button

Blue Solid Button

Yellow Solid Button

Black Outline Button

Blue Outline Button

This is a note

Split Content

Fields:

• Heading
• Left/Right Image
• Left/Right Image CTA: Links image
• Left/Right Video
• Left/Right Content: Rich Text WYSIWYG
• Left/Right CTA
• Use small font size toggle
• Left Content Width: 25%, 50%, 75%
• Alignment: Top, Center
• Background color selector
• Section ID

Media

Fields:

• Heading
• Image
• Video
• Layout: Contained vs Full Bleed
• CTA
• Brand: Adds the bar of color to the left of the image
• Background Color
• Section ID
• Parallax Effect Toggle
• First on Mobile Toggle

Text Callout

Fields:

• Heading
• Content: Simple Text
• CTA
• Background Color Selector
• Max Width: Used for centering content
• Font Weight: Bold/Normal
• Section ID

Background Callout

Fields:

• Heading
• Content: Simple Text
• CTA
• Secondary CTA
• Background Image
• Mobile Background Image
• Background Color
• Text Color
• CTA Color: White, Blue, Black
• Secondary CTA Color: White, Blue, Black
• CTA Style: Outline/Solid
• Secondary CTA Style: Outline/Solid
• Overlay Opacity
• Content Position: Left/Right
• Content Width: 25%, 50%, 75%, 100%
• Parallax Effect Toggle
• Section ID

Form

Fields:

• Heading
• Content: Rich Text
• Form Selector*
• Background Color Selector
• Section ID

Search

Fields:

• Heading
• Short Description: Simple Text
• Search Config*: Global, Resources, Events, Trainings, Webinars, Careers and News
• Section ID

CTA Card

Fields:

• Heading
• CTA
• Pull From Global Content Toggle
• Brand
• Section ID

Quick Links

Fields:

• Heading
• Icon Image Selector
• Link Configuration
• Section ID
• Alignment: Left, Center, Right

Blocks Layout

This was really only used on the old homepage but can be adapted to be used in other places.

Fields:

• Top/Bottom Brand
• Top/Bottom BG Image: the module will naturally pull the brand's color and pattern to create the background on the tile, but this gives the option to override with another image
• Top/Bottom Heading
• Top/Bottom Subtitle
• Top/Bottom CTA
• Top/Bottom Alignment: Left/Right
• Background Slide*: pulls from the pre-defined components
• Layout*: Blocks-Left Image-Right/Image-Left Blocks-Right, Image-Only Contained
• Section ID

Impact Stories

Any variety of background colors can be used when using the Impact Stories module

Note: There are max 4 spots in this section

Fields:

• Title
• Description: Simple Text
• Tile Colors*: Navy White, Navy Gold, Electric Blue, Gray Navy
• Tile Statistic*
• Tile Description*
• Tile Link
• Tile Image
• Link Style: Button/Text Link
• Hide/Show Carat
• Section ID

Impact Banner - Graph

There are a few different settings between the Graph and Statistic type so I've broken up the applicable fields in a list below depending on which Impact Type to show the difference between the two

Fields:

• Impact Type: Graph
• Position: Left/Right
  Defines which side the graph shows up on
• Impact Text: Hybrid Text - Follow instructions under this for how to use the src code editor
• Graph Segments: Can define different percentages and colors per section - the first color used defines the sentence color as well
• Background Color
• Section ID

Impact Banner - Statistic

Fields:

• Impact Type: Statistic
• Position: Left/Right
  Defines which side the statistic shows up on - can define the sentence structure for the banner
• Impact Text: Hybrid Text - allows for src code access, but should not be used for this Impact Type
• Impact Statistic: Where we define the emphasized statistic
• Statistic Color: Brand Colors
• Background Color
• Section ID

Impact Statements

Can use any variety of colors as the background for the tile.

Cards will stretch if the stats/content do not match up well

Fields:

• Title
• Description: Simple Text
• Tile Colors: Navy White, Navy Gold, Electric Blue, Gray Navy
• Tile Content: To create the statistic - we use a span and class to identify the statistic styling
• Background Color
• Section ID

Arrow Anchor Menu

This module allows for an anchor menu to be created that automatically includes arrows to show progression

The field allows for up to 5 links - however, the more links/images there are, the higher the chance of having text overflow out of the container. It is recommended to keep the titles shorter if going to 4 or 5 links.

The links do not have to be anchor links, any type of link can be used in this field.

Fields:

• Anchor Title
• Anchor Icon*
• Anchor Subtitle
• Anchor Link

Example page: Mirion Technologies Services and Support

Text and Boxes

Fields:

• Heading
• Description: Hybrid Text
• Button
• Alignment: Top/Center (for the Heading & Desc Content)
• Move Text to Right/Left
• Box Title
• Box Description: Hybrid Text

Example page: The Vital Platform

Media Overlay

This was built for the Vital platform and has different customization options 

Below I provided two options where the content was either Top Spot focused and Bottom Spot focused

Fields:

• Top Background Image*
• Top Logo
• Top Content: Rich Text
• Top Button
• Top Secondary Button
• Bottom Background Image*
• Bottom Logo
• Bottom Content: Rich Text
• Bottom Button
• Bottom Secondary Button
• Overlay Image/Video
• Inline Video Toggle: This is to make a video autoplay - this should only be used when the video is completely silent

Example Page: The Vital Platform

Logo/Content in Top Spot:

Logo/Content in Bottom Spot:

Sticky Nav

Fields:

• Logo
• Links
• CTA

Note: I wanted to include a sticky nav to the page overall for navigating between the 3 types of modules. Due to this, I just replicated the exact same nav that is already on the page so that it is still available as the example below.

Example Page: The Vital Platform

Three Column Content

Fields:

• Heading
• Heading Alignment: Left/Center
• Column Image*
• Column Heading*
• Column Description
• Column Link: Adding a CTA will also turn the image into a link

Accordions

Accordion Module Fields:

• Heading
• Accordion Panel Selection*
• Brand
• Background Color
• Section ID

Accordion Panel Fields:

• Heading
• Display Heading
• Content - WYSIWYG Rich Text
• Resources Selector
• Link List

FAQs

Note - the setup of this module/component is exactly the same as Accordions, the difference is that FAQs are configured for AI crawlability purposes.

Fields:

The same as Accordions except for the ability to Collapse/Expand all FAQs

Background Slides

Background Slides Module Fields:

• Background Slide Selector*
• Section ID
• Parallax Effect

Background Slides Fields:

• Heading*
• CTA
• Slide Image*

Border Cards

Border Card Module Fields:

• Heading
• Content: Rich Text
• Border Card Selection
• Background Color
• Section ID

Border Card Fields:

• Brand
• Show/Hide Brand Logo
• Show/Hide Brand Tag
• Heading
• Display Heading
• Content: Rich Text
• Link List

Example page with all 4 medical brands: Medical About Page.

Content Slides

Content Slide Module Fields:

• Content Slide Selector
• Section ID

Content Slide Fields:

• Brand
• Show/Hide Brand Tag
• Slide Image
• Heading
• Content: Rich Text
• Slide CTA

Page Cards

Note: there is a max of 4 cards for this module

Page Card Module Fields:

• Heading
• Content: Rich Text
• Page Card Selector
• Background Color
• Section ID

Page Card Fields:

• Title
• Link
• Text
• Background Image

There are 3 options for how to set up page cards

• Image + Link + Text
• Image + Text
• Image

Team Members

Team Member Module Fields:

• Heading
• Team Member Selector*
• CTA
• Background Color
• Section ID

Team Member Fields:

• Headshot
• First Name*
• Last Name*
• Job Title
• Bio

Related Content

Fields:

• Heading
• Related Content Selector*
• Inline CTA
• Card Style
• Column Count

Featured Slides

Note: This module pulls directly from the product section of the website. We can't place anything other than products in this module

Fields:

• Featured Slides Selector*
• Background Color
• Section ID

Product & Industry Announcements

This is the module used on the homepage for the featured articles - but any type of entry can be used in this section.

Fields:

• Heading
• Main Featured Article Selector*: Max 3
• Tag
• Secondary Heading
• Secondary Featured Article Selector*: Max 6
• Tag
• Section ID

Resources & Events

Note: There is a max of 4 entries in each section

Fields:

• Webinar Selector
• Upcoming Events Selector
• Popular Training Courses Selector
• Section ID

Split Homepage Mantle

Split Homepage Mantle Module Fields:

• Background Slide Selector
• Section ID

Split Homepage Mantle Fields:

• Heading*
• CTA
• Slide Image