Style Guide

Layout Blocks


Color Promo Block

Eyebrow

Default (Select H2 Heading)

Body content goes here. This rich-text area is used to describe the link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in tincidunt enim. Maecenas justo metus, molestie eget orci ut, vehicula tincidunt mi. 

Eyebrow

Light (Select H2 Heading)

Body content goes here. This rich-text area is used to describe the link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in tincidunt enim. Maecenas justo metus, molestie eget orci ut, vehicula tincidunt mi. 

Eyebrow

Primary (Select H2 Heading)

Body content goes here. This rich-text area is used to describe the link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in tincidunt enim. Maecenas justo metus, molestie eget orci ut, vehicula tincidunt mi.

Eyebrow

Dark (Select H2 Heading)

Body content goes here. This rich-text area is used to describe the link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in tincidunt enim. Maecenas justo metus, molestie eget orci ut, vehicula tincidunt mi. 


Side-by-Side Block

Light, Image Right - Select Heading 2

Body content goes here. This rich-text area is used to describe the link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in tincidunt enim. Maecenas justo metus, molestie eget orci ut, vehicula tincidunt mi. 

Dark, Image Left - Select Heading 2

Body content goes here. This rich-text area is used to describe the link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in tincidunt enim. Maecenas justo metus, molestie eget orci ut, vehicula tincidunt mi. 

Green, Image Right - Select Heading 2

Body content goes here. This rich-text area is used to describe the link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in tincidunt enim. Maecenas justo metus, molestie eget orci ut, vehicula tincidunt mi. 


Full-Width Side-by-Side Block

Process Icon - Symbols and Web Pages

White - Select Heading 2

Body content goes here. This rich-text area is used to describe the link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in tincidunt enim. Maecenas justo metus, molestie eget orci ut, vehicula tincidunt mi. 

Call To Action Button

Process Icon - Symbols and Web Pages

Lime and Flipped - Select Heading 2

Body content goes here. This rich-text area is used to describe the link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in tincidunt enim. Maecenas justo metus, molestie eget orci ut, vehicula tincidunt mi. 

Call To Action Button

Process Icon - Symbols and Web Pages

White - Select Heading 2

Body content goes here. This rich-text area is used to describe the link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in tincidunt enim. Maecenas justo metus, molestie eget orci ut, vehicula tincidunt mi. 

Call To Action Button

Gray and Flipped - Select Heading 2

Body content goes here. This rich-text area is used to describe the link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in tincidunt enim. Maecenas justo metus, molestie eget orci ut, vehicula tincidunt mi. 

Call To Action Button

Process Icon - Symbols and Web Pages

Blue - Select Heading 2

Body content goes here. This rich-text area is used to describe the link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in tincidunt enim. Maecenas justo metus, molestie eget orci ut, vehicula tincidunt mi. 

Call To Action Button


Sticky Side-by-Side Block

Image Caption Goes Here

Sticky Side-by-Side - Select Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium tempor felis, non efficitur magna suscipit id. Proin venenatis dictum purus, ut hendrerit neque consectetur sed. Aliquam neque ante, viverra ut accumsan eget, volutpat et eros. Nam gravida pulvinar massa, eget sagittis purus vestibulum in. Donec placerat luctus elit vel vulputate. Morbi ullamcorper odio et neque euismod ultrices. Aliquam placerat at sapien nec vehicula. Quisque nec purus elit. Morbi pellentesque cursus libero, sed aliquet eros sagittis vel. Ut enim eros, fringilla vitae nunc ut, auctor mollis erat.

Nunc pharetra nulla a maximus venenatis. Donec sit amet dolor id est fermentum suscipit non interdum ex. Suspendisse nec auctor dolor. Nunc imperdiet elementum magna, sed aliquam turpis ullamcorper et. Proin eu vehicula nunc. Sed sed augue volutpat, suscipit velit scelerisque, pulvinar eros. Aenean porttitor neque vel dui porttitor, ut tempor mauris euismod. Proin quis justo magna. Nulla accumsan maximus tincidunt. Morbi ornare magna nulla, sit amet dignissim dolor semper at. Duis pulvinar nunc laoreet est vulputate dignissim. Praesent porta urna metus, in finibus erat vehicula eget. Quisque eu accumsan orci. Etiam imperdiet lorem eget rhoncus semper. Cras interdum nunc erat.

In hac habitasse platea dictumst. Donec molestie libero nisl, eu suscipit dolor laoreet eu. Praesent tincidunt justo quis sagittis volutpat. Mauris porttitor, urna vel pharetra consectetur, elit justo varius justo, a fermentum erat nisi non orci. Phasellus velit urna, facilisis convallis imperdiet et, molestie et elit. Nunc tortor mi, ullamcorper vel nisi hendrerit, ullamcorper blandit nunc. Etiam imperdiet ultrices leo, a volutpat quam vehicula in. Morbi a enim scelerisque, elementum elit ac, fringilla velit.

 

Image Caption Goes Here

