Home Contact Sitemap Checkout
Home/Style Guide Print This Page

Page Style Guide – Overview

This Style Guide outlines the core design elements used across the website to ensure consistency, clarity, and a polished user experience. These standards apply to typography, buttons, and color usage throughout all pages.

Typography
Typography

Typography sets the tone and readability of the site. Our font styles are chosen for both professionalism and legibility across devices.

Headings (H1–H6):
- Used to structure content clearly and visually
- Bold and spaced appropriately for hierarchy

Paragraph Text:
- Clean and easy to read on all screen sizes
- Consistent font size and line height for body content
- Supports bold, italic, and links as needed

Sample Title Text Using Heading 1

Sample Title Text Using Heading 2

Sample Title Text Using Heading 3

Sample Title Text Using Heading 4

Sample Title Text Using Heading 5
Sample Title Text Using Heading 6

General Sample Text

Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy  foster collaborative thinking to further the overall value proposition.  Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.

List Styles

  • Sample Item
  • Sample Item
  • Sample Item
  • Sample Item
  • Sample Item
  • Sample Item
  • Sample
  • Sample
  • Sample
  1. Sample
  2. Sample
  3. Sample
  1. Sample
  2. Sample
  3. Sample
  1. Sample
  2. Sample
  3. Sample
  1. Sample
  2. Sample
  3. Sample
  1. Sample
  2. Sample
  3. Sample
  1. Sample
  2. Sample
  3. Sample




Buttons
Buttons

Buttons are styled to be clear, clickable, and consistent, guiding users through key actions like submitting forms, navigating pages, or registering for events.

Button Styles

Button styles can be used throughout the website. When creating a insert/edit a link you can select from 5 different types of button styling.

Default Primary Secondary
Tertiary Link Sample Link




(Custom Gallery Block) Image Masks

How to insert special CSS classes into the advanced settings

More

To control which shape mask is applied to your gallery images, use custom classes in the block’s advanced area as follows:

Step-by-Step:

  1. Add or Open the Block Editor and Choose the "List Gallery Layout":
    Select the gallery block and add your image, text, descriptions and/or buttons.
    Formatting the input areas uses Markdown, a cheatsheet can be found here: https://www.markdownguide.org/cheat-sheet/

  2. Find the Advanced Area:
    In the block’s settings panel, locate the  "Advanced" tab. 

  3. Add the Custom Class:

    • To use a hexagon mask, add: featured-mask hex

    • To use a circular mask, add: featured-mask circle

    • Classes should be entered without periods and separated by spaces, e.g.:
      featured-mask hex

    • You may also add any new mask shapes as needed in the future (e.g., featured-mask star), however these will need to be developed.

    • Image alignment (by default the image is aligned to the right), by adding this class, it'll move to the left
      featured-mask hex left

  4. Save/Update the Block:
    Make sure to save or update your changes so that the new classes are applied.

    Notes: Only add one image per block