Building Blocks

Flex Box

CSS:
Flex

Description: Flex box (default Horizontal)
CSS (combo):
Flex V

Description: Flex box (default Horizontal)
Flex Box Primary Modifiers - Horizontal and Vertical
CSS:
AS

Description: Align Start
CSS:
AC

Description: Align Centre
CSS:
AE

Description: Align End
CSS:
AB

Description: Align Baseline
Flex Box Primary Align Modifiers - Applied to Flex Horizontal
CSS (combo):
AS V

Description: Align Start (Vertical)
CSS (combo):
AC V

Description: Align Centre (Vertical)
CSS (combo):
AE V

Description: Align End (Vertical)
CSS (combo):
AB V

Description: Align Baseline (Vertical)
Flex Box Primary Align Modifiers - Applied to Flex Vertical (using combo class)
CSS:
JS

Description: Justify Start
CSS:
JC

Description: Justify Centre
CSS:
JE

Description: Justify End
CSS:
JSB

Description: Justify Distribute Between
CSS:
JSA

Description: Justify Distribute Around
Flex Box Primary Justify Modifiers - Applied to Flex Horizontal
CSS (combo):
JS.V

Description: Justify Start (Vertical)
CSS (combo):
JC.V

Description: Justify Centre (Vertical)
CSS (combo):
JE.V

Description: Justify End (Vertical)
CSS (combo):
JDB.V

Description: Justify Distribute Between (Vertical)
CSS (combo):
JDA.V

Description: Justify Distribute Around (Vertical)
Flex Box Primary Justify Modifiers - Applied to Flex Vertical (using combo class)

Text Modifiers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
TJL

Description:
Text Justify Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
TJC

Description:
Text Justify Centre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdaiet. Nunc ut sem vitae risus tristique posuere.

CSS:
TJR

Description:
Text Justify Centre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
TJJ

Description:
Text Justify Centre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
i

Description:
italic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut

CSS:
b

Description:
bold
Primary Text modifiers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
u

Description:
underline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh

CSS:
caps
Description:
All capitals

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdaiet. Nunc ut sem vitae risus tristique

CSS:
capE
Description:
Capitalise every word

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
tsh

Description:
Text shadow

Text Greys

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
10B
Description: 10% Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
20B
Description: 10% Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
30B
Description: 10% Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
40B
Description: 10% Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
50B
Description: 10% Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
60B
Description: 10% Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
70B
Description: 10% Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
80B
Description: 10% Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
90B
Description: 10% Black
Text Grey Modifiers

Opacity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
OP10
Description: 10% Opacity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
OP20
Description: 20% Opacity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
OP30
Description: 30% Opacity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
OP40
Description: 40% Opacity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
OP50
Description: 50% Opacity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
OP60
Description: 60% Opacity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
OP70
Description: 70% Opacity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
OP80
Description: 80% Opacity

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

CSS:
OP90
Description: 90% Opacity
Opacity Modifiers (not just for text)

Spacers

CSS:
bleed
Description: horizontal and vertical spacer Large
CSS:
Spacer
Description: horizontal and vertical spacer
CSS:
bleed
Description: horizontal and vertical spacer Large
Opacity Modifiers (not just for text)

Miscellaneous

CSS:
rel
Description: Position Relative
CSS:
bleed
Description: No padding all round
CSS:
Grow
Description:
Expands to fill flexbox
CSS:
Stay
Description:
Will not grow or shrink in flexbox
Opacity Modifiers (not just for text)

Sections

CSS:
Section
Description:
Standard Section Component
CSS:
Section.bleed
Description:
Standard Section Component - No Padding
CSS:
Section.pad
Description:
Standard Section Component with top and bottom padding
CSS:
Section.hero
Description:
Standard Section Component for the hero section
Opacity Modifiers (not just for text)
CSS:
V

Description: Flex box Vertical
CSS:
Flex

Description: Flex box (default Horizontal)
CSS:
Contain

Description: Responsive container class

Flex Box tablet modifiers

CSS:
tabflex

Description: Flex box (default Horizontal) tablet and below
CSS (combo):
tabV flex

Description: Flex box (default Horizontal) + V modifier tablet and below
Flex Box tablet (and below) Modifiers - Horizontal and Vertical
CSS:
tabAS

Description: Align Start
CSS:
tabAC

Description: Align Centre
CSS:
tabAE

Description: Align End
CSS:
tabAB

Description: Align Baseline
Flex Box Primary Align Modifiers - Applied to Flex Horizontal
CSS (combo):
AS V

Description: Align Start (Vertical)
CSS (combo):
AC V

Description: Align Centre (Vertical)
CSS (combo):
AE V

Description: Align End (Vertical)
CSS (combo):
AB V

Description: Align Baseline (Vertical)
Flex Box Primary Align Modifiers - Applied to Flex Vertical (using combo class)
CSS:
JS

Description: Justify Start
CSS:
JC

Description: Justify Centre
CSS:
JE

Description: Justify End
CSS:
JSB

Description: Justify Distribute Between
CSS:
JSA

Description: Justify Distribute Around
Flex Box Primary Justify Modifiers - Applied to Flex Horizontal
CSS (combo):
JS.V

Description: Justify Start (Vertical)
CSS (combo):
JC.V

Description: Justify Centre (Vertical)
CSS (combo):
JE.V

Description: Justify End (Vertical)
CSS (combo):
JDB.V

Description: Justify Distribute Between (Vertical)
CSS (combo):
JDA.V

Description: Justify Distribute Around (Vertical)
Flex Box Primary Justify Modifiers - Applied to Flex Vertical (using combo class)