Standard H2 Heading
Standard H3 Heading
Standard H4 Heading
Standard Two-Tone H2 Heading
Variation Two-Tone H2 Heading
One column with 5px margin, 15px padding.
Two columns with 5px margin, 15px padding.
Two with 5px margin, 15px padding.
Three columns with 5px margin, 15px padding.
Three columns with 5px margin, 15px padding.
Three columns with 5px margin, 15px padding.
Three columns with 5px margin, 15px padding, and light grey/green backgrounds.
Three columns with 5px margin, 15px padding, and light grey/green backgrounds.
Three columns with 5px margin, 15px padding, and light grey/green backgrounds.
Two columns with 5px margin, 15px padding, and light grey/green backgrounds.
Two columns with 5px margin, 15px padding, and light grey/green backgrounds.
One columnswith 5px margin, 15px padding, and light grey/green backgrounds.
divider examples ^^
Two columns with text/content on right and image on left, overlap of -8%. Content vertically aligned to top of image.
Content can contain media/formatting. Need to match height of media to height of content as much as possible.
Two columns with text/content on right and image on left, no text overlap. Image set to “contain.” Content vertically aligned to top of image.
Content can contain media/formatting. Need to match height of media to height of content as much as possible.
Two columns with text/content on right and image slideshow on left, overlap of -8%. Content vertically aligned to top of image.
Content can contain media/formatting. Need to match height of media to height of content as much as possible.
Pull quote from text goes here. Imagine something interesting.
Two columns with text/content on right and pullquote on left, overlap of -5%. Content vertically aligned to top of image. Content can contain formatting/images.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum lacus arcu, non vulputate purus euismod sit amet. In egestas turpis quam, a tincidunt purus ultricies sit amet. Aenean malesuada ullamcorper viverra. Donec eu nisl nulla. Ut id est ut urna vulputate dignissim. Morbi venenatis viverra lacus, quis mollis tortor varius non. Nunc in pretium arcu, sed vestibulum tortor. Quisque consequat sapien pharetra orci molestie consequat.
Aliquam aliquet, ligula gravida accumsan convallis, mauris augue maximus ante, nec ullamcorper ante magna eget neque. Praesent elementum non enim ac vestibulum. Nulla risus enim, pulvinar vel nulla eget, pulvinar semper lacus. Sed porta porta volutpat. Duis id molestie sem.
Two columns with YouTube video on left and text/content right, Content vertically aligned to top of video.
Content can contain media/formatting. Need to match height of media to height of content as much as possible.
full-width video
Image Block Style One
Optional text--no media or fancy formatting.
Image Block Style Two
Image Block Style Three
On a page with several, we would pick only one style
Icon Box Style One
Optional text -- no media or fancy formatting
Icon Box Style Two
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Icon Box Style Three
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Icon Box Style Four
Optional text -- no media or fancy formatting
Icon Box Style Two
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Icon Box Style Three
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
stand-alone icon style one
stand-alone icon style two
Flipbox Front
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ipsum sit amet odio condimentum finibus et sed odio. Quisque maximus quam est. Morbi ac mi felis. Morbi hendrerit augue quis sem convallis, in commodo eros pulvinar. Aliquam molestie quam et euismod iaculis. Donec placerat ultricies metus, non sodales ante molestie quis. Aenean sit amet vestibulum quam. Duis eu blandit massa, tempus pharetra arcu.
Flipbox Back
Standard block quotation style
1
Numbered
2
Blocks
3
for
4
Content
Accordians can contain media and text formatting.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, neque qui velit. Magni dolorum quidem ipsam eligendi, totam, facilis laudantium cum accusamus ullam voluptatibus commodi numquam, error, est. Ea, consequatur.
Tabs can contain media and text formatting.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, neque qui velit. Magni dolorum quidem ipsam eligendi, totam, facilis laudantium cum accusamus ullam voluptatibus commodi numquam, error, est. Ea, consequatur.
Other types of content are available but I haven’t created standard styles for them. For example:
- timeline
- data chart
- table of data
- image comparison
- image gallery
- slide show of images
- video gallery