Test Styles

Test Styles

Simple Colored block

Generally this is being used across the site for coloring various features of the site. It requires a color as it by default has no extra styling

sg-block+sg-blue
sg-block+sg-lightblue
sg-block+sg-purple
sg-block+sg-pink
sg-block+sg-red
sg-block+sg-brown
sg-block+sg-orange
sg-block+sg-yellow
sg-block+sg-paleyellow
sg-block+sg-green
sg-block+sg-leafgreen
sg-block+sg-teal
sg-block+sg-cyan
sg-block+sg-black
sg-block+sg-white
sg-block+sg-grey
sg-block+sg-mediumgrey
sg-block+sg-lightgrey
sg-block+sg-primary
sg-block+sg-secondary
sg-block+sg-success
sg-block+sg-info
sg-block+sg-warning
sg-block+sg-danger
sg-block+sg-light
sg-block+sg-dark
sg-block+sg-medium
sg-block+sg-background
sg-block+sg-alt3
sg-block+sg-alt4
sg-block+sg-alt5
sg-block+sg-alt6
sg-block+sg-alt7
sg-block+sg-alt8
sg-block+sg-alt9
sg-block+sg-alt10
sg-block+sg-alt11
sg-block+sg-alt12

Hovering Block

Generally this is being used across the site for coloring various features of the site. It requires a color as it by default has no extra styling

sg-hover-block+sg-blue
sg-hover-block+sg-lightblue
sg-hover-block+sg-purple
sg-hover-block+sg-pink
sg-hover-block+sg-red
sg-hover-block+sg-brown
sg-hover-block+sg-orange
sg-hover-block+sg-yellow
sg-hover-block+sg-paleyellow
sg-hover-block+sg-green
sg-hover-block+sg-leafgreen
sg-hover-block+sg-teal
sg-hover-block+sg-cyan
sg-hover-block+sg-black
sg-hover-block+sg-white
sg-hover-block+sg-grey
sg-hover-block+sg-mediumgrey
sg-hover-block+sg-lightgrey
sg-hover-block+sg-primary
sg-hover-block+sg-secondary
sg-hover-block+sg-success
sg-hover-block+sg-info
sg-hover-block+sg-warning
sg-hover-block+sg-danger
sg-hover-block+sg-light
sg-hover-block+sg-dark
sg-hover-block+sg-medium
sg-hover-block+sg-background
sg-hover-block+sg-alt3
sg-hover-block+sg-alt4
sg-hover-block+sg-alt5
sg-hover-block+sg-alt6
sg-hover-block+sg-alt7
sg-hover-block+sg-alt8
sg-hover-block+sg-alt9
sg-hover-block+sg-alt10
sg-hover-block+sg-alt11
sg-hover-block+sg-alt12

Classic Button

Using the general bootstrap fields we can create a button that links directly with our theme colors

btn+sg-blue
btn+sg-lightblue
btn+sg-purple
btn+sg-pink
btn+sg-red
btn+sg-brown
btn+sg-orange
btn+sg-yellow
btn+sg-paleyellow
btn+sg-green
btn+sg-leafgreen
btn+sg-teal
btn+sg-cyan
btn+sg-black
btn+sg-white
btn+sg-grey
btn+sg-mediumgrey
btn+sg-lightgrey
btn+sg-primary
btn+sg-secondary
btn+sg-success
btn+sg-info
btn+sg-warning
btn+sg-danger
btn+sg-light
btn+sg-dark
btn+sg-medium
btn+sg-background
btn+sg-alt3
btn+sg-alt4
btn+sg-alt5
btn+sg-alt6
btn+sg-alt7
btn+sg-alt8
btn+sg-alt9
btn+sg-alt10
btn+sg-alt11
btn+sg-alt12

Classic Button With Arrow

Using the general bootstrap fields we can create a button that links directly with our theme colors

btn-arrow+sg-blue
btn-arrow+sg-lightblue
btn-arrow+sg-purple
btn-arrow+sg-pink
btn-arrow+sg-red
btn-arrow+sg-brown
btn-arrow+sg-orange
btn-arrow+sg-yellow
btn-arrow+sg-paleyellow
btn-arrow+sg-green
btn-arrow+sg-leafgreen
btn-arrow+sg-teal
btn-arrow+sg-cyan
btn-arrow+sg-black
btn-arrow+sg-white
btn-arrow+sg-grey
btn-arrow+sg-mediumgrey
btn-arrow+sg-lightgrey
btn-arrow+sg-primary
btn-arrow+sg-secondary
btn-arrow+sg-success
btn-arrow+sg-info
btn-arrow+sg-warning
btn-arrow+sg-danger
btn-arrow+sg-light
btn-arrow+sg-dark
btn-arrow+sg-medium
btn-arrow+sg-background
btn-arrow+sg-alt3
btn-arrow+sg-alt4
btn-arrow+sg-alt5
btn-arrow+sg-alt6
btn-arrow+sg-alt7
btn-arrow+sg-alt8
btn-arrow+sg-alt9
btn-arrow+sg-alt10
btn-arrow+sg-alt11
btn-arrow+sg-alt12

