Mesh component cheatsheet

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

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).

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.

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.

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.

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.

The Expander is used for hiding and showing information.

The Expander Group is used for grouping Expander components.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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

Alerts are used to communicate important information to the user.

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

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.

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.

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

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.

Font face declarations for nib and partners.

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

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.

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.

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.

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.

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.

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.

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

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.