Pattern library

User interface patterns and markup

Welcome to the pattern library


It contains the reusable design patterns that form the user interface for MarketHub and partner sites.


Each pattern in the library contains the associated HTML markup. Many pattern pages also contain usage information.


The pattern library is organised into 5 sections

Atoms

Basic components that cannot be broken down into sub-patterns (e.g. input box)

Molecules

Sets of elements that work together as a unit (e.g. search input box with autocomplete)

Organisms

Sets of atoms and/or molecules that form a specific section of the site (e.g. search section with input box and results list)

Templates

Meaningful page layouts that contain organisms (e.g. search results template with search section, FAQ sidebar, header and footer)

Pages

Actual pages of the site. Templates that are populated with the typical, minimum or maximum content expected in the system (e.g. search results for 'abc' with no results returned)

Ready to begin?

You can browse or search patterns using the menu on the left.


The library aims to provide Shell's interface designers and developers with a central repository of recommended user interface (UI) solutions to common interaction challenges within specific contexts.

These solutions can be evolved and added to when necessary but should always act as the central building blocks for the Shell MarketHub interface.

The library is working towards containing a set of patterns based on the atomic design methodology.

Browse patterns by tag

How should your tool be integrated with MarketHub?

Is the tool targeted user who is typical user of Shell MarketHub?

Follow the general OneShell standards, not MarketHub

Does Shell have legal responsiblity for the content and is an SLA in place?

SA hyperlink with legal disclaimer for external site is likely more appropriate

How important is the task for the user? Is this a global tool?

Are users dependant on information or services on MarketHub?

Consider migrating content to MarketHub if the functionality is supported by the platform

With relative small importance, hyperlink is a cheap and efficient solution

Can the required functionality be supported by the MarketHub Platform and is content regularly updated?

SSO is adequate solution if service is personalised and password protected, or hyperlinks is a cheap option

Consider full integration/migration to the MarketHub Platform. Consider if MarketHub ops model can support content requirements

Is the primary objective to view (report) or interact (edit) the content?

Does the tool have similar look and feel to Next Gen?

Using a container will surface content and design from native tool ithrough a frame in MarketHub

A view component (read only) should be considered, where only data is pulled and rendered.

Editable dataviews allow users to edit content on MarketHub directly

See the tutorial

Want to see the tutorial on how to use the pattern library again? Click the button below.