The Style Guide

Typography

Work Hard &
Be Nice To People

H1

Work Hard &
Be Nice To People

H2

Work Hard &
Be Nice To People

H3

God, she thought lying in bed naked and re-reading Aldington's Portrait of a Genius, But... he's an impostor! Not D.H. Lawrence, but her husband-Henry-with his bauble of a belly and all the hair he never combed and the way he stood around in his shorts, and the way he stood naked before the window like an Arabian and howled; and he told her that he was turning into a toad and that he wanted to buy a Buddha and that he wanted to be old and drown in the sea, and that he was going to grow a beard and that he felt as if he was turning into a woman.

P

And Henry was poor, poor and worthless and miserable and sick. And he wanted to join the Mahler Society. His breath was bad, his father was insane and his mother was dying of cancer.

SMALL-P
Texts
This is some text inside of a div block.
Front--Prohibition
This is some text inside of a div block.
text--50px
This is some text inside of a div block.
text--25px
This is some text inside of a div block.
text--20px
This is some text inside of a div block.
Text-Color--Green
This is some text inside of a div block.
Text-Color--Grey
This is some text inside of a div block.
Bold
This is some text inside of a div block.
Semi-Bold
Blog

Work Hard &
Be Nice To People

H1 Blog post title

Work Hard &
Be Nice To People

H2 Blog Post Subtitle
rich text

H3 Blog Post Subtitle

H4 Blog Post Subtitle

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Esto es un bold

Esto es un link

Esto es un quote
  • Item 1
  • Item 2
  • Item 3
  1. Item 1
  2. Item 2
  3. Item 3
colors
Brand Colors
BG Colors
Buttons / Links
Text Link
TEXT LINK
My container
Flex Columns
Alignment
Flex vertical
Flex Vertical
El div tiene un display flex vertical, pero sin ninguna otra propiedad.
Flex Vertical + Align-Center
El div tiene un display flex vertical alineado al centro, mientras que el texto sigue estando alineado a la izquierda
Flex Vertical + Align-Center + Text-Align-Center
El div tiene un display flex vertical alineado al centro, y el texto también está alineado al centro gracias a la global class "Text-Align-Center"
Flex Vertical + Justify-End
El div tiene un display flex vertical con justify al final del div
Flex Vertical + Align-End
El div tiene un display flex vertical con alineación de los elementos a la derecha
Flex HORIZONTAL
Horizontal-Container
El div tiene display flex horizontal, con justificación "space between"
Horizontal-Container + Justify-Start
El div tiene un display flex horizontal, con justificación a la izquierda gracias a la global class "justify-left"
Horizontal-Container + Justify-Center
El div tiene un display flex horizontal, con justificación al centro, gracias a la global class "justify-center"
FlexColWrap
Al igual que "Horizontal-Container" es un div con display flex horizontal pero con la justificación predeterminada hacia el inicio (izquierda). La diferencia es que tiene activada la propiedad "Wrap"
FlexColWrap + Justify-Center
Al igual que "Horizontal-Container" es un div con display flex horizontal. La diferencia es que tiene activada la propiedad "Wrap".
La justificación es en el centro gracias a la global class "Justify-Center"
Grids
Margins
Share buttons
CTA's Embed
Be the first to know when we are live
¡Gracias por suscribirte! Pronto recibirás nuestro primer correo.
Oops! Hubo algún error. Por favor, vuelve a intentar.
Catch the best moments
THE HIGHLIGHTS APP📱
Get started