Mesh component cheatsheet

An overview of the various components that are available in mesh.

Last updated: 2/2/2024

Help us improve Mesh

This is an experimental page. If you have any feedback, share your thoughts on your experience to help us improve.

Share feedback north_east
A Hand drawn, black an white illustration of a man holding a clipboard.


Perform tasks or take actions

Descriptive Text


Buttons highlight actions a user can take. There is flexibility to choose from multiple styles, sizes and configurations depending on your goal.

Descriptive Text

Utility button

UtilityButton acts as inline page navigation and should always be used in groups of two or more, compared to the Button component which is designed to work as a standalone element and performs the role of a call-to-action (CTA).

Descriptive Text

File upload

File Upload includes components that allow a user to upload one or more files. This component will typically be used when a member needs to submit receipts, images or documents required to validate a claim or utilise online services.

Layout and structure

Layout is the arrangement of elements on a page

Descriptive Text


Accordions are useful for simplifying overwhelming pages or progressively disclosing steps of a process. Be conscious that accordions require user interaction to see information and think about whether the cost of that is worthwhile.

Descriptive Text


A Card component is ideal for encapsulating a discrete piece of content which has a single action. Card provides several elements that allow for multiple variations to suit a variety of contexts.

Descriptive Text


Our Divider component is a styled horizontal rule. It is a 20% opacity black single line to maintain its contrast on a variety of (light) background colours.

Descriptive Text


The Expander is used for hiding and showing information.

Descriptive Text

Expander groupnorth_east

The Expander Group is used for grouping Expander components.

Descriptive Text

Grow layoutnorth_east

Grow Layout automatically resizes a div element vertically to push the footer to the bottom of a screen.

Descriptive Text

Hero panelnorth_east

A Hero Panel features at the top of a page and acts to support the primary purpose of the page, which could be; to invite a user to further explore the content, to prompt a user to perform an action (when including a button) or simply to support the content of a page.

Descriptive Text


Table is a table component that groups content that is similar or related in a grid-like format across rows and columns. They organise information in way that's easy to scan, so that users can look for patterns and insights.

Selection and inputs

Choose or enter information using checkboxes, text fields, and more

Descriptive Text


Checkboxes are used for a list of options when a user can select more than one option. Checkboxes can also be used to turn an option on and off.

Descriptive Text

Checkbox groupnorth_east

A checkbox group can be used when there are multiple checkbox options available. If a single option is needed, consider a checkbox. When a user is restricted to choosing one option from many options available, consider using a radio group.

Descriptive Text

Date pickernorth_east

A simple, accessible and reusable date picker component. The date picker allows users to enter a date by either choosing from the calendar, or typing directly in the textbox.

Descriptive Text

Date textboxnorth_east

The date textbox is a textbox with unique features. The most notable being restricted formatting that caters to the dd/mm/yyyy format for a date. It is also different from a standard textbox in that when selected, it displays the native date picker for a device when one is detected.

Descriptive Text


The form component is a simple styled container for our form controls. Forms should be used to collect simple data from our users. Users should be able to complete forms quickly and without confusion.

Descriptive Text

Form controlnorth_east

A form control is a combination of a form field, a label, a hint and form validation. All form components must be wrapped in a form control.

Descriptive Text


Radio buttons are used for a list of two or more options when a user can only select one option. If there are seven or more options use a dropdown menu instead.

Descriptive Text

Radio groupnorth_east

Radio group is a container for radio inputs and is used where two or more radio inputs are required. A radio group can accomodate two styles of radio inputs — a radio icon or radio button.

Descriptive Text


Autocomplete allows a user to select one option from a large number of mutually exclusive choices. It is suitable for use when the list of available options is larger than 8, as it displays a filtered shortlist of up to 5 matching options when the user begins to type input.

Descriptive Text


A standard select input component, also known as a drop-down list. A select control should be avoided when possible, especially for a small number of options, as they hide choices from the user.

Descriptive Text

Text areanorth_east

Use a textarea when the expected user input is multiple line of text. They are commonly used in forms.

Descriptive Text

Text boxnorth_east

Use a textbox when the expected user input is a single line of text. They are commonly used in forms.


Keep users informed about the progress of a process, offer feedback on actions and tasks, and provide updates on the status

Descriptive Text


Alerts are used to communicate important information to the user.

Descriptive Text

Error templatenorth_east

Error Template defines the layout and styling of an error page, but not the content.

Descriptive Text

Info boxnorth_east

InfoBox is used to contain promotional or supporting information and is displayed either within a form or part of a user flow such as a sales or join funnel.

Descriptive Text


The Loader component provides an animated SVG-based loader that similarly to icons, is light, simple, and clearly recognisable, while being distinctive and complementary to the nib brand.

Descriptive Text

Progress steppernorth_east

A ProgressStepper is designed to orient a user within an interactive experience by breaking down extended tasks into 'steps'.

Descriptive Text


A Tooltip is used to display text as either a label, description or supplementary information. Content contained within a Tooltip should be contextual, useful and nonessential.


Establish hierarchy and communicate importance through text presentation

Descriptive Text


Font face declarations for nib and partners.

Descriptive Text


Our standard heading component. Headings have no margins by default and can be sized independently of the underlying html element.

Access resources and move between sections, pages, or views in a structured and intuitive way

Descriptive Text


The Footer component is our primary page footer. This should be used on all pages except for focused content and sales funnel pages which should use the Small Footer component. When combining this component with the Header component, use the Header Footer Layout component instead.

Descriptive Text


The Header component is our primary page header. It should be used on all pages except for focused content and sales funnel pages which should use the Small Header component. When combining this component with the Footer component, use the Header Footer Layout component instead.

Descriptive Text


The Link component is used to highlight that further content is available. It can also be used to emphasise other important details like emails and phone numbers.

Descriptive Text

Skip linknorth_east

The Skip Link component helps keyboard-only and screen-reader users skip to the main content on a page, this includes skipping over the header and navigation. The Skip Link is visually hidden until a keyboard press focuses and activates it.

Descriptive Text


Tabs make it easy to view and navigate stacked panels of related content. They are especially useful when you need to show a lot of content in a small space.

Images and icons

Represent visual content, such as avatars and thumbnails for images or videos

Descriptive Text


Our icon library presents pixel-perfect, scalable SVG-based icons that are light, simple, and clearly recognisable, while being distinctive and complementary to the nib brand. Our icon library includes system and graphic icon assets.


Display additional contextual elements on top of the main interface for extra information or functionality

Descriptive Text


A modal refers to a content box that is displayed in combination with an overlay on a page.

Descriptive Text


Overlay provides a full-screen, semi-transparent layer to block out the underlying page content, allowing you to direct the user's attention to a specific section of a UI.