Skip to main content

Breakpoints

Desktop
LAPTOP
TABLET
MOBILE

Padding

1
2
3
4
5
6
7
8
9
10

Colors

white
TXT CLASS: .txc__white
BG CLASS: .bgc__white
HEX: #ffffff
RGB: 255, 255, 255
black
TXT CLASS: .txc__black
BG CLASS: .bgc__black
HEX: #000000
RGB: 0, 0, 0
green
TXT CLASS: .txc__green
BG CLASS: .bgc__green
HEX: #cedc6c
RGB: 206, 220, 108
pink
TXT CLASS: .txc__pink
BG CLASS: .bgc__pink
HEX: #e88ebb
RGB: 232, 142, 187
red
TXT CLASS: .txc__red
BG CLASS: .bgc__red
HEX: #e24069
RGB: 226, 64, 105
teal
TXT CLASS: .txc__teal
BG CLASS: .bgc__teal
HEX: #2ab6bc
RGB: 42, 182, 188
yellow
TXT CLASS: .txc__yellow
BG CLASS: .bgc__yellow
HEX: #ffc956
RGB: 255, 201, 86
purple
TXT CLASS: .txc__purple
BG CLASS: .bgc__purple
HEX: #7c60aa
RGB: 124, 96, 170
blue_dark
TXT CLASS: .txc__blue_dark
BG CLASS: .bgc__blue_dark
HEX: #3b4f56
RGB: 59, 79, 86
accent
TXT CLASS: .txc__accent
BG CLASS: .bgc__accent
HEX: #2ab6bc
RGB: 42, 182, 188
tan
TXT CLASS: .txc__tan
BG CLASS: .bgc__tan
HEX: #fcf7e9
RGB: 252, 247, 233
blue_light
TXT CLASS: .txc__blue_light
BG CLASS: .bgc__blue_light
HEX: #90d1db
RGB: 144, 209, 219

Typography

Font Weight | txw__100 - 900

txw__100
txw__200
txw__300
txw__400
txw__500
txw__600
txw__700
txw__800
txw__900
txw__100
txw__200
txw__300
txw__400
txw__500
txw__600
txw__700
txw__800
txw__900

Leading | txw__x1 - 5

txs__6Aenean venenatis leo
txs__6_1Aenean venenatis leo
txs__6_2Aenean venenatis leo
txs__6_3Aenean venenatis leo
txs__6_4Aenean venenatis leo

Typescale | txs__1 - 10

txs__1
txs__2
txs__3
txs__4
txs__5
txs__6
txs__7
txs__8
txs__9
txs__10

Headings

Heading H1

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

Heading H2

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

Heading H3

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

Heading H4

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

Heading H5

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

Paragraph

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

Blockquote

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

This is wrapped with STRONG tags, sit amet consectetur adipisicing elit. Paragraph Link veniam ipsa cupiditate pariatur culpa, voluptas nisi aspernatur blanditiis commodi, ab ea reprehenderit? Vero nostrum minus a architecto veniam nihil This is wrapped with EM tags eum maiores dicta sapiente, Paragraph Link pariatur nam ducimus corporis laborum. Odit, neque voluptatum.

Lists

  • Aenean venenatis leo ac nunc lobortis gravida.
  • Nullam rutrum urna et pharetra dignissim. Integer sit amet velit sagittis, consequat dolor et, interdum sem.
  • Integer sit amet velit sagittis, consequat dolor et, interdum sem.
    • Aenean venenatis leo ac nunc lobortis gravida.
    • Nullam rutrum urna et pharetra dignissim. Integer sit amet velit sagittis, consequat dolor et, interdum sem.
    • Integer sit amet velit sagittis, consequat dolor et, interdum sem.
    • Phasellus tristique ex sit amet aliquam volutpat. Nam dapibus tortor quis sollicitudin pulvinar. Aenean venenatis leo ac nunc lobortis gravida.
    • Nam dapibus tortor quis sollicitudin pulvinar. Nullam rutrum urna et pharetra dignissim. Integer sit amet velit sagittis, consequat dolor et, interdum sem.
  • Phasellus tristique ex sit amet aliquam volutpat. Nam dapibus tortor quis sollicitudin pulvinar. Aenean venenatis leo ac nunc lobortis gravida.
  • Nam dapibus tortor quis sollicitudin pulvinar. Nullam rutrum urna et pharetra dignissim. Integer sit amet velit sagittis, consequat dolor et, interdum sem.
  1. Aenean venenatis leo ac nunc lobortis gravida.
  2. Nullam rutrum urna et pharetra dignissim. Integer sit amet velit sagittis, consequat dolor et, interdum sem.
  3. Integer sit amet velit sagittis, consequat dolor et, interdum sem.
    1. Aenean venenatis leo ac nunc lobortis gravida.
    2. Nullam rutrum urna et pharetra dignissim. Integer sit amet velit sagittis, consequat dolor et, interdum sem.
    3. Integer sit amet velit sagittis, consequat dolor et, interdum sem.
    4. Phasellus tristique ex sit amet aliquam volutpat. Nam dapibus tortor quis sollicitudin pulvinar. Aenean venenatis leo ac nunc lobortis gravida.
    5. Nam dapibus tortor quis sollicitudin pulvinar. Nullam rutrum urna et pharetra dignissim. Integer sit amet velit sagittis, consequat dolor et, interdum sem.
  4. Phasellus tristique ex sit amet aliquam volutpat. Nam dapibus tortor quis sollicitudin pulvinar. Aenean venenatis leo ac nunc lobortis gravida.
  5. Nam dapibus tortor quis sollicitudin pulvinar. Nullam rutrum urna et pharetra dignissim. Integer sit amet velit sagittis, consequat dolor et, interdum sem.

Tables

* table class="fl-table"

Header 1Header 2Header 3Header 4Header 5
Content 1Content 1Content 1Content 1Content 1
Content 2Content 2Content 2Content 2Content 2
Content 3Content 3Content 3Content 3Content 3
Content 4Content 4Content 4Content 4Content 4
Content 5Content 5Content 5Content 5Content 5
Content 6Content 6Content 6Content 6Content 6
Content 7Content 7Content 7Content 7Content 7
Content 8Content 8Content 8Content 8Content 8
Content 9Content 9Content 9Content 9Content 9
Content 10Content 10Content 10Content 10Content 10

Grid

11
12
13
14
15
16
18
18
19
110
111
112

0v

1v