$color-1
#1E428A
$color-2
#DD0031
$color-3
#0051A1
$color-4
#323e48
$color-5
#060000
$color-6
#833B96
$color-7
#B23C96
$color-8
#CB148C
$color-9
#132E64
$color-10
#004D71
$color-11
#0088B8
$color-12
#44C8F5
$color-13
#1E428A
$color-14
#4E7CBE
$color-15
#3CAFE4
$color-16
#A0D7F1
$color-17
#B4DFF1
$color-18
#F9F9F9
$color-19
#EAEBED
$color-20
#D7D7DE
$color-21
#A3AAAD
$color-22
#5D6770
$color-23
$bg-color-23
$color-24
$bg-color-24
$color-25
$bg-color-25
AaBbCc
Open Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ~%!@#$%^&*-_=+ []{}()|\/<>‘’”,.;:?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ligula nunc, accumsan eu tellus sit amet, bibendum pellentesque nulla. Quisque accumsan a sem ac rutrum. Nunc sit amet purus in turpis commodo egestas. Phasellus vehicula ligula urna. Donec sollicitudin leo quis placerat tempor. In vitae nibh orci. Donec congue nisl eu sapien rhoncus, eu efficitur diam pulvinar. Etiam et vestibulum ligula. Donec in ligula eget justo volutpat consequat eget eu metus. Integer pretium metus vitae pulvinar dapibus. Nunc ullamcorper lacus nec orci hendrerit posuere. In fermentum vulputate lectus, at imperdiet nisl tincidunt ac. Etiam varius enim eu odio scelerisque semper sit amet non mi. Integer mollis varius pharetra. Fusce tortor nunc, mollis eu porta a, aliquam id velit. Donec a laoreet est. Suspendisse orci magna, sodales ornare nulla quis, suscipit accumsan mi. Duis pharetra pellentesque est non consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce efficitur non eros et finibus.
H1: Open Sans, 50px, regular
H2: Open Sans, 36px, bold
H3: Open Sans, 24px, bold
H4: Open Sans, 22px, bold
H5: Open Sans, 20px, bold
H6: Open Sans, 16px, plain text
Body: Open Sans, 16px, plain text
H1: Open Sans, 46px, regular
H2: Open Sans, 32px, bold
H3: Open Sans, 24px, bold
H4: Open Sans, 22px, bold
H5: Open Sans, 20px, bold
H6: Open Sans, 16px, plain text
Body: Open Sans, 16px, plain text
Semantic headings with matching classes (h1.h1 … h6.h6). The same .h1–.h6 classes can be applied to other elements when the outline level should stay different (e.g. <p class="h2">).
Body copy lists — inside .text-wrapper (theme defaults)
Plain lists — ul / ol without .text-wrapper
Open Sans — $primary-font, body copy
AaBbCc 123
Light 300 — The quick brown fox jumps over the lazy dog.
Regular 400 — The quick brown fox jumps over the lazy dog.
Semibold 600 — The quick brown fox jumps over the lazy dog.
Bold 700 — The quick brown fox jumps over the lazy dog.
Italic — The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ~%!@#$%^&*-_=+ []{}()|\/<>‘’”,.;:?
Back To Top