This is H1 Title 40px/40px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a. Suspendisse non purus id elit imperdiet tempus ut vel dui. Aliquam porta metus finibus nisl aliquam pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales.
This is H2 Title 36px/40px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a. Suspendisse non purus id elit imperdiet tempus ut vel dui. Aliquam porta metus finibus nisl aliquam pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales.
This is H3 Title 28px/35px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a. Suspendisse non purus id elit imperdiet tempus ut vel dui. Aliquam porta metus finibus nisl aliquam pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales.
This is H4 Title 24px/30px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a. Suspendisse non purus id elit imperdiet tempus ut vel dui. Aliquam porta metus finibus nisl aliquam pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a. Suspendisse non purus id elit imperdiet tempus ut vel dui. Aliquam porta metus finibus nisl aliquam pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales.
This is H5 Title 24px/30px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a. Suspendisse non purus id elit imperdiet tempus ut vel dui. Aliquam porta metus finibus nisl aliquam pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales.
Paragraph Text
font: Open Sans, sans-serif;
color: #555555;
font-Size: 24px;
font-style: regular;
font-variant: normal;
font-weight: 100;
line-height: 1.5em; (or 36px)
Lorem ipsum bold text adipiscing elit. Etiam ac velit libero, eu gravida nibh. Ut augue lorem, venenatis quis condimentum sit amet, lacinia tristique nunc. Maecenas elementum lacus id nisi volutpat vel viverra nunc ultricies. Sed aliquet sollicitudin risus, eu imperdiet nulla commodo malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Above is the space between paragraphs. Maecenas sagittis leo et leo tincidunt eu elementum lectus dictum. Pellentesque fermentum, magna in mattis interdum, ante tortor molestie justo, a volutpat magna dui id turpis. Pellentesque eros nibh, venenatis non malesuada sit amet, sodales vitae augue. Proin ornare malesuada odio sed pulvinar. Donec faucibus velit sed nulla sodales et suscipit lectus placerat. Quisque quis gravida augue.
Blockquote (https://www.cssfontstack.com/Open-Sans)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac velit libero, eu gravida nibh. Ut augue lorem, venenatis quis condimentum sit amet, lacinia tristique nunc. Maecenas elementum lacus id nisi volutpat vel viverra nunc ultricies. Sed aliquet sollicitudin risus, eu imperdiet nulla commodo malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sagittis leo et leo tincidunt eu elementum lectus dictum. Pellentesque fermentum, magna in mattis interdum, ante tortor molestie justo, a volutpat magna dui id turpis. Pellentesque eros nibh, venenatis non malesuada sit amet, sodales vitae augue. Proin ornare malesuada odio sed pulvinar. Donec faucibus velit sed nulla sodales et suscipit lectus placerat. Quisque quis gravida augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac velit libero, eu gravida nibh. Ut augue lorem, venenatis quis condimentum sit amet, lacinia tristique nunc. Maecenas elementum lacus id nisi volutpat vel viverra nunc ultricies. (38px) (56px)
Sed aliquet sollicitudin risus, eu imperdiet nulla commodo malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sagittis leo et leo tincidunt eu elementum lectus dictum. Pellentesque fermentum, magna in mattis interdum, ante tortor molestie justo, a volutpat magna dui id turpis. Pellentesque eros nibh, venenatis non malesuada sit amet, sodales vitae augue. Proin ornare malesuada odio sed pulvinar. Donec faucibus velit sed nulla sodales et suscipit lectus placerat. Quisque quis gravida augue.
Unordered List
- Bullet point as part of an unordered list
- Bullet point as part of an unordered list
- Maecenas bold text et leo tincidunt eu elementum lectus dictum. Pellentesque fermentum, magna in mattis interdum, ante tortor molestie justo, a volutpat magna dui id turpis. Pellentesque eros nibh, venenatis non malesuada sit amet, sodales vitae augue.
When an unordered list reverts to paragraph style the spacing is what we see in this situation.
Ordered List
- Numbered item as part of an ordered list
- Numbered item as part of an ordered list
- Maecenas sagittis leo et leo tincidunt eu elementum lectus dictum. Pellentesque fermentum, magna in mattis interdum, ante tortor molestie justo, a volutpat magna dui id turpis. Pellentesque eros nibh, venenatis non malesuada sit amet, sodales vitae augue.
When an ordered list reverts to paragraph style the spacing is what we see in this situation.
Small Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac velit libero, eu gravida nibh. Ut augue lorem, venenatis quis condimentum sit amet, lacinia tristique nunc. Maecenas elementum lacus id nisi volutpat vel viverra nunc ultricies. Sed aliquet sollicitudin risus, eu imperdiet nulla commodo malesuada.
Links
Tables
For aligning text into columns:
column 1 | column 2 | column 3 |
column 1 | column 2 | column 3 |
Colors
#00a656 | Green | |
#0F79F1 | Medium Blue | |
#095572 | Dark Blue | |
#00a656 | Footer Green | |
#2C3D3D | Buttons | |
#555555 | H1 | |
#555555 | H2 | |
#555555 | H3 | |
#555555 | H4 | |
#555555 | Text | |
#999999 | Light Gray | |
#888888 | Medium Gray | |
#222222 | Dark Gray | |
#555555 | Link | |
#0F79F1 | Hover | |
#313233 | Social Section | |
# | Other | |
# | Other |
Image Standards
Photographs should be provided to the design team in high resolution so they are available for commercial printing of brochures as well as for use on the website. File sizes are usually over 1MB and often in the 5MB range. Large files give the designer more latitude to crop images to the standard sizes used on the website. After cropping images they need to be optimized for quick online loading. There are tools to do that.
- Images displayed at the top of the home page are 1920px x 1080px @72 pixels per inch (or dpi) resolution
- Images displayed on the interior pages at 100% wide are shown _____px wide and typically ______px high @72 pixels per inch (or dpi) resolution
- Images displayed on the Post pages at 100% wide are shown _____px wide and typically _____px high @72 pixels per inch (or dpi) resolution.
- Images displayed in the text area of a page with “text wrap” are typically aligned right and 250px-350px wide.
- Thumbnail images are displayed 150px square.
thumbnail image 150px x 150px