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.
Text block
This is some text inside of a div block.
Text Block -- Small
This is some text inside of a div block.
Text Block -- Medium
This is some text inside of a div block.
Text Block -- Big
This is some text inside of a div block.
Bold
This is some text inside of a div block.
Semi-Bold
This is some text inside of a div block.
Text Block -- Medium
This is some text inside of a div block.
Text Block -- Big
  • Item 1
  • Item 2
  • Item 3
Text Block -- Big
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.

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
Text Colors
Back colors
Brand Colors
complementary colors
Buttons / Links
CTA Button | Inverse button
GHOST BUTTON | Inverse Ghost
Text Link
TEXT LINK
Text Link
TEXT LINK
input form
¡Gracias por suscribirte! Pronto recibirás nuestro primer correo.
Oops! Hubo algún error. Por favor, vuelve a intentar.
My container
Flex Columns
Alignment
Flex vertical
Flex Vertical
El div tiene un display flex vertical, pero sin ninguna otra propiedad.
Flex Vertical + Flex-Align-Center
El div tiene un display flex vertical alineado al centro, mientras que el texto sigue estando alineado a la izquierda
Flex Vertical + Flex-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 + Vertical-Justify-End
El div tiene un display flex vertical con justify al final del div
Flex Vertical + Flex-Align-Right
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-Left
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
pop up modal
Open Pop Up
Share buttons

Hay un especialista para ti

  • Profesionales certificados
  • Más de 5 años de experiencia
  • Construimos un programa a la medida
Conocer especialistas
Foto de la especialista Zorayda Martinez
Niños, adolescentes y adultos
8+ años de experiencia
Foto de la especialista Rocio Taborga
Parejas y familias
30+ años de experiencia
Foto del especialista Gerardo Franco
Coaching profesional
6+ años de experiencia
Foto de la especialista Elena Arbitman
Adolescentes y adultos
23+ años de experiencia
Foto de la especialista Natalia de la Barrera
LGBTQ+
7+ años de experiencia