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-orange
sg-block+sg-yellow
sg-block+sg-green
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

Classic Button

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

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

Header Button

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

hd-btn+sg-primary
hd-btn+sg-secondary
hd-btn+sg-success
hd-btn+sg-info
hd-btn+sg-warning
hd-btn+sg-danger
hd-btn+sg-light
hd-btn+sg-dark
hd-btn+sg-medium
hd-btn+sg-background

Outline Button

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

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

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

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 Single Gradient Block

A gradient between the main color and alpha set as background

sg-gradient-block-1+sg-primary
sg-gradient-block-1+sg-secondary
sg-gradient-block-1+sg-success
sg-gradient-block-1+sg-info
sg-gradient-block-1+sg-warning
sg-gradient-block-1+sg-danger
sg-gradient-block-1+sg-light
sg-gradient-block-1+sg-dark
sg-gradient-block-1+sg-medium
sg-gradient-block-1+sg-background

SG Double Gradient block

A gradient between two colors (main+end) set as background

sg-gradient-block-2+sg-primary
sg-gradient-block-2+sg-secondary
sg-gradient-block-2+sg-success
sg-gradient-block-2+sg-info
sg-gradient-block-2+sg-warning
sg-gradient-block-2+sg-danger
sg-gradient-block-2+sg-light
sg-gradient-block-2+sg-dark
sg-gradient-block-2+sg-medium
sg-gradient-block-2+sg-background

SG Triple Gradient block

A gradient between three colors (main,mid+end) set as background

sg-gradient-block-3+sg-primary
sg-gradient-block-3+sg-secondary
sg-gradient-block-3+sg-success
sg-gradient-block-3+sg-info
sg-gradient-block-3+sg-warning
sg-gradient-block-3+sg-danger
sg-gradient-block-3+sg-light
sg-gradient-block-3+sg-dark
sg-gradient-block-3+sg-medium
sg-gradient-block-3+sg-background

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 Filter Gradient header

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

sg-filter-gradient-header Default

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

h1 Default

h2 Default

h3 Default

h4 Default

h5 Default
h6 Default
a Default
^
cyWelsh