- Home
- Style Guide
- 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.
Component: Hero Image
Component: Image Aside (images can be right/left aligned)
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.
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.
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.
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)
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.
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.
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.
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:
