1. Home
  2. Style Guide
  3. Style Guide: Image Options (no callout enabled)

Style Guide: Image Options (no callout enabled)

Style guide to illustrate the variety of image components, along with their options.

Maximum display size is on desktop at 824x350.

Component: Hero Image


Component: Image Aside (images can be right/left aligned)

506X633
Caption

Small:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet, odio nec eleifend condimentum, sem nulla consectetur sapien, elementum mattis dui sem accumsan est. Fusce faucibus dui dolor, ac imperdiet lectus viverra id. Nullam congue magna in velit consequat ornare. Praesent feugiat placerat risus rhoncus venenatis. Suspendisse turpis leo, rutrum ac sapien vel, pulvinar fermentum mauris. Ut blandit turpis in erat luctus tempor quis at nisi. Suspendisse leo sapien, dignissim vitae volutpat sed, fermentum at velit. Curabitur egestas venenatis purus, non efficitur ex bibendum in. Vivamus ut accumsan nisl. Fusce vulputate feugiat arcu ut pretium. Nullam eget velit egestas, dictum tellus quis, dignissim ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc posuere tortor a odio lobortis, id convallis sem pulvinar. Ut maximus rhoncus velit at rutrum.

Etiam ut nisl enim. Integer molestie et felis maximus vulputate. Aliquam erat volutpat. Phasellus aliquam ex nec quam viverra, a viverra justo viverra. Nullam tortor diam, egestas non orci sed, hendrerit tempus lectus. Sed justo purus, condimentum vitae tincidunt quis, vulputate sit amet augue. Donec vehicula at nisl non sagittis. Sed euismod diam a elementum sagittis. In vehicula eleifend ante nec pretium. Maecenas varius neque sem, non sagittis mi finibus vitae. Pellentesque vehicula vitae dolor quis dictum.

506X633
Caption
expand

Small:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet, odio nec eleifend condimentum, sem nulla consectetur sapien, elementum mattis dui sem accumsan est. Fusce faucibus dui dolor, ac imperdiet lectus viverra id. Nullam congue magna in velit consequat ornare. Praesent feugiat placerat risus rhoncus venenatis. Suspendisse turpis leo, rutrum ac sapien vel, pulvinar fermentum mauris. Ut blandit turpis in erat luctus tempor quis at nisi. Suspendisse leo sapien, dignissim vitae volutpat sed, fermentum at velit. Curabitur egestas venenatis purus, non efficitur ex bibendum in. Vivamus ut accumsan nisl. Fusce vulputate feugiat arcu ut pretium. Nullam eget velit egestas, dictum tellus quis, dignissim ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc posuere tortor a odio lobortis, id convallis sem pulvinar. Ut maximus rhoncus velit at rutrum.

Etiam ut nisl enim. Integer molestie et felis maximus vulputate. Aliquam erat volutpat. Phasellus aliquam ex nec quam viverra, a viverra justo viverra. Nullam tortor diam, egestas non orci sed, hendrerit tempus lectus. Sed justo purus, condimentum vitae tincidunt quis, vulputate sit amet augue. Donec vehicula at nisl non sagittis. Sed euismod diam a elementum sagittis. In vehicula eleifend ante nec pretium. Maecenas varius neque sem, non sagittis mi finibus vitae. Pellentesque vehicula vitae dolor quis dictum.

506X633
Caption

Medium:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet, odio nec eleifend condimentum, sem nulla consectetur sapien, elementum mattis dui sem accumsan est. Fusce faucibus dui dolor, ac imperdiet lectus viverra id. Nullam congue magna in velit consequat ornare. Praesent feugiat placerat risus rhoncus venenatis. Suspendisse turpis leo, rutrum ac sapien vel, pulvinar fermentum mauris. Ut blandit turpis in erat luctus tempor quis at nisi. Suspendisse leo sapien, dignissim vitae volutpat sed, fermentum at velit. Curabitur egestas venenatis purus, non efficitur ex bibendum in. Vivamus ut accumsan nisl. Fusce vulputate feugiat arcu ut pretium. Nullam eget velit egestas, dictum tellus quis, dignissim ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc posuere tortor a odio lobortis, id convallis sem pulvinar. Ut maximus rhoncus velit at rutrum.

