Site Style Guide
Image Sizing
For use in the hero area of the page. Images can be taller but will only show the middle 1200px square of the image.
Header One Styling
HTML CODE
Header One Tag
OUTPUT
Heading One
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
Header Two Styling
HTML CODE
Header Two Tag
OUTPUT
Heading Two
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
Header Three Styling
HTML CODE
Header Three Tag
OUTPUT
Heading Three
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
Header Four Styling
HTML CODE
Header Four Tag
OUTPUT
Heading Four
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
Header Five Styling
HTML CODE
Header Five Tag
OUTPUT
Heading Five
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
Header Six Styling
HTML CODE
Header Six Tag
OUTPUT
Heading Six
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
Paragraph Styling
HTML CODE
Paragraph Tag
OUTPUT
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
Additional Text Styling
HTML CODE
Bold Text
Underline Text
Italic Text
OUTPUT
Bold Text
Underline Text
Italic Text
Icon System
OUTPUT
Brand Colors
AVAILABLE COLORS
COLOR USAGE IN TEXT
Blue Text
Blue Text
Dark Blue Text
Dark Blue Text
Darker Blue Text
Darker Blue Text
Green Text
Green Text
COLOR USAGE IN DIVS
Add a background color to your div by adding a class to your custom content.
Syntax: bg-[ color of choice ]
NOTE: When using dark backgrounds, you can make your text white by adding the class invert to your custom content.
bg-blue invert
bg-dark-blue invert
bg-darker-blue invert
bg-green
Grid System
HTML CODE
...
...
...
OUTPUT
FULL GRID
Padding System
Padding All
These show uniform padding around the content.
Definition: pa[ ] = padding all [amount of padding]
HTML CODE
[Content Here][Content Here][Content Here][Content Here][Content Here]OUTPUT
Padding Vertical
These show vertical padding above and below the content.
Definition: pv[ ] = padding vertical [amount of padding]
HTML CODE
[Content Here][Content Here][Content Here][Content Here][Content Here]OUTPUT
Padding Horizontal
These show horizontal padding to the left and right of the content.
Definition: ph[ ] = padding horizontal [amount of padding]
HTML CODE
[Content Here][Content Here][Content Here][Content Here][Content Here]OUTPUT
Additional Padding Options
These show the top, right, bottom, left padding options. The different padding scales shown above also apply to these.
DEFINITIONS
pt[ ] = padding top [amount of padding]
pr[ ] = padding right [amount of padding]
pb[ ] = padding bottom [amount of padding]
pl[ ] = padding left [amount of padding]
EXAMPLES
RESPONSIVE DESIGN
Here are the available options to make the GRID and PADDING responsive to different devices.
Definitions:
[w-50 or pa4]-ns = the settings in the bracket will only apply to NOT-SMALL screens (tablet and desktop size)
[w-50 or pa4]-m = the settings in the bracket will only apply to MEDIUM screens (tablet size)
[w-50 or pa4]-l = the settings in the bracket will only apply to LARGE screens (desktop sizes)
HTML CODE
[Content Here]
