There are many image component options that can be used to enhance your page's look and feel. They can be found at /SharedResources/Razor/2022

These components need to be dragged and dropped onto the page in the place you want them to appear. Once dropped, a pop-up will appear which allows you to input the relevant content and configuration options.

Full width image with blockquote

The full width image with blockquote lets you display a text quote over an image. You should ensure the image used allows your text to be legible. The component should be used outside of your bootstrap container so that it expands across the entire page. It can have a link on the source text, just a text source, or no source text at all.

Image size: 1200px wide by 300px high

It can be found at /SharedResources/Razor/2022/fullWidthImage-Blockquote

Full width image and text with CTA

The full width image and text with CTA lets you display text over an image with a call to action (CTA) button link. You should ensure the image used allows your text to be legible. The component should be used outside of your bootstrap container so that it expands across the entire page.

Image size: 1200px wide by 300px high

It can be found at /SharedResources/Razor/2022/fullWidthImage-TextWithCTA

Full width image and text content

The full width image and text content lets you use HTML code to display what you need over an image. You should ensure the image used allows your content to be legible. The component should be used outside of your bootstrap container so that it expands across the entire page.

• Image size for desktop: 1920px wide by 500px high
• Image size for mobile: 600px wide by 300px high

It can be found at /SharedResources/Razor/2022/fullWidthImage-TextContent

Image carousel

The image carousel lets you display a number of images that the user can scroll through. They can also click on the image to enlarge it. A minimum of four images is recommended.

Image size: 800px wide by 600px high

It can be found at /SharedResources/Razor/2022/Image-Carousel

Rotating feature

The rotating feature lets you display a number of images with a heading, text and CTA button link over them that auto-rotate. The user can also scroll through them.

You can have a dark overlay, white overlay or no overlay. You should ensure the image used allows your content to be legible if using no overlay. You can choose to add a keyline box to go round the text content if you want to.

Image size: 1920px wide (recommended) by 400px high (or your desired feature height)

It can be found at /SharedResources/Razor/2022/Rotating-Feature

Image and text content CTA card

The image and text content CTA card displays an image on the left with a heading and text on the right, with a CTA button link at the bottom right. It looks best used in a two or three column layout. The text used should not exceed 150 characters.

Image size required: 300px wide by 400px high

It can be found at /SharedResources/Razor/2022/imageTextContentCTA-card

Heading

Text content

Link text

Heading

Text content

Link text

Image and title content CTA card

The image and title content CTA card displays an image, a heading, text and a CTA button link. It should only be used in a two or three column layout so it does not take over the whole screen. The text used for each should be the same length so the link buttons line up.

• Image size required for three columns: 550px wide by 250px high
• Image size required for two columns: 800px wide by 250px high

It can be found at /SharedResources/Razor/2022/ImageTitleContentCTA-card

Heading

Text content

Link text

Heading

Text content

Link text

Image with heading, title and content CTA card

The image with heading, title and content CTA card displays a heading, an image, a secondary heading, text and a CTA button link. It should only be used in a two or three column layout so it does not take over the whole screen. The text used for each should be the same length so the link buttons line up.

• Image size required for three columns: 550px wide by 250px high
• Image size required for two columns: 800px wide by 250px high

It can be found at /SharedResources/Razor/2022/imageHeadingTitleContentCTA-card

Heading

Second heading

Text content

Link text

Heading

Second heading

Text content

Link text

Heading

Second heading

Text content

Link text

Image with white CTA card

The image with white CTA card displays an image with a CTA button link at the bottom left. It should only be used in three or more column layouts so it does not take over the whole screen.

Image size required: 550px wide by 250px high

It can be found at /SharedResources/Razor/2022/imageWhiteCTA-card

Link text

Link text

Link text

Older components

You can also make use of a few of our features created for our left side menu pages. View the guidance for:

• Content cards
• Image and text CTA block
• Image layouts
• Videos