MWG Style Guide

A collection of web components, typography, colors, form fields, and buttons for AAA Mountain West Group.

Digital Brand Guidelines | Section & Heroes Blocks | Standard Hero Widgets | Section Child Blocks | Control Blocks | Personalization | Shared Blocks | Page Types
Digital Brand Guidelines
Buttons
Colors
Form Fields
Icons
Typography
Utility Elements
Navigation
Alert Banner
Sections & Heroes Blocks
Hero: Insurance Products A large insurance product blocks that include a modal to view all insurance products.
Hero: Large Image + Content A large image with text on top, followed by regular text and a list below.
Hero: Membership + Animated Background A large content block with editable text and an animated background.
Hero: Membership Purchase Summary A large block that displays a summary after completing an online transaction.
Hero: Products Carousel A large product block you can customize or use to feature insurance products.
Hero: Standard + Widget A large content block with editable text and several background image options.
Section: Parent Block A container block that holds other blocks, with adjustable padding and a customizable background.
Standard Hero Widgets
Widget: Battery Quoter A hero widget that includes an interactive tool for quoting battery prices.
Widget: Custom Products A hero widget that showcases customizable products with call-to-action buttons.
Widget: Home Security Equipment A hero widget that highlights the details of a specific piece of equipment.
Widget: Home Security Systems A hero widget that highlights the deails of an entire system.
Widget: Insurance Products A hero widget that features customizable products with call-to-action buttons.
Widget: Membership Plans A hero widget that displays available Membership plans along with their costs and benefits.
Widget: Travel Search A hero widget that provides multiple travel search options for users to explore.
Section Child Blocks
Accordion: Content + Images A content block featuring an accordion layout with customizable text and large images.
Accordion: Text Content A content block featuring an accordion layout with customizable text.
Automated Content A content block that automatically generates content using Via articles, product articles, and home security products.
Bento Box A content block that arranges text and images into clean, organized sections
Card Grid A content block for displaying images and text, with options to customize the layout and content.
Carousel: Horizontal Content A horizontally arranged carousel that displays customizable content and images.
Carousel: Vertical Content A vertically arranged carousel that displays customizable content and images.
Chart: Customizable Content A content block that includes a customizable chart builder with editable rows and columns.
Chart: Premade Content A content block that displays a chart with fixed, non-editable data.
Content: Image & Video A content block designed to display an image or a video on the page.
Content: Podcast Audio Player A content block that features an audio player along with editable text.
Content: WYSIWYG Editor A content block designed to display editable text using a WYSIWYG editor.
Features: Grid Layout A content block that shows multiple content features arranged in a grid layout.
Features: Horizontal Row A content block that shows multiple content features arranged in a row.
Finance: Expenses & Credit Card Calculator A content block that lets visitors view their estimated savings based on input or selections.
Form: Premade Content A content block that lets you choose from a set of pre-built, hard-coded forms.
Home Security: Bundle Configuration A child block that lets users configure a Smart Home bundle and add it to their cart.
Home Security: Product Cards A child block that displays a row of cards promoting Smart Home Security bundles.
iFrame: Embedded Content A content block that embeds a web page directly within the page.
iFrame: Logiform Content A content block that embeds Logiform content directly within the page.
Locations: Branch & Auto Repair A content block that displays a Google Maps-powered list of AAA Repair Centers and Branches.
Membership: Card A content block that shows the users Membership card after a successful transaction
Membership: Plans & Benefits A content block that displays the available Membership plans along with their prices and benefits.
Membership: Purchase Summary A content block that displays a summary of details after an online transaction is completed.
Quick Links + Icons A content block that displays links with icons arranged in a horizontal layout.
Via: In-Page Advertisement A content block that lets users add and display an advertisement within the page.
Via: Related Content CTA A content block to be used to create a single call out with a link.
Control Blocks
Control: Block Container A hidden block used to group other blocks together for better organization and layout control.
Control: Content Spacing A hidden block that creates space between other blocks to control layout spacing.
Control: Tabbed Carousel A visible block that organizes content into separate sections, displayed as horizontal tabs.
Control: Visibility Switch A hidden block that controls which content is shown based on personalization rules.
Control: Visibility Switch (Show All Child Blocks) A hidden block that displays all the child blocks regardless of their visibility rules.
Experiment: A/B Test A hidden block that tracks how users interact with each variation of a content block.
Personalization
Personalization An automated testing page to ensure CMS functionality when no audience is loaded.
Shared Blocks
Shared Block An automated testing page to ensure the shared block will display correctly.
Page Types
Landing Page An automated testing page to ensure this page type displays correctly.
Product Article (Article & Hero) An automated testing page to ensure this page type displays correctly.
Product Article (Article & Hero) with Primary Nav An automated testing page to ensure this page type displays correctly.
Product Article (Article) An automated testing page to ensure this page type displays correctly.
Product Article (Article) with Primary Nav An automated testing page to ensure this page type displays correctly.
Product Article (No Layout) An automated testing page to ensure this page type displays correctly.
Product Page (No Layout) An automated testing page to ensure this page type displays correctly.
Product Page (Product Detail) An automated testing page to ensure this page type displays correctly.
Tag Page (No Layout) An automated testing page to ensure this page type displays correctly.
Tag Page (Tagged content) An automated testing page to ensure this page type displays correctly.
Text (JSON) An automated testing page to ensure this page type displays correctly.
Via Article (Article & Hero) An automated testing page to ensure this page type displays correctly.
Via Article (Article & Hero) with Primary Nav An automated testing page to ensure this page type displays correctly.
Via Article (Sponsored Content) An automated testing page to ensure this page type displays correctly.
Via Article (Sponsored Content) with Primary Nav An automated testing page to ensure this page type displays correctly.