Etiam ut nisl enim. Integer molestie et felis maximus vulputate. Aliquam erat volutpat. Phasellus aliquam ex nec quam viverra, a viverra justo viverra. Nullam tortor diam, egestas non orci sed, hendrerit tempus lectus. Sed justo purus, condimentum vitae tincidunt quis, vulputate sit amet augue. Donec vehicula at nisl non sagittis. Sed euismod diam a elementum sagittis. In vehicula eleifend ante nec pretium. Maecenas varius neque sem, non sagittis mi finibus vitae. Pellentesque vehicula vitae dolor quis dictum.

506X633
Caption

Large:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet, odio nec eleifend condimentum, sem nulla consectetur sapien, elementum mattis dui sem accumsan est. Fusce faucibus dui dolor, ac imperdiet lectus viverra id. Nullam congue magna in velit consequat ornare. Praesent feugiat placerat risus rhoncus venenatis. Suspendisse turpis leo, rutrum ac sapien vel, pulvinar fermentum mauris. Ut blandit turpis in erat luctus tempor quis at nisi. Suspendisse leo sapien, dignissim vitae volutpat sed, fermentum at velit. Curabitur egestas venenatis purus, non efficitur ex bibendum in. Vivamus ut accumsan nisl. Fusce vulputate feugiat arcu ut pretium. Nullam eget velit egestas, dictum tellus quis, dignissim ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc posuere tortor a odio lobortis, id convallis sem pulvinar. Ut maximus rhoncus velit at rutrum.

Etiam ut nisl enim. Integer molestie et felis maximus vulputate. Aliquam erat volutpat. Phasellus aliquam ex nec quam viverra, a viverra justo viverra. Nullam tortor diam, egestas non orci sed, hendrerit tempus lectus. Sed justo purus, condimentum vitae tincidunt quis, vulputate sit amet augue. Donec vehicula at nisl non sagittis. Sed euismod diam a elementum sagittis. In vehicula eleifend ante nec pretium. Maecenas varius neque sem, non sagittis mi finibus vitae. Pellentesque vehicula vitae dolor quis dictum.

506X633
Caption

Extra Large:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet, odio nec eleifend condimentum, sem nulla consectetur sapien, elementum mattis dui sem accumsan est. Fusce faucibus dui dolor, ac imperdiet lectus viverra id. Nullam congue magna in velit consequat ornare. Praesent feugiat placerat risus rhoncus venenatis. Suspendisse turpis leo, rutrum ac sapien vel, pulvinar fermentum mauris. Ut blandit turpis in erat luctus tempor quis at nisi. Suspendisse leo sapien, dignissim vitae volutpat sed, fermentum at velit. Curabitur egestas venenatis purus, non efficitur ex bibendum in. Vivamus ut accumsan nisl. Fusce vulputate feugiat arcu ut pretium. Nullam eget velit egestas, dictum tellus quis, dignissim ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc posuere tortor a odio lobortis, id convallis sem pulvinar. Ut maximus rhoncus velit at rutrum.

Etiam ut nisl enim. Integer molestie et felis maximus vulputate. Aliquam erat volutpat. Phasellus aliquam ex nec quam viverra, a viverra justo viverra. Nullam tortor diam, egestas non orci sed, hendrerit tempus lectus. Sed justo purus, condimentum vitae tincidunt quis, vulputate sit amet augue. Donec vehicula at nisl non sagittis. Sed euismod diam a elementum sagittis. In vehicula eleifend ante nec pretium. Maecenas varius neque sem, non sagittis mi finibus vitae. Pellentesque vehicula vitae dolor quis dictum.


Component: Image & Text (images are left aligned)

