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

Style Guide: Image Options (with callout enabled)

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

Maximum display size is on desktop at 824x350.

Text (Dark)

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias.

Link One Right Arrow Link Two Right Arrow

Component: Hero Image

The Hero Image Block can be used for a basic image, or as an image with a link, i.e. banner ad. Desktop width with a callout is 824px (though a 1248px image may be used as well, depending on callout permanence); tablet width is 728px; mobile width is 640px. Currently, the table image option, if no mobile image option is selected, will be used for the mobile view. If a mobile image option is selected, this will override a possible tablet image option, so that the mobile image will be displayed on both mobile devices and tablets. If only a desktop image option is selected, this will be used for all views. The height of the image can be whatever you want, depending on other UX/UI requirements.


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.

506X633
Caption
expand

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.

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.

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.

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.


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: