Menu
Templates
Landing Page
Our landing page template is to be used on all pages that sit at the first level of our site hierarchy. They are the starting point for a number of our product journeys and define the structure and rules that help us tell a consistent story.
Template components
Mandatory and fixed
These components are mandatory in order to publish a basic landing page.
Optional and flexible
These components are optional, and any number can be added in any order.
Container
The template features two containers that house nested components and fixed styling.
We recommend you always have a provider list if applicable. If not, we suggest having a text component to introduce the page.
"Emotion" container
Writer notes
Content in this container should describe the offering, benefits and incentives of using MoneySuperMarket, including promotions and offers. The narrative should read from one component to another, inviting users to read down the page and helping them feel calm and confident in the product or service on offer.
Developer notes
This container is styled so all components within sit on a purple background. As the number of components increases, the container dynamically expands to contain the content.
The container can allow any number of Text and Image components and should alternate left and right text alignment when stacked. At least one Text and Image component must be populated in this template.
The User Review component should be automatically inserted into the template and always sits last after all others at the bottom of the "Emotion" container.
"Function" container
Writer notes
Content in this container should go into further detail about the process and specifics of the product or service. Examples of content to highlight include the steps required to take out a policy, product specifics and helpful information and guidance.
Developer notes
This container is styled so all components within sit on a white or very light grey background (alternating). As this number of components increases, the container dynamically expands to contain the content.
The container can allow any number of all the components which can be arranged in any order. There is no mandatory requirement to have any components in this container.
Where to find this template
To view this template on desktop and all other breakpoints, use the following links to see the template in Sketch or Zeplin.