506X506

Small:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet, odio nec eleifend condimentum, sem nulla consectetur sapien, elementum mattis dui sem accumsan est. Fusce faucibus dui dolor, ac imperdiet lectus viverra id. Nullam congue magna in velit consequat ornare. Praesent feugiat placerat risus rhoncus venenatis. Suspendisse turpis leo, rutrum ac sapien vel, pulvinar fermentum mauris. Ut blandit turpis in erat luctus tempor quis at nisi. Suspendisse leo sapien, dignissim vitae volutpat sed, fermentum at velit. Curabitur egestas venenatis purus, non efficitur ex bibendum in. Vivamus ut accumsan nisl. Fusce vulputate feugiat arcu ut pretium. Nullam eget velit egestas, dictum tellus quis, dignissim ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc posuere tortor a odio lobortis, id convallis sem pulvinar. Ut maximus rhoncus velit at rutrum.

Etiam ut nisl enim. Integer molestie et felis maximus vulputate. Aliquam erat volutpat. Phasellus aliquam ex nec quam viverra, a viverra justo viverra.

Small w/Modal Option:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet, odio nec eleifend condimentum, sem nulla consectetur sapien, elementum mattis dui sem accumsan est. Fusce faucibus dui dolor, ac imperdiet lectus viverra id. Nullam congue magna in velit consequat ornare. Praesent feugiat placerat risus rhoncus venenatis. Suspendisse turpis leo, rutrum ac sapien vel, pulvinar fermentum mauris. Ut blandit turpis in erat luctus tempor quis at nisi. Suspendisse leo sapien, dignissim vitae volutpat sed, fermentum at velit. Curabitur egestas venenatis purus, non efficitur ex bibendum in. Vivamus ut accumsan nisl. Fusce vulputate feugiat arcu ut pretium. Nullam eget velit egestas, dictum tellus quis, dignissim ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc posuere tortor a odio lobortis, id convallis sem pulvinar. Ut maximus rhoncus velit at rutrum.

Etiam ut nisl enim. Integer molestie et felis maximus vulputate. Aliquam erat volutpat. Phasellus aliquam ex nec quam viverra, a viverra justo viverra.

506X506

Medium:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet, odio nec eleifend condimentum, sem nulla consectetur sapien, elementum mattis dui sem accumsan est. Fusce faucibus dui dolor, ac imperdiet lectus viverra id. Nullam congue magna in velit consequat ornare. Praesent feugiat placerat risus rhoncus venenatis. Suspendisse turpis leo, rutrum ac sapien vel, pulvinar fermentum mauris. Ut blandit turpis in erat luctus tempor quis at nisi. Suspendisse leo sapien, dignissim vitae volutpat sed, fermentum at velit. Curabitur egestas venenatis purus, non efficitur ex bibendum in. Vivamus ut accumsan nisl. Fusce vulputate feugiat arcu ut pretium. Nullam eget velit egestas, dictum tellus quis, dignissim ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc posuere tortor a odio lobortis, id convallis sem pulvinar. Ut maximus rhoncus velit at rutrum.

Etiam ut nisl enim. Integer molestie et felis maximus vulputate. Aliquam erat volutpat. Phasellus aliquam ex nec quam viverra, a viverra justo viverra.

506X506

Large:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet, odio nec eleifend condimentum, sem nulla consectetur sapien, elementum mattis dui sem accumsan est. Fusce faucibus dui dolor, ac imperdiet lectus viverra id. Nullam congue magna in velit consequat ornare. Praesent feugiat placerat risus rhoncus venenatis. Suspendisse turpis leo, rutrum ac sapien vel, pulvinar fermentum mauris. Ut blandit turpis in erat luctus tempor quis at nisi. Suspendisse leo sapien, dignissim vitae volutpat sed, fermentum at velit. Curabitur egestas venenatis purus, non efficitur ex bibendum in. Vivamus ut accumsan nisl. Fusce vulputate feugiat arcu ut pretium. Nullam eget velit egestas, dictum tellus quis, dignissim ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc posuere tortor a odio lobortis, id convallis sem pulvinar. Ut maximus rhoncus velit at rutrum.

