Image

Image has several variations and modifiers for size and alignment. The component allows the author to add a caption with basic formatting

Small

Small Image is useful for tall or portrait format images.


<em>The Day-Breakers</em> by Michael Fraser, Biblioasis, 72 pages, 2022
The Day-Breakers by Michael Fraser, Biblioasis, 72 pages, 2022
Alignment

Small Images can be aligned to the left or right (center is default).


Left aligned image with content
<em>The Day-Breakers</em> by Michael Fraser, Biblioasis, 72 pages, 2022
The Day-Breakers by Michael Fraser, Biblioasis, 72 pages, 2022

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?

Right aligned image with content
<em>The Day-Breakers</em> by Michael Fraser, Biblioasis, 72 pages, 2022
The Day-Breakers by Michael Fraser, Biblioasis, 72 pages, 2022

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?

Medium

Use Medium Image when ...


Cold War
Cold War
Large

Large Image can be used to showcase powerful imagery because it stretches beyond the text and content on larger screens.


A Large Image with content

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.

Velit luna egestas dui id ornare
Velit luna egestas dui id ornare

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

Full Width Image follows responsive principles and scales to the width of it‘s container. This is also the default image size.


Phylum: Dark Matter 36 © Patrick Visentin, 2012
Phylum: Dark Matter 36 © Patrick Visentin, 2012
Jumbo

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.


Phylum: Dark Matter 36 © Patrick Visentin, 2012
Phylum: Dark Matter 36 © Patrick Visentin, 2012
Hero

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.

Small Ultra Wide
  • Width: 3260px
  • Height: 960px
Medium Wide (3:2)
  • Width: 4340px
  • Height: 1440px
Large (16:9)
  • Width: 3840px
  • Height: 2160px
Best practices

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.

Small

Medium

Large

Small Hero with Content overlay

Adding text and other content to a Hero Image is easy.


Hero Overlay

Nisi scelerisque eu ultrices vitae auctor eu. Cras fermentum odio eu feugiat pretium nibh ipsum. Ac turpis egestas integer eget aliquet nibh praesent.