Content

Components are one of the key building blocks of the design system. Their systematic reuse helps to create visual and functional consistency across products.

Accordion

An accordion collapse and expands sections of related content.

Usage

Notes

Concise, structured information piece used for quick reference.

Usage

Tags

Labels in digital UI that categorise, organise, or add context to elements.

Usage

Modal

Modals let users confirm or view extra content without losing page context.

Usage

Cards

Displays detailed content, grouping info for users to view upon clicking.

Usage

List Item

Use to present simple pieces of information

Usage

Controls

Components are one of the key building blocks of the design system. Their systematic reuse helps to create visual and functional consistency across products.

Buttons

Interactive elements users click or tap to trigger actions

Usage

Checkboxes

Element that allows users to select one or more options from a set.

Usage

Radio Buttons

Allows to select one option out of a predefined list of 6 or fewer options.

Usage

Toggle

Lets users instantly switch between two states.

Usage

Switch Field

Sections off content on pages, helping users access relevant information.

Usage

Range Slider

A range of values along a bar, allowing users to select predefined increments.

Usage

Inputs

Components are one of the key building blocks of the design system. Their systematic reuse helps to create visual and functional consistency across products.

Input

An input field lets the user enter a single line of text.

Usage

Phone Number Input

A phone number input field lets the user enter numbers.

Usage

Date Picker

Lets the user select a date value. You can select a single date or date range.

Usage

Text Area

A text area allows the user to enter a large amount of text.

Usage

Number Scrubber

Number scrubbers are used to change or select number values.

Usage

File Upload

Allows users to upload one or more files at once.

Usage

Navigation

Components are one of the key building blocks of the design system. Their systematic reuse helps to create visual and functional consistency across products.

Pagination

Offer control: Show expectations and exit options.

Usage

Navigation Bar

Lets users navigate different sections of an application or website.

Usage

Footer

At the bottom of a website or an App, it usually has secondary navigation.

Usage

Hyperlink

A text-based link, usually underlined, that is used on its own or inline.

Usage

Tabs

A nav element that lets users access different site areas or page sections.

Usage

Top Bar

A horizontal menu at the top of a page, for quick access to key sections

Usage

Need help? Get in touch.

Should you require any assistance or wish to collaborate with the Design System team, please reach out via e-mail or our teams channel.

Email: elements@nedbank.co.za
Teams: Design system - Queries