Etiam ut nisl enim. Integer molestie et felis maximus vulputate. Aliquam erat volutpat. Phasellus aliquam ex nec quam viverra, a viverra justo viverra.

506X506

Extra Large:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet, odio nec eleifend condimentum, sem nulla consectetur sapien, elementum mattis dui sem accumsan est. Fusce faucibus dui dolor, ac imperdiet lectus viverra id. Nullam congue magna in velit consequat ornare. Praesent feugiat placerat risus rhoncus venenatis. Suspendisse turpis leo, rutrum ac sapien vel, pulvinar fermentum mauris. Ut blandit turpis in erat luctus tempor quis at nisi. Suspendisse leo sapien, dignissim vitae volutpat sed, fermentum at velit. Curabitur egestas venenatis purus, non efficitur ex bibendum in. Vivamus ut accumsan nisl. Fusce vulputate feugiat arcu ut pretium. Nullam eget velit egestas, dictum tellus quis, dignissim ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc posuere tortor a odio lobortis, id convallis sem pulvinar. Ut maximus rhoncus velit at rutrum.

Etiam ut nisl enim. Integer molestie et felis maximus vulputate. Aliquam erat volutpat. Phasellus aliquam ex nec quam viverra, a viverra justo viverra.


Inline Section Text Image (aka Figure)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet, odio nec eleifend condimentum, sem nulla consectetur sapien, elementum mattis dui sem accumsan est. Fusce faucibus dui dolor, ac imperdiet lectus viverra id. Nullam congue magna in velit consequat ornare. Praesent feugiat placerat risus rhoncus venenatis. Suspendisse turpis leo, rutrum ac sapien vel, pulvinar fermentum mauris. Ut blandit turpis in erat luctus tempor quis at nisi. Suspendisse leo sapien, dignissim vitae volutpat sed, fermentum at velit. Curabitur egestas venenatis purus, non efficitur ex bibendum in. Vivamus ut accumsan nisl. Fusce vulputate feugiat arcu ut pretium. Nullam eget velit egestas, dictum tellus quis, dignissim ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc posuere tortor a odio lobortis, id convallis sem pulvinar. Ut maximus rhoncus velit at rutrum.

Etiam ut nisl enim. Integer molestie et felis maximus vulputate. Aliquam erat volutpat. Phasellus aliquam ex nec quam viverra, a viverra justo viverra. Nullam tortor diam, egestas non orci sed, hendrerit tempus lectus. Sed justo purus, condimentum vitae tincidunt quis, vulputate sit amet augue. Donec vehicula at nisl non sagittis. Sed euismod diam a elementum sagittis. In vehicula eleifend ante nec pretium. Maecenas varius neque sem, non sagittis mi finibus vitae. Pellentesque vehicula vitae dolor quis dictum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet, odio nec eleifend condimentum, sem nulla consectetur sapien, elementum mattis dui sem accumsan est. Fusce faucibus dui dolor, ac imperdiet lectus viverra id. Nullam congue magna in velit consequat ornare. Praesent feugiat placerat risus rhoncus venenatis. Suspendisse turpis leo, rutrum ac sapien vel, pulvinar fermentum mauris. Ut blandit turpis in erat luctus tempor quis at nisi. Suspendisse leo sapien, dignissim vitae volutpat sed, fermentum at velit. Curabitur egestas venenatis purus, non efficitur ex bibendum in. Vivamus ut accumsan nisl. Fusce vulputate feugiat arcu ut pretium. Nullam eget velit egestas, dictum tellus quis, dignissim ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc posuere tortor a odio lobortis, id convallis sem pulvinar. Ut maximus rhoncus velit at rutrum.


Column Text/Images

2 Column Text/Images:
3 Column Text/Images: