x-large
Heading H1 (optional/secondary)
large
Page Heading H1 = large (default)
regular
Row Heading h2 = regular
small
Row Sub-heading h3 = small
x-small
Highlighted text h4 = x-small
small
Highlighted text h5 or h6 = xx-small
button styles - class names:
theme-dark
Heading H1 = x-large (optional/secondary)
Page Heading H1 = large (default)
Row Heading h2 = regular
Row Sub-heading h3 = small
Highlighted text h4 = x-small
Highlighted text h5 or h6 = xx-small
button styles - class names:
theme-light
Heading H1 = x-large (optional/secondary)
Page Heading H1 = large (default)
Row Heading h2 = regular
Row Sub-heading h3 = small
Highlighted text h4 = x-small
Highlighted text h5 or h6 = xx-small
x-large
Body, x-large, Roboto, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
large
Body, large, Roboto, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
regular
Body, regular, Roboto, regular (font-size 18/28) Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
small
Body, small, Roboto regular (font-size 15/24) Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
x-small
Body, x-small, Roboto, regular (font-size 13/22) Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
Body, x-large, Roboto, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Body, large, Roboto, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Body, regular, Roboto, bold (font-size 18/28) Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
Body, small, Roboto bold (font-size 15/24) Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
Body, x-small, Roboto, bold (font-size 13/22) Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
Body, x-large, Roboto, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Body, large, Roboto, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Body, regular, Roboto, regular (font-size 18/28) Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
Body, small, Roboto regular (font-size 15/24) Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
Body, x-small, Roboto, regular (font-size 13/22) Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
Body, x-large, Roboto, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Body, large, Roboto, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Body, regular, Roboto, bold (font-size 18/28) Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
Body, small, Roboto bold (font-size 15/24) Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
Body, x-small, Roboto, bold (font-size 13/22) Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
==========================
Headings (h1,h2,h3,h4,h5):Class names used to set custom font size to any heading (h1,h2,h3,h4,h5) regardless if their default sizes:
50px = x-large
40px = large
30px = regular
26px = small
20px = x-small
18px = xx-small (same size as p but bold)
Heading default font sizes:
50px = h1 = x-large (optional/secondary h1)
40px = h1 = large (default)
30px = h2 = regular
26px = h3 = small
20px = h4 = x-small
18px = h5 = xx-small
SEO best practice – where to use headings:
h1 = Page Title
h2 = Row Title
h3 = Row Sub-section title
h4 = Articles/blogs/legal pages with more text that require extra highlighting
h5 = Articles/blogs/legal pages with more text that require extra highlighting
==========================
Body (p,a,span,li):
Class names used to set custom font size to any body element (p,a,span,li):
30px = x-large
20px = large
18px = regular
15px = small
13px = x-small
Where to use different body text sizes (p,a,span,li):
x-large = (Page Sub-title under h1)
large = (Row Sub-title under h2)
regular = (main body text)
small = (secondary body text)
x-small = (legal text, footer links)
==========================
Main Menu (li a):
16px = menu links