Components
Anchored Nav

Anchored nav provides a persistent set of links for navigating to sections within the page.
Anchored NavBanners

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

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

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

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

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

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

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

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

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

The global system by which a user moves between website pages, and to locations within pages.
NavigationNotifications

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

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

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

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

A vertical stack of individual elements that provides details about a product or offering based on its location within the purchase path.
Product StackProgress Indicators

Provides continuous feedback regarding the progress of an operation.
Progress IndicatorsRadio Buttons

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

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

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

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

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