Simple blocks of text with small and medium titles. Blocks can contain up to 5 rows. This style can be used to present simple messages. In the case of 2 or 3 rows, leave the "Block Layout" setting on "Auto" for a 1:1 layout of rows. Use one of the other settings if one of the rows should have visual priority over the other.

Placeholder image dimensions do not reflect the size of images/icons used for real content. This style can be used where some more emphasis is required by including a supporting image (image size: Default). In the case of 2 or 3 rows, leave the "Block Layout" setting on "Auto" for a 1:1 layout of rows. Use one of the other settings if one of the rows should have visual priority over the other.

Grey blocks are standard text blocks except the "Block Alternative Colour" switch is active. This should be used to create a natural break in the page content the help reduce user reading fatigue. It can be a single box or up to 5 in one "Blocks" container. Note: It can be applied to any "Blocks" component and should be decided on a case by case basis depending on the flow of the content.

This style should be used for the top of each page, except for the homepage which uses a slightly different layout. The style "x-large" is preferable from a design perspective as it is more impactful and the weighting works best with titles further down the page. The title should aim to be 3 lines max. As a last resort, the title can fallback to "large" style if the text is too long and it's not possible to shorten.

Optional:

• The "From" price may be used to highlight the lowest starting price of the product in question.
• Highlighted title is optional and should always be x-small e.g. "Get 1 month free trial"

Alternating image and text combination. First row should start with text left and image right. Next row alternates with image / text and so forth. Highlighted titles should be used sparingly to enhance their effect on the page.

Optional:

• Highlighted title – always size x-small
• CTA button
• Secondary CTA button
• CTA text link

Inline headers can be used when a header is required without using the "Blocks" element e.g above an "Accordion" element. Header sizes range from "x-large" to "x-small". Default colour is "Primary". Header should be left aligned unless there is a reason to have it aligned otherwise.

Use the "Customer Rating" component to reinforce the reliability of the product/service. It should flow naturally with the content and usually appears in the lower half of the page. As of writing, the header style and position are fixed in the component.

The "Accordion" component is primarily used to display the frequently asked questions for a product/service. They usually appear near the end of a page with a "Heading" component for the title.

Product blocks should be displayed with 4 max per line. If there are more than 4 products in a category and all of them need to be displayed on the same page, add an additional product block component to display the remainder. The "Free" and "Recommended" switches should only be activated / deactivated after consulting with the marketing lead.

Product comparison should appear towards the end of the page to give an in depth overview of how products compare to each other. Prices and "Add to cart" features can be displayed or not.

Highlight specific bundle promotions.

Supporting icons can be used to emphasise the content. The icons should be designed to work on white and grey backgrounds by using white to fill large areas and grey for outlines. Blue should be used for accents in the image. All of these points should be taken into account when selecting an image, so icons with open paths tend to not be a good choice. The icons should fit inside the canvas dimensions shown below; the design doesn’t need to extend edge to edge on the canvas. All icons should look proportional to each other.
Select icons with matching stroke weight when possible.

Colour palette: Grey (#CCCCCC), White (#FFFFFF), Blue (#3EC1E6)
Canvas size: 80px x 80px
Format: SVG
Icon library: https://shorturl.at/Okpkk

Simple icons can be used to support the accompanying text. The icons should be designed to fit inside the canvas dimensions shown below; the design doesn’t need to extend edge to edge on the canvas but all icons should look proportional to each other.
Select icons with matching stroke weight when possible.

Colour palette: Blue (#3EC1E6)
Canvas size: 24px x 24px
Format: SVG
Icon library: https://shorturl.at/Okpkk

The standard block to insert on pages to highlight the newsletter subscription. It should appear on the lower half of the page.

The "Hero" search box component is used wherever the content leads the reader to domain names and it makes sense to have them perform a domain name search. The full version is primarily used on the homepage and the light version is used on secondary pages. The light version can include the tabs or not, depending on the page content. The search box can be blue or grey in appearance and relies on using a background image.