View container

The View container contains a drop zone where a Drupal Block should be dropped and the appropriate view should be selected.

The view dynamically pulls the selected content from its original instance based on taxonomy terms. If the original content is edited it will automatically update across the site.

Overview

Overview

Desktop

Tablet

Mobile

Specification

Specification

This provides guidance on the build, layout and content options for this component.

Layout specification

Component item	Requirement & purpose	Optional or mandatory	CMS options
Height	Expands based on size of content.	n/a	n/a
Width	The content is contained by the grid width. Center aligned - text spans 10 columns max on desktop. 12 columns on tablet and below. Left and right aligned - text spans 10 columns on desktop and tablet. 12 columns on mobile.	Mandatory	Select boxed or full width for dropzone.
Background image	Allows user to set background image. This is full width and set to cover.	Optional	Image uploader.
Background image alignment	Allows control of background image alignment.	Optional	Vertically align top, centre or bottom. Horizontally align left, centre or right.
Show/hide background image on mobile	Allows editor to hide background image on mobile breakpoint.	Optional	Show/hide.
Background image aria label	The aria-label allows us to specify a string to be used as the accessible label.	Optional	Text input field
Background colour	Allows user to set a background colour on the component.	Optional	Choose from colour palette.
Content alignment	Controls content horizontal alignment.	Optional	Left, centre or right.
Dropzone width	The content within the dropzone can be constrained to the box grid or set to full width.	Mandatory	Boxed width or full width.
Show/hide gutters	Allows control of spacing between blocks. NB - where gutters are turned off, drop shadows should not be used.	Mandatory	On/off.
Padding top and bottom	Allows control of the top and bottom spacing within this component. Set globally via the SGM.	Mandatory	Large, medium, small or none.
Margin bottom	Allows control of the spacing below the component. Set globally via the SGM.	Mandatory	Large, medium, small or none.
Pre-heading text	Allows user to set a pre-heading before H1.	Optional	Text input.
Pre-heading text colour	Sets pre-heading colour.	Optional	Choose from colour palette.
Heading text	Sets heading text.	Optional	Text input.
Heading element	Sets H2, H3 or H4 on component.	Optional	Select heading element.
Heading style	Allows user to choose where more than one type of heading style may be present (i.e. multiple H2's).	Optional	Select heading style.
Heading colour	Sets heading colour.	Optional	Choose from colour palette.
Paragraph text	Sets paragraph content.	Optional	Text input.
Paragraph style	Sets paragraph style.	Optional	Paragraph style select.
Paragraph colour	Sets paragraph colour.	Optional	Choose from colour palette.
WYSIWYG	Allows user to format text where additional styles may be required.	Optional	WYSIWYG.
Link 1 (above dropzone)	Allows user to link to a URL or launch a modal.	Optional	Link text input. Link style select. Link URL input. Target select: Same window or open in new. Modal ID input.
Link 2 (above dropzone)	Allows user to link to a URL or launch a modal.	Optional	Link text input. Link style select. Link URL input. Target select: Same window or open in new. Modal ID input.
Alternative CTA (below dropzone)	Allows user to link to a URL or launch a modal.	Optional	Link text input. Link style select. Link URL input. Target select: Same window or open in new. Modal ID input.
Footnote text and colour	Sets footnote content and colour.	Optional	Text input. Choose from colour palette.

Interaction

These are the interactive aspects of the component.

Interaction
Link 1 links to a defined page or can launch a modal.
Link 2 links to a defined page or can launch a modal.
Alternative CTA links to a defined page or can launch a modal.

Animation

For each link there will be option to add button animation. Animation configuration option will be following

Button animate	Allows users to switch On/Off the animation functionality for the button link.	Optional	On/off.
Select animation	Allow user to select animation from the drop-down list.	Optional	Select list
Duration	Set how long in seconds the animation will take to run	Required	Numeric Input
Delay	Set a start delay on the animation in seconds	Optional	Numeric Input
Iteration	Set the number of times the animation should run	Optional	Numeric Input (Maximum two)
Offset	Set the animation to start at a specific offset before or after the element has entered the viewport	Optional	Numeric Input (Pixel)

Style Guide Manager

No current Style Guide Manager settings. For global settings see the Style Guide Manager section.

Property	Requirement & purpose	Default	SGM override
Margin above drop zone	Sets the site wide margin above the drop zone	Desktop - 24px Tablet - 24px Mobile - 24px	Desktop Tablet Mobile
Margin below drop zone	Sets the site wide margin below the drop zone	Desktop - 32px Tablet - 32px Mobile - 32px	Desktop Tablet Mobile

Examples in-situ

Desktop

Alka-Seltzer

Tablet

Alka-Seltzer

Mobile

Alka-Seltzer

Usage

General usage dos and don'ts

✅ Dos	❌ Don'ts
Ensure the text is legible.	Do not use a background image that makes the text hard to read.
Only Drupal Blocks can be used within the View Container.