Welcome to the Group Digital Component Library

Below you will find all of the Layout components currently available across all brand sites on the Group Digital Drupal platform. They appear as they will when placed on any standard page on any brand site. Each component is labeled with the name you will find it under in your brand's CMS, and in some cases we've added a brief description of components and what they can be used for.

3.1 USP Banner
USP 2
USP 3
USP 4

3.2.1 Global USP Banner used for a single styled & linked message

5.1.1 Hero Video

Primary Call to Action

5.2.1 Hero Image

Sub-heading can add more context

Secondary Call to Action

5.2.1 Hero Image

With an alternative Mobile layout - view this on a Mobile device to see the difference!

Primary Call to Action

5.3.2 Page Topper with Text

This is an Image with Inset Image component

5.5 Image with Inset Image

Primary Call to Action

6.2.2 Text with Image

This is our standard Text with Image component.

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

Secondary Call to Action

6.2.2 Text with Image

This is the Full Bleed variant of the Text with Image component.

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

Tertiary Call to Action

6.2.2 Text with Image

And this is Text with Full Bleed Image too, but with an additional margin.

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

Primary Call to Action

6.2.4 Background Image with Text

The Background Image with Text component can break up pages nicely

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

Secondary Call to Action

Sub-heading can add more context

6.3.6 Text with Product Card

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

Primary Call to Action

“The Testimonial component can be used to highlight key points from reviews, and place them front and centre on any page.”

6.5.3 Testimonial

★★★★★

6.7.1 Icon Panel

This Icon Panel

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries.

Allows you to

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries.

Add up to 4 icons

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries.

On any page

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries.

6.8.2 Deeplink Content

6.10 Call Out Block

At the end of a page, or anywhere in between - to point to helpful places such as Contact Us or Support

Secondary Call to Action

6.11 Payment Icons - Icons can be used wherever you want to display a set of icons without text

Sub-heading can add more context

6.15.1 Horizontal Slider

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

Primary Call to Action

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Doonec pretium ipsum

Lorem Ipsum Dolor

6.16 Comparison Table