Typography

If you edit styles here, they will change across the site

H1

Lorem ipsum dolor sit amet hiofehf of oh wf

H2

Lorem ipsum dolor sit ameto owfhoi wehfo i

H3
Lorem ipsum dolor sit ameto owfhoi wehfo i
H3 TEXT BLOCK

Lorem ipsum dolor sit ameto owfhoi wehfowfhoi wehfo i

H4
Lorem ipsum dolor sit ameto olor sit ameto owfhoi wehfo i
H4 TEXT BLOCK
This is some text inside of a div block.
SMALL

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.

Paragraph

Lorem ipsum dolor sit amet

Paragraph BOLD
Lorem ipsum dolor sit amet
pfjow fepjwpfwejpfo wpefj
Block Quote
Lorem ipsum
Text Link
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet feugiat odio.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet feugiat odio.
BUllets
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet feugiat odio.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet feugiat odio.
Tick List
  • dowefjw fpfopwe fjw
  • wef jwepfwpefjpofj opjewpofjwpo
  • wfj pwefpwejf wfj
Rich Text
Lorem ipsum dolor sit ameto owfhoi wehfo i
Black Text
Lorem ipsum dolor sit ameto owfhoi wehfo i
GREEN Text

Links & BUTTONS

Footer link
FOOTER
SOCIAL
Category
blog category
Video link
Social Sharing (DON'T DELETE)
Video link
arrow link
BACK link
Close
Close Button
Button TextButton TextButton Text
ButtonS
Button TextButton Text
Button Outline
Button Blue
Pagination

Color

Colors

ZEN GREEN
#00CC9B
Green Dark
#00AB83
Green LIGHT
#38DEAA
Green LIGHTER
#84EDCA
Warning Red
#DA2525
BLUE
#151D45
BLUE LIGHT
#24316B
BLUE LIGHTER
#334387
BLUE LIGHTEST
#475AA1

Monochrome

BLACK
#0F1937
ALTO
#CFCFCF
White
#ffffff
MERCURY
#E4E4E4
SMOKE
#F4F4F4

Logo

These are logo SVGs that can be downloaded straight from the site.

Zendrive
MAIN LOGO WHITE
DOWNLOAD
Zendrive
MAIN LOGO DARK
DOWNLOAD

Drop Shadows

Shadows
Shadows

Rounded Corners

20 PX
16 PX

Spacers

10 px
30 px
70px / 60px / 50px / 50px
100px / 90px / 70px / 70px
140px / 120px / 100px / 100px

Components

These are a few example components.

Uploading...
fileuploaded.jpg
Upload failed. Max size for files is 10 MB.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Field Wrap - Right Padding until Mobi then Bottom padding
Field Wrap - Right Padding until Tablet then Bottom padding
Field Wrap - Left Padding until MONI then Bottom padding
Field Wrap - Left Padding until Tablet then Bottom padding
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Category dropdown (ONly visible mobi)

CoNTAINERS

STANDARD - BLOCK 1270 (1170 inside) with 50 px pad / 30 px pad and stacked on mobile
STANDARD - BLOCK 1270 (1170 inside) FLEX LEFT
STANDARD - BLOCK 1270 (1170 inside) FLEX Center
STANDARD - BLOCK 1270 (1170 inside) FLEX RIGHT
STANDARD - BLOCK 1270 (1170 inside) Space Between
STANDARD - BLOCK 1270 (1170 inside) Space Between VERICAL ON TABLET
STANDARD - BLOCK 1270 (1170 inside) Space Between VERICAL ON MOBI
50% Block
50% Block
Full Width BLOCK, Vert MObi with 50% Divs Inside
50% Block
50% Block
Full Width BLOCK, Vert from mobi Landscape with 50% Divs Inside
50% Block
50% Block
Full Width BLOCK, Vert from Tablet with 50% Divs Inside

DIVS

STANDARD - BLOCK 1270 FLEX LEFT
STANDARD - BLOCK 1270 FLEX LEFT Horizontal on mobi
STANDARD - BLOCK 1270 FLEX Center
STANDARD - BLOCK 1270 FLEX Center Vertical on Tablet
STANDARD - BLOCK 1270 FLEX Center Vertical on Mobi Landscape
STANDARD - BLOCK 1270 FLEX RIGHT
STANDARD - BLOCK 1270 FLEX RIGHT Horizontal on mobi
STANDARD - BLOCK 1270 Space Between
STANDARD - BLOCK 1270 Space Between VERICAL ON TABLET
STANDARD - BLOCK 1270 Space Between VERICAL ON MOBI
Align centeR & justify center
justify center
Align Bottom

Special

Flex Child Align Center
Flex Child Center (Use with horizontal flex parent)
Flex Child Stretch
Flex Child Stretch (Use with horizontal flex parent)
100% Width
100% Width TABLET DOWN
100% Width MOBI Landscape DOWN
100% Width MObi
100% Width DIVS Within Flex (Use with vertical stacking)
Relative
First on Tablet
First on mobi Landscape
First on mobi
Switch Position

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.

Center Content

Columns

10 Column - 970 px
9 Column - 870 px
8 Column - 770 px
6 Column - 570 px
4 Column - 370 px
3 Column - 270 px
2 Column - 170 px

Padding

2em Right - all screens
2em Right - Tablet and above
2em Right - Mobi Landscape and above
2em Right - Only Tablet
RIGHT PADDING
2em BOTH - all screens
2em Both - Tablet and above
2em Both - Mobi Landscape and above
3em Both - All Screens
Right and Left PADDING

HIDING

HIDE On Tablet and Below
HIDE On MOBI LANDSCAPE and Below
HIDE On MOBI
Hiding Divs
Show On Tablet and Below
Show On MOBI LANDSCAPE and Below
Show On MOBI
Showing Divs (Preview on smaller breakpoints)