Styleguide

Gathered here are all styled WordPress editing blocks and page styles.

Elements

Colors:

Blue #4B4BE7

Blue light #DEDEF4

Purple #7676D6

Teal #46E0BC

Teal light #A9F7E5

White #FFFFFF

Lighter #F8F8F8

Light #F1F1F1

Grey #E0E0E0

Dark #AAAAAA

Black light #6E6E6E

Black #454545

Fonts:

Icones Regular

Icones SemiBold

Icones Bold

Text styles

Headings:

Heading h1

Heading h2

Heading h3

Table headings

Paragraph text

Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor.

Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Inline bold from “bold” button ornare sem lacinia quam venenatis vestibulum. Inline semibold from “italic” button commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.

An image caption goes here

Large text example — Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor.

Small text example — Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor.

Blockquote:

Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor.

Client John Doe

Lists:

  • Vulputate
  • Sollicitudin
  • Commodo
  • Adipiscing
  • Vestibulum

Links:

Simple link in text.

Interface elements

Buttons:

Buttons will always receive a minimum width…

… but grow with longer text:

Text input:

Checkboxes:

Dev note: input elements of class “augment” will render this custom checkbox and already require a span to follow the input

Radio button:

Dev note: input elements of class “augment” will render this custom radio and already require a span to follow the input

Select dropdown

Layout

Column1
Column2
Column3
Column4
Column5
Column6
Column7
Column8
Column9
Column10
Column11
Column12
Column1
Column2
Column3
Column4
Column5
Column6
Column1
Column2
Column3
Column4
Column1
Column2
Column3
Column1
Column2
Column1
Column2