Image

The Image component allows you to easily add visual content to pages. You can customize the size and alignment of your image, adjust the margins for better spacing, and choose where the caption appears to enhance your page's layout.

Content Options

Aspect Ratios

chair — No aspect ratio

chair — Square - 1x1

chair — Landscape - 4x3

chair — Wide/Cinema - 16x9

chair — Portrait - 3x4

chair — Freeform

Linking

chair — This image has a link that opens in the same tab/window

chair — This image has a link that opens in a new tab/window

chair — This image has no link, but it does have a title

Layout and Styling Options

Image Widths

chair — Small (150px)

chair — Medium (300px)

chair — Large (450px)

chair — X-Large (600px)

chair — 2X-Large (750px)

chair — 1/4 (25%)

chair — 1/3 (33%)

chair — 1/2 (50%)

chair — 2/3 (66.6%)

chair — 3/4 (75%)

chair — Expand (this image will grow to fit the space available until it reaches its full width.)

Image alignment

chair — Left

chair — Center

chair — Right

Caption alignment

chair — Left

chair — Center

chair — Right

Margin bottom

chair — Margin bottom: x-small

chair — Margin bottom: small

chair — Margin bottom: medium

chair — Margin bottom: large

chair — Margin bottom: x-large

the end

Margin top

chair — Margin top: x-small

chair — Margin top: small

chair — Margin top: medium

chair — Margin top: large

chair — Margin top: x-large

the end

Margin left

chair — Margin left: x-small

chair — Margin left: small

chair — Margin left: medium

chair — Margin left: large

chair — Margin left: x-large

Margin right

chair — Margin right: x-small

chair — Margin right: small

chair — Margin right: medium

chair — Margin right: large

chair — Margin right: x-large

Usage

Do

Select images that are directly related to the content and enhance the message.
Ensure images are appropriately sized.
Use images with a similar look and feel to maintain visual consistency across the site.
Align images in a way that complements the surrounding text and layout.
Verify that images display correctly on various screen sizes and resolutions.

Don't

Avoid images that are pixelated or blurry.
Refrain from placing too many images on a single page, which can overwhelm users.
Avoid using images that are too large or too small for the intended space.
Avoid images that don’t add value or context to the content.
Minimize reliance on generic stock images to keep content authentic.

Accessibility

Ensure that you provide suitable alt text for images. Alt text for images enhances web accessibility by offering a textual description for screen readers used by visually impaired users. See the a11yproject website for more information about writing alt text for images.