Large Button

Using the general bootstrap fields we can create a button that links directly with our theme colors

sg-big-btn btn+sg-blue
sg-big-btn btn+sg-lightblue
sg-big-btn btn+sg-purple
sg-big-btn btn+sg-pink
sg-big-btn btn+sg-red
sg-big-btn btn+sg-brown
sg-big-btn btn+sg-orange
sg-big-btn btn+sg-yellow
sg-big-btn btn+sg-paleyellow
sg-big-btn btn+sg-green
sg-big-btn btn+sg-leafgreen
sg-big-btn btn+sg-teal
sg-big-btn btn+sg-cyan
sg-big-btn btn+sg-black
sg-big-btn btn+sg-white
sg-big-btn btn+sg-grey
sg-big-btn btn+sg-mediumgrey
sg-big-btn btn+sg-lightgrey
sg-big-btn btn+sg-primary
sg-big-btn btn+sg-secondary
sg-big-btn btn+sg-success
sg-big-btn btn+sg-info
sg-big-btn btn+sg-warning
sg-big-btn btn+sg-danger
sg-big-btn btn+sg-light
sg-big-btn btn+sg-dark
sg-big-btn btn+sg-medium
sg-big-btn btn+sg-background
sg-big-btn btn+sg-alt3
sg-big-btn btn+sg-alt4
sg-big-btn btn+sg-alt5
sg-big-btn btn+sg-alt6
sg-big-btn btn+sg-alt7
sg-big-btn btn+sg-alt8
sg-big-btn btn+sg-alt9
sg-big-btn btn+sg-alt10
sg-big-btn btn+sg-alt11
sg-big-btn btn+sg-alt12

Outline Button

An alternative button with no background, on hover we have a shadow

btn-classic-outline+sg-blue
btn-classic-outline+sg-lightblue
btn-classic-outline+sg-purple
btn-classic-outline+sg-pink
btn-classic-outline+sg-red
btn-classic-outline+sg-brown
btn-classic-outline+sg-orange
btn-classic-outline+sg-yellow
btn-classic-outline+sg-paleyellow
btn-classic-outline+sg-green
btn-classic-outline+sg-leafgreen
btn-classic-outline+sg-teal
btn-classic-outline+sg-cyan
btn-classic-outline+sg-black
btn-classic-outline+sg-white
btn-classic-outline+sg-grey
btn-classic-outline+sg-mediumgrey
btn-classic-outline+sg-lightgrey
btn-classic-outline+sg-primary
btn-classic-outline+sg-secondary
btn-classic-outline+sg-success
btn-classic-outline+sg-info
btn-classic-outline+sg-warning
btn-classic-outline+sg-danger
btn-classic-outline+sg-light
btn-classic-outline+sg-dark
btn-classic-outline+sg-medium
btn-classic-outline+sg-background
btn-classic-outline+sg-alt3
btn-classic-outline+sg-alt4
btn-classic-outline+sg-alt5
btn-classic-outline+sg-alt6
btn-classic-outline+sg-alt7
btn-classic-outline+sg-alt8
btn-classic-outline+sg-alt9
btn-classic-outline+sg-alt10
btn-classic-outline+sg-alt11
btn-classic-outline+sg-alt12

Simplistic Button

An alternative button with no background, on hover we have a shadow

btn-outline+sg-blue
btn-outline+sg-lightblue
btn-outline+sg-purple
btn-outline+sg-pink
btn-outline+sg-red
btn-outline+sg-brown
btn-outline+sg-orange
btn-outline+sg-yellow
btn-outline+sg-paleyellow
btn-outline+sg-green
btn-outline+sg-leafgreen
btn-outline+sg-teal
btn-outline+sg-cyan
btn-outline+sg-black
btn-outline+sg-white
btn-outline+sg-grey
btn-outline+sg-mediumgrey
btn-outline+sg-lightgrey
btn-outline+sg-primary
btn-outline+sg-secondary
btn-outline+sg-success
btn-outline+sg-info
btn-outline+sg-warning
btn-outline+sg-danger
btn-outline+sg-light
btn-outline+sg-dark
btn-outline+sg-medium
btn-outline+sg-background
btn-outline+sg-alt3
btn-outline+sg-alt4
btn-outline+sg-alt5
btn-outline+sg-alt6
btn-outline+sg-alt7
btn-outline+sg-alt8
btn-outline+sg-alt9
btn-outline+sg-alt10
btn-outline+sg-alt11
btn-outline+sg-alt12

SG Block Title

Use this to split up your text with a striking block of text as an alternative to general headings

