Components

Accordions

Accordions enable users to open and close sections of page content.

Accordions

Banners

Banners are typically placed at the top of the page to convey an important marketing message or drive users to a primary task.

Banners

Breadcrumbs

A breadcrumb is a clickable hierarchical site structure to indicate a user’s location within the site.

Breadcrumbs

Buttons

Buttons should serve as the highest-priority calls-to-action on a page.

Buttons

Cards

Cards are used to entice users to navigate from one area of the site to another. The goal is to quickly get users to relevant content that is of interest to them.

Cards

Carousels

A carousel enables a user to cycle through a queue of related images, cards or other items.

Carousels

Checkboxes

A form element that indicates selected values using a check mark. Used to capture selections from predefined values.

Checkboxes

Contact Drawer

A persistent element that enables customers to contact Dell customer service by a desired means, or to otherwise gain immediate assistance.

Contact Drawer

Dividers & Containers

Dividers indicate changes in subject matter within the same page. Containers bring emphasis to important content.

Dividers & Containers

Filtering

The application of attributes to find matching items from a data set.

Filtering

Inputs

A user input element that allows for the exchange of information between the user and a form owner.

Inputs

Links

Used to navigate to a new URL or view, or simply refresh the page.

Links

Modals

A window that's overlaid on the page, suspending previous interactivity until the modal is interacted with.

Modals

Navigation

The global system that a visitor can use to move around a website.

Navigation

Notifications

Notifications provide important, contextual information that may or may not not require the user to take action.

Notifications

Off Canvas

Used to present secondary content or navigation that sits just outside screen until triggered by the user.

Off Canvas

Pagination

Pagination is used to display information from large data sets in smaller, more consumable chunks.

Pagination

Popovers

Popovers display brief, contextual content until they are dismissed through interaction.

Popovers

Progress Indicators

Provides continuous feedback regarding the progress of an operation.

Progress Indicators

Radio Buttons

Radio buttons are used for selection of only one option from a group of values.

Radio Buttons

Selects

Form elements that are used to select one or more values from predefined data sets.

Selects

Sliders

Sliders enable the selection of a single value, or a range of values, by manipulating handles along a linear scale.

Sliders

Sorting

Used to arrange search or filtering results in a relevant order such as lowest price, highest price, highest rated, most rated, and relevance.

Sorting

Tables

Data Tables help communicate relationships between content.

Tables

Tabs

Tabs are a component that subdivides page content into panes, which are displayed individually based upon which tab is active.

Tabs

Tooltips

Tooltips display short, helpful information when the user hovers or taps a trigger element.

Tooltips

User Progress Trackers

Displays the user's current location within a linear task flow.

User Progress Trackers