Style Test

Block editor text

test

1

2

3

Typography

Heading 1 – 4.0625rem (65px)

Font: Bariol Bold, Line Height: 1.08, Class: h1

Heading 2 – 2.875rem (46px)

Font: Bariol Bold, Line Height: 1.09, Class: h2

Heading 3 – 2.25rem (36px)

Font: Bariol Bold, Line Height: 1.11, Class: h3

Heading 4 – 1.625rem (26px)

Font: Bariol Bold, Line Height: 1.15, Class: h4

Heading 5 – 1.5625rem (25px)

Font: Bariol Bold, Line Height: 1.2, Class: h5

Heading 6 – 1.4375rem (23px)

Font: Bariol Bold, Line Height: 1.22, Class: h6

Paragraph Text – 1rem (16px)

Font: FS Me Regular, Line Height: 1.5, Element: p

The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt nisi id lobortis varius. Pellentesque eleifend ante ac libero malesuada varius.

Bold Text

Font: FS Me Bold, Element: strong or b

This is regular text with bold text in the middle of a sentence.

Buttons

Dark Buttons (Default)

Class: .button or .button-dark

Dark Stroke Buttons

Class: .button-dark-stroke

Bright Buttons

Class: .button-bright

Bright Stroke Buttons

Class: .button-bright-stroke

Light Buttons (for dark backgrounds)

Class: .button-light

Light Stroke Buttons (for dark backgrounds)

Class: .button-light-stroke

Text Links

Standard Links

Default styling with underline, Element: a

This is a standard link within a paragraph of text.

Lists

Bullet Lists

Green bullet markers (#29d4b1), Element: ul

  • The five boxing wizards jump quickly
  • A very bad quack might jinx zippy fowls
  • The quick brown fox jumps over the lazy dog

Numbered Lists

Navy bold numbers, Element: ol

  1. The five boxing wizards jump quickly
  2. A very bad quack might jinx zippy fowls
  3. The quick brown fox jumps over the lazy dog

Forms

Text Inputs

Element: input[type="text"]

Text Field Helper text

Error State

Class: .error on input and label

Error helper text

Textarea

Element: textarea

95 letters remaining

Checkboxes

Three states: unchecked, checked, indeterminate, Element: input[type="checkbox"]

Radio Buttons

Element: input[type="radio"]

Dropdown / Select

Element: select

Special UI Elements

Navigation Arrows

Class: .nav-arrow

Pagination

Classes: .pagination, .pagination-number, .current
Inactive: Navy text with grey stroke circle, Active: Navy fill with white text

1,230 Results • Page 2 of 78

Carousel Dots

Classes: .carousel-dots, .carousel-dot, .active
Inactive: Navy Blue (#002e5a), Active: Pink (#f900b1)

Color Palette

Core Colors

WHG Dark Blue

#002e5a

dark-blue

WHG Dark Grey

#3b3c43

dark-grey

WHG Pale Grey

#f7f7f8

pale-grey

White

#ffffff

white

Accent Colors

Powder Blue

#b0bffd

powder-blue

Teal

#61c9d4

teal

Green

#29d4b1

green

Mustard

#dbc300

mustard

Coral

#ff8265

coral

Pink

#f900b1

pink

Secondary Colors

Lilac

#bab7d9

lilac

Olive Green

#bcca93

olive-green

Orange

#fcaa00

orange

Functional Colors

Error Red

#e60a30

error-red

Disabled State

#767676

disabled-state

Disabled 25%

#dddddd

disabled-state-25

Grid System

12 Column Grid (Desktop)

Class: .grid with .col-1 through .col-12

.col-12
.col-6
.col-6
.col-4
.col-4
.col-4
.col-3
.col-3
.col-3
.col-3

Responsive Behavior:

  • Desktop (1200px+): 12 columns, 1rem gutters, 2rem margins
  • Tablet (768px-1199px): 8 columns, 1rem gutters
  • Mobile (640px-767px): 2 columns, 1rem gutters
  • Small Mobile (< 640px): 1 column

Chris’ Notes

Theme.json Color Classes

Use WordPress color classes in the block editor:

  • has-dark-blue-color / has-dark-blue-background-color
  • has-teal-color / has-teal-background-color
  • has-green-color / has-green-background-color
  • And all other colors defined in theme.json (use the slug from above)

Font Families

  • Bariol Bold: Used for all headings (H1-H6), button text, labels
  • FS Me Regular: Used for all body text, paragraphs, lists
  • FS Me Bold: Used for strong/bold text within content