Style Guide
Typography
Headers
Headline XL class = .fs-h-xl
Headline H1 class = .fs-h1
Headline H2 class = .fs-h2
Headline H3 class = .fs-h3
Headline H4 class = .fs-h4
Headline H5 class = .fs-h5
Headline H6 class = .fs-h6
Headline Pre class = .fs-h-pre
Paragraphs
Body Default (Gutenberg P)
Body Default (GenerateBlocks T)
Paragraph class = .fs-p-xxxl
Paragraph class = .fs-p-xxl
Paragraph class = .fs-p-xl
Paragraph class = .fs-p-l
Paragraph class = .fs-p-m
Paragraph class = .fs-p (Default)
Paragraph class = .fs-p-s
Paragraph class = .fs-p-xs
Other
- This is a list
- This is a list
- This is a list
- This is a list
- This is a list
- this is a list
- This is a list
- This is a list
- This is a list
- This is a list
- This is a list
- this is a list
This is a block quote
This is sume dummy text. This is bold, this is italics, this is a link.
This is strikethrough, this is keyboard input, this is X2, this is X2, this is highlight, this is background hightlight.
This is code.
Colours
–brand
–brand-alt
–action
–action-alt
–brand-100
–brand-200
–brand-300
–brand-400
–brand-500
–brand-600
–brand-700
–brand-800
–brand-800
–base-0
–base-100
–base-200
–base-300
–base-400
–base-500
–base-600
–base-700
–base-800
–base-900
–base-900
–contrast
–contrast-2
–contrast-3
–base
–base-2
–base-3
–accent
–brand
–brand-alt
–action
–action-alt
–brand-100
–brand-200
–brand-300
–brand-400
–brand-500
–brand-600
–brand-700
–brand-800
–brand-900
–base-0
–base-100
–base-200
–base-300
–base-400
–base-500
–base-600
–base-700
–base-800
–base-900
–contrast
–contrast-2
–contrast-3
–base
–base-2
–base-3
–accent
–brand
–brand-alt
–action
–action-alt
–brand-100
–brand-200
–brand-300
–brand-400
–brand-500
–brand-600
–brand-700
–brand-800
–brand-900
–base-0
–base-100
–base-200
–base-300
–base-400
–base-500
–base-600
–base-700
–base-800
–base-900
–contrast
–contrast-2
–contrast-3
–base
–base-2
–base-3
–accent
Category Colours
–cat-agile
–cat-consulting
–cat-cybersecurity
–cat-databases
–cat-digital-marketing
–cat-digital-transformation
–cat-general
–cat-hiring
–cat-iain-white
–cat-infrastructure
–cat-it-governance
–cat-it-strategy
–cat-leadership
–cat-mentoring
–cat-mobile-development
–cat-project-management
–cat-software-engineering
–cat-technology
–cat-virtual-cto
–cat-web-development
–cat-agile
–cat-consulting
–cat-cybersecurity
–action-alt
–cat-databases
–cat-digital-transformation
–cat-general
–cat-hiring
–cat-iain-white
–cat-infrastructure
–cat-it-governance
–cat-it-strategy
–cat-leadership
–cat-mentoring
–cat-mobile-development
–cat-project-management
–cat-software-engineering
–cat-technology
–cat-virtual-cto
–cat-web-development
–brand
–brand-alt
–action
–action-alt
–brand-100
–brand-200
–brand-300
–brand-400
–brand-500
–brand-600
–brand-700
–brand-800
–brand-900
–base-0
–base-100
–base-200
–base-300
–base-400
–base-500
–base-600
–base-700
–base-800
–base-900
–contrast
–contrast-2
–contrast-3
–base
–base-2
–base-3
–accent
Buttons
Pill Buttons
Primary Primary Alt Primary Outline Primary Ghost Secondary Secondary Alt Secondary Outline Secondary GhostAnimated Buttons
PrimarySections
.gb-section-xs
.gb-section-s
.gb-section-m
.gb-section-d
.gb-section-l
.gb-section-xl
Widths
Default Container Width (1200px)
.gb-container-width-m
.gb-container-width-s
.gb-container-width-xs
Cards
See the Cards page.
Image
Tables
| Header 1 | Header 2 | Header 3 | Header 4 |
|---|---|---|---|
| Item 1 1 | Item 2 1 | Item 3 1 | Item 4 1 |
| Item 1 2 | Item 2 2 A long line of text. ABC123. | Item 3 2 | Item 4 2 |
| Item 1 3 | Item 2 3 | Item 3 3 | Item 4 3 |
| Item 1 4 | Item 2 4 | Item 3 4 | Item 4 4 |
YouTube
Custome Hooks
Over 35 years experience in IT.
I believe in putting people before technology.
