Components

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

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

Grid

The grid system uses a series of containers, rows and columns to layout and align content. It’s built with flexbox and is fully responsive.

Grid

Inputs

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

Inputs

Notifications

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

Notifications

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

Show/Hide

Show / hides enable opening and closing sections of content on a page.

Show/Hide

Tables

Data Tables help communicate relationships between content.

Tables

Tabs

Tabs are a way to group like items within a navigational context and often span the entire width of a content area.

Tabs

Typography

Typography is used to create a clear page flow and develop page hierarchy.

Typography

User Progress Trackers

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

User Progress Trackers