Before reading the CSS style guide below, please read the initial style guide here: https://invis.io/AR3P7MZUV and for knowing specific CSS classes and where they are applied (mostly differentiated for SEO purposes) on each page, see the Dev Notes on each screen when you view the invision project.
[/vc_column_text]Paragraph Body Text
There isn’t much body text, but it is used in cases like list of achievements in someones bio, a news story..etc.
You can change it with CSS to make it bigger or smaller in some cases.
The body font size is the web default of 16px, which translates to 1em.
body {
font-family: Lato, Arial, Sans-serif;
font-size: 1em;
font-weight: 300;
line-height: 1.5em;
}
[/vc_column_text]
- Heading 1 (h1) should be used only once on each page.
- It should be used as the first heading within the page structure.
- CSS of h1 is very similar to h4, only difference is that h1 appears on the first heading of the page to be used for page title
- CSS for h1:
- h1 {font-family: Lato, Arial, Sans-serif;font-size: 0.875em;font-weight: 400;line-height: 1.5;letter-spacing: 1px;text-transform: uppercase;}
- CSS for h1:
- Heading 2 (h2) should be used for heading, and not for paragraph text.
- In some cases we apply uppercase to H2 or resize it with css, but here is the default css for h2
- CSS for h2:
- h2 {font-family: Lato, Arial, Sans-serif;font-size: 1.3em;font-weight: 300;line-height: 1.5;letter-spacing: 1px;}
- CSS for h2:
Heading 3 (h3) should be used for longer headings, but not for prominent paragraph text.
You can use the CSS style below to look like H3 for paragraph text, but it should not be tagged H3. When it is a prominent paragraph text, give it the class .statement and use the same style as below:
- CSS for h3 and .statement:
- h3 {font-family: Crimson Text, Georgia, Serif;font-size: 1.875em;font-weight: 400;line-height: 1.5;letter-spacing: 0px;}
- Heading 4 (h4) is used for most headings.
- CSS of h4 is the same as h1
/* Font Color */
.white > * {
color: #FFFFFF !important;
}
/* Font Weight */
.text-ultra-light > * {
font-weight: 100 !important;
}
.text-light > * {
font-weight: 200 !important;
}
.text-book > * {
font-weight: 300 !important;
}
.text-normal > * {
font-weight: 400 !important;
}
.text-medium > * {
font-weight: 500 !important;
}
.text-semi-bold > * {
font-weight: 600 !important;
}
.text-bold > * {
font-weight: 700 !important;
}
.text-extra-bold > * {
font-weight: 800 !important;
}
.text-ultra-bold > * {
font-weight: 900 !important;
}
/* Font Style */
.italic {
font-style: italic !important;
}
.uppercase {
text-transform: uppercase !important;
}
.text-normal {
text-transform: none !important;
}
/* Padding */
.no-padding {
padding: 0;
}
.small-padding {
padding: 40px 0 40px;
}
.default-padding {
padding: 70px 0 70px;
}
.default-padding-mod {
padding: 70px 0 40px;
}
.default-padding-mod-center {
padding: 100px 0 70px;
}
.large-padding {
padding: 100px 0 100px;
}
/* Margin */
.margin-0 {
margin-bottom: 0 !important;
}
.margin-10 {
margin-bottom: 10px !important;
}
.margin-15 {
margin-bottom: 15px !important;
}
.margin-20 {
margin-bottom: 20px !important;
}
.margin-30 {
margin-bottom: 30px !important;
}
.margin-40 {
margin-bottom: 40px !important;
}
.margin-50 {
margin-bottom: 50px !important;
}
.margin-60 {
margin-bottom: 60px !important;
}
.margin-70 {
margin-bottom: 70px !important;
}
.margin-80 {
margin-bottom: 80px !important;
}
.margin-90 {
margin-bottom: 90px !important;
}
.margin-100 {
margin-bottom: 100px !important;
}
.no-margin-top {
margin-top: 0 !important;
}
.no-margin-bottom {
margin-bottom: 0 !important;
}
.no-margin-left {
margin-left: 0 !important;
}
.no-margin-right {
margin-right: 0 !important;
}
.no-margin {
margin: 0 !important;
}
/* Image Alignment */
img.alignleft {
float: left;
margin: 0;
}
img.alignright {
float: right;
margin: 0;
}
img.aligncenter {
margin: 0 auto;
display: block;
clear: both;
}