Skip to main content
Search

Design patterns

Our design patterns framework has been created using the latest version of our chosen Content Management System (CMS), EpiServer, allowing us to build the next generation of Quilter public websites in a compelling and consistent fashion.

Each page in this framework prescribes how content within the CMS can be built and how each component should be used.

Blocks

Alert block

The alert block allows you to display a message banner on the page.

Article block

The article block is used to highlight primary messages/content or a specific call to action.

Article takeaway block

Article takeaway block used exclusively on articles only - demonstrates audience and key takeaways of the article.

Chart block

The chart block allows for the display of interactive charts and graphs within our websites.

Concertina block

Concertina block allows the user to show or hide content depending on the need.

Embedded search block

An embedded search block allows you to add a bespoke search input form to a page.

Featured block

The featured block provides a means to highlight prominent content.

General content block

General content block is the default block for displaying general content.

Highlight block

Highlight block allows us to display a quote, stat or highlight statement within any page.

Introduction block

The introduction block gives us the ability to focus the user on a section of content within the page.

Office contact block

The office contact block allows contact details for a business or office to be displayed within the context of other page content.

Showcase block

The showcase block shows three images which can be clicked on to show a small preview of the content you are highlighting and the call to action to allow a user to navigate to the content.

Text only header block

Text based header to be used on tertiary level content pages.

Cards

Spotlight card

These are designed to display a group of core call to actions or messages in a defined and prominent area of the page.

List card

The list card is used to display a group of links and if needed a primary call to action.

Promo card

The promo card allows us to display a core call to action or singular message in a defined and prominent block.

Contact card

The contact card allows contact details for a specific person to be displayed.

Office contact card

The contact card allows contact details for a business or office to be displayed.

Person bio card

The person bio card allows the user to see basic biography information for a specific person.

Containers

Card holder

A card holder is a container that allows cards to be grouped and ordered within the layout of the page.

Stacked card holder

The stacked card holder is a container that allows cards to be grouped and ordered vertically within the right column of a general section block.

General section block

The general section block is a 2 column container that allows blocks or cards to sit along side eachother.

Templates

Homepage template

The homepage is the top level page on the website. Usually your most important page.

Section page template

Section pages serve to signpost users to content within the site. They should always sit at a secondary level

Article page template

News, thought leadership and support articles should all strive to use this template.

Centred article page template

This centred article template is specifically used for articles with large amounts of text or technically detailed articles.

QI article page

Specific guidance when creating articles for Quilter Investors including Between the Lines, Monthly Commentary articles and general articles.