Image has several variations and modifiers for size and alignment. The component allows the author to add a caption with basic formatting
Small Image is useful for tall or portrait format images.
Small Images can be aligned to the left or right (center is default).
Nisi scelerisque eu ultrices vitae auctor eu. Cras fermentum odio eu feugiat pretium nibh ipsum. Ac turpis egestas integer eget aliquet nibh praesent. Aliquam id diam maecenas ultricies mi eget mauris pharetra et. Nibh cras pulvinar mattis nunc sed blandit libero volutpat sed.
Amet est placerat in egestas erat imperdiet. Nulla malesuada pellentesque elit eget gravida cum sociis natoque. Velit dignissim sodales ut eu sem integer vitae justo eget. Volutpat est velit egestas dui id ornare arcu. Augue lacus viverra vitae congue eu consequat ac.
Lorem ipsum dolor sit amet. Non provident reprehenderit et aliquid ipsum quo voluptate ipsam et quia dicta. Quo labore molestiae et iure galisum nam architecto tempora aut excepturi fugit eum laborum sequi ab quas magnam eos ratione nemo.
Aut necessitatibus accusamus sed repudiandae temporibus et autem beatae id quis debitis ut dolore soluta et ipsam vitae. 33 nisi ipsum ut ipsa eius eos nihil doloremque eos vero exercitationem? Ea Quis enim ea voluptatibus omnis eos iure officia ut harum saepe sed enim fuga aut sint voluptatem est maiores alias?
Nisi scelerisque eu ultrices vitae auctor eu. Cras fermentum odio eu feugiat pretium nibh ipsum. Ac turpis egestas integer eget aliquet nibh praesent. Aliquam id diam maecenas ultricies mi eget mauris pharetra et. Nibh cras pulvinar mattis nunc sed blandit libero volutpat sed.
Amet est placerat in egestas erat imperdiet. Nulla malesuada pellentesque elit eget gravida cum sociis natoque. Velit dignissim sodales ut eu sem integer vitae justo eget. Volutpat est velit egestas dui id ornare arcu. Augue lacus viverra vitae congue eu consequat ac.
Lorem ipsum dolor sit amet. Non provident reprehenderit et aliquid ipsum quo voluptate ipsam et quia dicta. Quo labore molestiae et iure galisum nam architecto tempora aut excepturi fugit eum laborum sequi ab quas magnam eos ratione nemo.
Aut necessitatibus accusamus sed repudiandae temporibus et autem beatae id quis debitis ut dolore soluta et ipsam vitae. 33 nisi ipsum ut ipsa eius eos nihil doloremque eos vero exercitationem? Ea Quis enim ea voluptatibus omnis eos iure officia ut harum saepe sed enim fuga aut sint voluptatem est maiores alias?
Use Medium Image when ...
Large Image can be used to showcase powerful imagery because it stretches beyond the text and content on larger screens.
Nisi scelerisque eu ultrices vitae auctor eu. Cras fermentum odio eu feugiat pretium nibh ipsum. Ac turpis egestas integer eget aliquet nibh praesent. Aliquam id diam maecenas ultricies mi eget mauris pharetra et. Nibh cras pulvinar mattis nunc sed blandit libero volutpat sed.
Amet est placerat in egestas erat imperdiet. Nulla malesuada pellentesque elit eget gravida cum sociis natoque. Velit dignissim sodales ut eu sem integer vitae justo eget. Volutpat est velit egestas dui id ornare arcu. Augue lacus viverra vitae congue eu consequat ac.
Full Width Image follows responsive principles and scales to the width of it‘s container. This is also the default image size.
Jumbo Image stretches to the edges of the users viewport. Like a Hero image except inline with the content. Use it sparingly as it will compete with Hero image.
The Hero Image is a wide format image displayed near the top of the page or article. This dynamic format stretches 100% the width of the user's browser and is used to showcase an emotional image and is the user's first impression of the content.
Hero Image has various options in regards to aspect ratio depending on the users' screen size.
When cropping images for Hero Image, it is important to make sure the image focus point is vertically and horizontally centered.
* In the examples below you can make your browser smaller to see how the Hero images swap from mobile to desktop view.
Adding text and other content to a Hero Image is easy.
Nisi scelerisque eu ultrices vitae auctor eu. Cras fermentum odio eu feugiat pretium nibh ipsum. Ac turpis egestas integer eget aliquet nibh praesent.