Framework

Global Presets UI Style Guide

01. Global Colors

The Musselshell County colors have been added as global colors. These are available under Module Gear Icon > Design > Text (or Header Text). Look for the color picker and then click on Global.

#411C00

#FFDD85

#157D31

02. Text Styles

The site currently has four Text Module presets for use in styling headers. Three are shown below for the primary, secondary and tertiary site colors. The fourth preset uses the color white for reverse use. Each preset includes styling for all H tags, that is, H-1 to H-6 tags.

Primary

Secondary

Tertiary

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

List

Lorum Ipsum
Lorum Ipsum
Lorum Ipsum

Lorum Ipsum
Lorum Ipsum
Lorum Ipsum

Lorum Ipsum
Lorum Ipsum
Lorum Ipsum

All in one

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorum ipsum dolor sit amet.

Lorum Ipsum

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorum ipsum dolor sit amet.

Lorum Ipsum

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorum ipsum dolor sit amet.

Lorum Ipsum

03. Modules

The site currently has three Button module presets for use in styling buttons as shown below. A transparent effect can be achieved by setting the button background color to transparent and the border to 2px. Note that once styling a button this way, attempting to change the style further, for example by apply another Button preset, becomes problematic. Best to delete button and start over!

Primary

Secondary

Tertiary

Button

Click Here