Sticky Side-by-Side (Reversed) - Select Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium tempor felis, non efficitur magna suscipit id. Proin venenatis dictum purus, ut hendrerit neque consectetur sed. Aliquam neque ante, viverra ut accumsan eget, volutpat et eros. Nam gravida pulvinar massa, eget sagittis purus vestibulum in. Donec placerat luctus elit vel vulputate. Morbi ullamcorper odio et neque euismod ultrices. Aliquam placerat at sapien nec vehicula. Quisque nec purus elit. Morbi pellentesque cursus libero, sed aliquet eros sagittis vel. Ut enim eros, fringilla vitae nunc ut, auctor mollis erat.

Nunc pharetra nulla a maximus venenatis. Donec sit amet dolor id est fermentum suscipit non interdum ex. Suspendisse nec auctor dolor. Nunc imperdiet elementum magna, sed aliquam turpis ullamcorper et. Proin eu vehicula nunc. Sed sed augue volutpat, suscipit velit scelerisque, pulvinar eros. Aenean porttitor neque vel dui porttitor, ut tempor mauris euismod. Proin quis justo magna. Nulla accumsan maximus tincidunt. Morbi ornare magna nulla, sit amet dignissim dolor semper at. Duis pulvinar nunc laoreet est vulputate dignissim. Praesent porta urna metus, in finibus erat vehicula eget. Quisque eu accumsan orci. Etiam imperdiet lorem eget rhoncus semper. Cras interdum nunc erat.

In hac habitasse platea dictumst. Donec molestie libero nisl, eu suscipit dolor laoreet eu. Praesent tincidunt justo quis sagittis volutpat. Mauris porttitor, urna vel pharetra consectetur, elit justo varius justo, a fermentum erat nisi non orci. Phasellus velit urna, facilisis convallis imperdiet et, molestie et elit. Nunc tortor mi, ullamcorper vel nisi hendrerit, ullamcorper blandit nunc. Etiam imperdiet ultrices leo, a volutpat quam vehicula in. Morbi a enim scelerisque, elementum elit ac, fringilla velit.

 


Half-and-Half Block

Style Guide

Half-and-Half - Select Heading 2

Column Header (Standard) - Select Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium tempor felis, non efficitur magna suscipit id. Proin venenatis dictum purus, ut hendrerit neque consectetur sed.

A Fourth Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium tempor felis, non efficitur magna suscipit id. Proin venenatis dictum purus, ut hendrerit neque consectetur sed.

Column Header (Standard) - Select Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium tempor felis, non efficitur magna suscipit id. Proin venenatis dictum purus, ut hendrerit neque consectetur sed.

A Fourth Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium tempor felis, non efficitur magna suscipit id. Proin venenatis dictum purus, ut hendrerit neque consectetur sed.

Style Guide

Half-and-Half, Dark and Uneven - Select Heading 2

Column Header (Standard) - Select Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium tempor felis, non efficitur magna suscipit id. Proin venenatis dictum purus, ut hendrerit neque consectetur sed.

A Fourth Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium tempor felis, non efficitur magna suscipit id. Proin venenatis dictum purus, ut hendrerit neque consectetur sed.

Column Header (Longer) - Select Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium tempor felis, non efficitur magna suscipit id. Proin venenatis dictum purus, ut hendrerit neque consectetur sed. Aliquam neque ante, viverra ut accumsan eget, volutpat et eros. Nam gravida pulvinar massa, eget sagittis purus vestibulum in.

Donec placerat luctus elit vel vulputate. Morbi ullamcorper odio et neque euismod ultrices. Aliquam placerat at sapien nec vehicula. Quisque nec purus elit. Morbi pellentesque cursus libero, sed aliquet eros sagittis vel. Ut enim eros, fringilla vitae nunc ut, auctor mollis erat.

A Fourth Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium tempor felis, non efficitur magna suscipit id. Proin venenatis dictum purus, ut hendrerit neque consectetur sed. Aliquam neque ante, viverra ut accumsan eget, volutpat et eros. Nam gravida pulvinar massa, eget sagittis purus vestibulum in.

Style Guide

Half-and-Half with CTA Column - Select Heading 2

Column Header (Standard) - Select Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium tempor felis, non efficitur magna suscipit id. Proin venenatis dictum purus, ut hendrerit neque consectetur sed.

A Fourth Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium tempor felis, non efficitur magna suscipit id. Proin venenatis dictum purus, ut hendrerit neque consectetur sed.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium tempor felis, non efficitur magna suscipit id. Proin venenatis dictum purus, ut hendrerit neque consectetur sed.

Black Button (Small)

Link Grid Block


Promo List Block

Promo List Block

Umbraco and Blend Interactive logos.

Promo List Item Blue

Body content goes here. This rich-text area is used to describe the link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in tincidunt enim. Maecenas justo metus, molestie eget orci ut, vehicula tincidunt mi.

Promo List Item Green

Body content goes here. This rich-text area is used to describe the link. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in tincidunt enim. Maecenas justo metus, molestie eget orci ut, vehicula tincidunt mi.