sg-block-title+sg-primary
sg-block-title+sg-secondary
sg-block-title+sg-success
sg-block-title+sg-info
sg-block-title+sg-warning
sg-block-title+sg-danger
sg-block-title+sg-light
sg-block-title+sg-dark
sg-block-title+sg-medium
sg-block-title+sg-background
sg-block-title+sg-alt3
sg-block-title+sg-alt4
sg-block-title+sg-alt5
sg-block-title+sg-alt6
sg-block-title+sg-alt7
sg-block-title+sg-alt8
sg-block-title+sg-alt9
sg-block-title+sg-alt10
sg-block-title+sg-alt11
sg-block-title+sg-alt12

Intro Paragraph

This is to create a intro paragraph feature text block that is NOT a heading

sg-intro+sg-blue
sg-intro+sg-lightblue
sg-intro+sg-purple
sg-intro+sg-pink
sg-intro+sg-red
sg-intro+sg-brown
sg-intro+sg-orange
sg-intro+sg-yellow
sg-intro+sg-paleyellow
sg-intro+sg-green
sg-intro+sg-leafgreen
sg-intro+sg-teal
sg-intro+sg-cyan
sg-intro+sg-black
sg-intro+sg-white
sg-intro+sg-grey
sg-intro+sg-mediumgrey
sg-intro+sg-lightgrey
sg-intro+sg-primary
sg-intro+sg-secondary
sg-intro+sg-success
sg-intro+sg-info
sg-intro+sg-warning
sg-intro+sg-danger
sg-intro+sg-light
sg-intro+sg-dark
sg-intro+sg-medium
sg-intro+sg-background
sg-intro+sg-alt3
sg-intro+sg-alt4
sg-intro+sg-alt5
sg-intro+sg-alt6
sg-intro+sg-alt7
sg-intro+sg-alt8
sg-intro+sg-alt9
sg-intro+sg-alt10
sg-intro+sg-alt11
sg-intro+sg-alt12

SG Block Quote

A really simple way to quote within your page using our blockquote feature. This uses your primary web color to surround your text

sg-block-quote Default

SG One Color Overlay

Overlays with a single color

sg-overlay-single+sg-primary
sg-overlay-single+sg-secondary
sg-overlay-single+sg-success
sg-overlay-single+sg-info
sg-overlay-single+sg-warning
sg-overlay-single+sg-danger
sg-overlay-single+sg-light
sg-overlay-single+sg-dark
sg-overlay-single+sg-medium
sg-overlay-single+sg-background
sg-overlay-single+sg-alt3
sg-overlay-single+sg-alt4
sg-overlay-single+sg-alt5
sg-overlay-single+sg-alt6
sg-overlay-single+sg-alt7
sg-overlay-single+sg-alt8
sg-overlay-single+sg-alt9
sg-overlay-single+sg-alt10
sg-overlay-single+sg-alt11
sg-overlay-single+sg-alt12

SG Filter Gradient

Our basic filter gradient class (gradient must overwrite background color in choices). Used purely for color choices within acf fields

sg-filter-gradient Default

SG Alerts

replace bootstrap alert alert-primary feature to alert sg-alert sg-primary

sg-alert+sg-primary
sg-alert+sg-secondary
sg-alert+sg-success
sg-alert+sg-info
sg-alert+sg-warning
sg-alert+sg-danger
sg-alert+sg-light
sg-alert+sg-dark
sg-alert+sg-medium
sg-alert+sg-background
sg-alert+sg-alt3
sg-alert+sg-alt4
sg-alert+sg-alt5
sg-alert+sg-alt6
sg-alert+sg-alt7
sg-alert+sg-alt8
sg-alert+sg-alt9
sg-alert+sg-alt10
sg-alert+sg-alt11
sg-alert+sg-alt12

SG Content Feature Full

A nice simple way to break up your text with a full width chunk of featured content. There is also an option sg-content-feature which will use half the page and float right. This feature uses the same colors as below but is not displayed here.

sg-content-feature-full+sg-primary
sg-content-feature-full+sg-secondary
sg-content-feature-full+sg-success
sg-content-feature-full+sg-info
sg-content-feature-full+sg-warning
sg-content-feature-full+sg-danger
sg-content-feature-full+sg-light
sg-content-feature-full+sg-dark
sg-content-feature-full+sg-medium
sg-content-feature-full+sg-background
sg-content-feature-full+sg-alt3
sg-content-feature-full+sg-alt4
sg-content-feature-full+sg-alt5
sg-content-feature-full+sg-alt6
sg-content-feature-full+sg-alt7
sg-content-feature-full+sg-alt8
sg-content-feature-full+sg-alt9
sg-content-feature-full+sg-alt10
sg-content-feature-full+sg-alt11
sg-content-feature-full+sg-alt12

h1 Default

h2 Default

h3 Default

h4 Default

h5 Default
h6 Default

Headline

headline Default
a Default