Dell Design System - Project Template 1.3.4

Before you get started: Make sure that you are viewing this prototype using the Chrome browser.

Overview

Purpose: The components in this template can be used to begin a new Webflow project. The published project will consist of an HTML prototype that can be used as reference for interactions and redlines, but should not serve as code reference.

To see the redline data in Chrome, use the customize options in the upper right corner to select More Tools > Developer Tools (CTRL + SHIFT + I). Or use a plugin, such as the Prism Redline Tool.

Elements and Styles: The Component Library folder in the Pages panel (Designer tool) contains most of the styled elements you will need to create your project. Those classes starting with "dds__" are derived from the CSS stylesheet for the Dell Design System, and are automatically updated. All other classes were custom created to resolve conflicts between the stylesheet and Webflow's inherent code.

CSS Stylesheet: Within the project settings, there is also custom code that will enable the CSS stylesheet classes ("dds__") to be seen in the published version of your project. To see these styles within the Designer tool, make sure to include the symbol "CSS-stylesheet" on each page.

If you're copying components from this template into a project that was not created from this template, then you must remember to copy over the HTML Embed symbol "CSS-stylesheet" to each of your pages, and you must copy all of the code from the Settings > Custom Code tab into your project Settings.

How to Update to the Latest Release: If you want to update the CSS references in an existing prototype to the newest release, follow these directions.

Contacts

Your questions and suggestions are always welcome!

Webflow Template
Vasken Sayre

Product Manager
Lisa Silverthorne

Design - Anchor
Josh Baron

Engineer - Anchor
Chris Odom

Pages

Index Page: Feel free to replace all of the content on this index page with the content for your project.

DUPLICATE ME Page: It's typically better to duplicate the DUPLICATE ME page than to create a new one, to ensure that the CSS-stylesheet and other mechanisms are present. Feel free to add your own universal components to the DUPLICATE ME page in your project.

Change Log

  • 03-31-2021   Tables: The filter input for complex tables now uses a filter icon rather than a search icon.
  • 03-31-2021   Icons: Added a receipt icon (dds__receipt) and a pre-seed icon (dds__pre-seed).
  • 03-31-2021   Banners: Rebuilt Mosaic Banners and Sitewide Messaging per 1.4.0 updates.
  • 03-25-2021   Banners: Rebuilt Hero and Link Picker Banners per 1.4.0 updates.
  • 03-25-2021   Updated the stylesheet links to release 1.4.0 in CSS-stylesheet symbol and Settings > Custom Code.
  • 02-01-2021   Icons: Added an icon for Microsoft Teams (dds__brand-ms-teams).
  • 02-01-2021   Icons: Added an icon for 2-in-1 products (dds__2-in-1).
  • 02-01-2021   Updated the stylesheet links to release 1.3.4 in CSS-stylesheet symbol and Settings > Custom Code.
  • 01-22-2021   Navigation: Removed dds__text-truncate class from country ISO code in the masthead so it no longer truncates.
  • 01-22-2021   Off Canvas: Added an example of tabs within an off canvas. These become accordions at SM breakpoint and smaller.
  • 01-21-2021   Dividers & Containers: Removed the Stroked Container - Yellow because it failed AA accessibility.
  • 01-21-2021   Anchored Nav - Vertical: Rebuilt anchored nav - vertical per 1.3.3 updates.
  • 01-21-2021   Navigation - Left Menu Bar: Rebuilt the collapse/expand button in the left menu bar per 1.3.3 updates.
  • 01-12-2021   Links: Added dds__text-truncate to links styled as buttons so their labels truncate when there's insufficient room.
  • 01-12-2021   Updated the stylesheet links to release 1.3.3 in CSS-stylesheet symbol and Settings > Custom Code.
  • 12-10-2020   Navigation: Replaced the flag icons with globe icons in the masthead and footer options for country selection.
  • 11-10-2020   Helper Classes: Replaced the static content with a link to the evergreen content.
  • 11-09-2020   Tables: Added a Condensed Complex Table.
  • 11-09-2020   Selects: Rebuilt Tiered Select list per 1.3.2 updates.
  • 11-09-2020   Updated the stylesheet links to release 1.3.2 in CSS-stylesheet symbol and Settings > Custom Code.
  • 11-04-2020   Buttons: Added examples of disabled toggle buttons (bookmark and favorite).
  • 10-23-2020   Tabs: Added vertical tabs.
  • 10-20-2020   Tabs: Rebuilt all tabs per 1.3.1 updates.
  • 10-20-2020   Anchored Nav - Horizontal: Fixed a bug that was preventing the horizontal anchored nav from disappearing on smaller breakpoints.
  • 10-14-2020   Added the autocomplete=off attribute to all input fields so that autocomplete suggestions don't appear on selection.
  • 10-02-2020   Notifications: Added a red variation for critical alerts. Added gray variations for success and informational alerts.
  • 10-02-2020   Notifications: Added sitewide variations for the red and gray alert variations.
  • 10-02-2020   Notifications: Replaced the green checkmark in success alerts with a task completion icon.
  • 09-18-2020   Buttons: Text labels will now truncate correctly as buttons shrink in width.
  • 09-17-2020   Added a guide to this template for how to update to the latest release.
  • 09-02-2020   Filtering: Fixed alignment issues in the keyword input per 1.3.1 updates.
  • 09-02-2020   Selects: Minor fixes to date select alignment per 1.3.1 updates.
  • 09-02-2020   Removed the standalone Sorting page as this component is always included with a more complex pattern, such as Filtering.
  • 09-02-2020   Updated the stylesheet links to release 1.3.1 in CSS-stylesheet symbol and Settings > Custom Code.
  • 09-02-2020   User Progress Trackers: Removed the Disabled User Progress Tracker as its states are redundant with the Standard User Progress Tracker.
  • 09-01-2020   Tables: Added a modal that's seen when the Choose Action > Export as csv option is selected.
  • 09-01-2020   Dividers & Containers: Replaced the Gray containers (filled and stroked) with Moon containers.
  • 09-01-2020   Added a page listing all of the Helper Classes.
  • 09-01-2020   Icons: Added a desktop icon (dds__device-desktop) and replaced the alarm bell (dds__alarm-bell) with something more current.
  • 09-01-2020   Navigation - Standard: Rebuilt most of the standard masthead per 1.3.0 updates.
  • 08-31-2020   Contact Drawer: Added the Intel MDF option to the bottom of the drawer.
  • 08-31-2020   Checkboxes: Rebuilt the disabled state of checkboxes styled as cards per 1.3.0 updates.
  • 08-31-2020   Links: Rebuilt the disabled state of links styled as cards per 1.3.0 updates.
  • 08-31-2020   Radio Buttons: Rebuilt the disabled state of radio buttons styled as cards per 1.3.0 updates.
  • 08-31-2020   Updated the stylesheet links to release 1.3.0 in CSS-stylesheet symbol and Settings > Custom Code.
  • 08-20-2020   Selects: Added a tiered select.
  • 08-18-2020   Buttons: Added two toggle button variations for marking favorites.
  • 08-04-2020   Radio Buttons: Recreated the interactions for radio buttons styled as cards per 1.2.0 updates.
  • 08-03-2020   Carousels: Rebuilt banner carousel with auto-rotate per 1.2.0 updates. Minor fix to banner carousel with arrows.
  • 08-03-2020   Checkboxes: Rebuilt checkboxes styled as cards per 1.2.0 updates.
  • 08-03-2020   Contact Drawer: On smaller breakpoints, the contact drawer button is now link blue.
  • 08-03-2020   Links: Rebuilt links styled as cards per 1.2.0 updates.
  • 07-31-2020   Anchored Nav: Rebuilt anchored nav per 1.2.0 updates.
  • 07-30-2020   Banners: Rebuilt all banners per 1.2.0 updates.
  • 07-27-2020   Tabs: Fixed a bug in all tabs from release 1.2.0 that caused the tab buttons to appear spread apart.
  • 07-24-2020   Product Stack: Rebuilt MVP product stacks (carousel) per 1.2.0 updates.
  • 07-23-2020   Notifications: Rebuilt all errors and alerts per 1.2.0 updates.
  • 07-21-2020   Icons: Added icons for game controller (dds__game-controller) and desktop gaming (dds__gaming-desktop).
  • 07-21-2020   Icons: Added currency icons (dds__currency-coin-) for euros, generic, indian-rupees, pounds, rupees and yen.
  • 07-21-2020   Updated the stylesheet links to release 1.2.0 in CSS-stylesheet symbol and Settings > Custom Code.
  • 07-21-2020   Contact Drawer: Rebuilt the drawer per 0.2.1 updates and added the Intel marketing option to the bottom of its content.
  • 07-20-2020   Navigation - Left Menu Bar: Added examples of selected state for menu options.
  • 07-15-2020   Selects: Rebuilt date select per 1.1.0 updates.
  • 07-14-2020   Checkboxes: Added a disabled state for checkboxes styled as cards.
  • 07-14-2020   Links: Added a disabled state for links styled as cards.
  • 07-14-2020   Radio Buttons: Added a disabled state for radio buttons styled as cards.
  • 07-14-2020   Radio Buttons: Fixed left padding issue in radio buttons styled as cards per 1.1.0 updates.
  • 07-13-2020   Grid: Added XXL and XXL breakpoints.
  • 07-13-2020   Grid: Revised page content and added examples.
  • 07-13-2020   Updated the stylesheet links to release 1.1.0 in CSS-stylesheet symbol and Settings > Custom Code.
  • 07-02-2020   Selects: Updated symbol color on spinbox buttons, per 1.0.0 updates.
  • 07-02-2020   Tabs: Updated centered tabs, and tabs with overflow controls, per 1.0.0 updates.
  • 07-01-2020   Accordions: Revised padding of secondary accordion labels, per 1.0.0 updates.
  • 07-01-2020   Accordions: Revised padding of Show All / Hide All options labels, per 1.0.0 updates.
  • 07-01-2020   Accordions: Revised padding of Show More / Show Less options (list and paragraph), per 1.0.0 updates.
  • 07-01-2020   Buttons: Revised padding of buttons styled as links, per 1.0.0 updates.
  • 07-01-2020   Carousels: Revised alignment of link titles in filmstrip carousels with supporting content, per 1.0.0 updates.
  • 07-01-2020   Grid: Removed content references to the Bootstrap 4.0 grid as our design system is no longer tied to Bootstrap.
  • 07-01-2020   Notifications: Revised dismissible alerts per 1.0.0 updates.
  • 07-01-2020   Updated the stylesheet links to release 1.0.0 in CSS-stylesheet symbol and Settings > Custom Code.
  • 06-29-2020   Notifications: Rebuilt all errors and alerts to resolve spacing issues, which can't be fully resolved until a future release.
  • 06-24-2020   Navigation - Persistent: Major revision across all breakpoints per stakeholder and peer feedback.
  • 06-18-2020   Selects: Revised date select per testing and peer feedback.
  • 06-18-2020   Navigation - Persistent: Established min/max width values for the component on larger breakpoints.
  • 06-08-2020   Add the Navigation - Left Menu Bar component.
  • 06-08-2020   Selects: Removed the Apply button from the date select calendar overlay.
  • 06-08-2020   Tables: Rebuilt the option row that appears above some tables per 0.3.0 updates.
  • 06-05-2020   Anchored Nav - Vertical: Added a right border per the bottom border in anchored nav - horizontal.
  • 06-04-2020   Vertical Filtering: Revised the smaller breakpoint pattern per the one for horizontal filtering.
  • 06-04-2020   Buttons and Filtering: Rebuilt all dropdown and split buttons per 0.3.0 updates.
  • 06-04-2020   Navigation: Minor revisions to country select menu in footer per 0.3.0 updates.
  • 06-03-2020   Selects: Added a bar select component.
  • 05-28-2020   Pagination and Tables: Minor fix to height of pagination buttons on smaller breakpoints.
  • 05-27-2020   Updated the stylesheet links to release 0.3.0 in CSS-stylesheet symbol and Settings > Custom Code.
  • 05-26-2020   Product Stacks: Previous/Next buttons appear following the product stack carousel in addition to preceding it.
  • 05-26-2020   Filtering: Keyword input no longer appears within the off canvas for vertical filtering on smaller breakpoints.
  • 05-22-2020   Selects: Added a date select component.
  • 05-01-2020   Tooltips: Added tooltips from inline text.
  • 04-24-2020   Anchored Nav - Horizontal: Rebuilt horizontal anchored nav per 0.2.11 updates.
  • 04-23-2020   Filtering: Minor updates to vertical filtering per 0.2.11 updates.
  • 04-22-2020   Banners: Rebuilt all sitewide messaging per 0.2.11 updates.
  • 04-22-2020   Filtering: Rebuilt the keyword filter per 0.2.11 updates.
  • 04-22-2020   Filtering: Rebuilt the filter collection per 0.2.11 updates.
  • 04-22-2020   Filtering: Updated vertical filtering (filter collection buttons, results text and sorting select) per the above 0.2.11 updates.
  • 04-22-2020   Filtering: Rebuilt the filter buttons (tabs version) per 0.2.10 updates.
  • 04-22-2020   Filtering: Removed the non-tabs version of filter buttons as there is no use case for them (users can simply hide the tab panes).
  • 04-22-2020   Sorting: Rebuilt the sorting select per 0.2.11 updates.
  • 04-20-2020   Added a Product Stacks page.
  • 04-16-2020   Sliders: Rebuilt all sliders per 0.2.11 updates.
  • 04-16-2020   Accordions: Rebuilt and rescripted primary accordions per 0.2.11 updates.
  • 04-16-2020   Updated the stylesheet links to release 0.2.11 in CSS-stylesheet symbol and Settings > Custom Code.
  • 04-15-2020   All Pages: Deleted all of the legacy interactions as they are no longer used.
  • 04-06-2020   User Progress Trackers: Minor updates to mouseover states for the Thin variant.
  • 03-27-2020   Sliders: Only the current value is displayed for a single handle slider.
  • 03-26-2020   Navigation: Rebuilt the country selection menu within the masthead per 0.2.10 updates.
  • 03-26-2020   Filtering: Minor padding fixes to vertical filtering per 0.2.10 updates.
  • 03-25-2020   Notifications: Rebuilt all announcements per 0.2.10 updates.
  • 03-24-2020   Radio Buttons: Rebuilt radio buttons styled as cards per 0.2.10 updates.
  • 03-24-2020   Banners: Added an optional 'days' value to the timer within sitewide messaging.
  • 03-23-2020   Lists: Rebuilt unstyled lists per 0.2.10 updates.
  • 03-23-2020   Updated the stylesheet links to release 0.2.10 in CSS-stylesheet symbol and Settings > Custom Code.
  • 03-10-2020   User Progress Trackers: Added a Thin variant for use in the consumer segment.
  • 03-10-2020   Sliders: Replaced all h4 labels with standard size labels for form elements.
  • 03-10-2020   Checkboxes, Links and Radio Buttons: Renamed all components "...Styled as Stroked Containers" to "...Styled as Cards".
  • 03-09-2020   Sliders: Minimum value is shown for single handle sliders.
  • 03-06-2020   Tabs: Rebuilt tabs with overflow controls per 0.2.9 updates.
  • 03-06-2020   Banners and Cards: Moved site-wide messaging from Cards to Banners.
  • 03-06-2020   Notifications and Announcements: Moved announcements to the Notifications page (deleted the Announcements page).
  • 03-05-2020   Carousels: Rebuilt the filmstrip carousels per 0.2.9 updates.
  • 03-05-2020   Tables: Rebuilt the options row above complex tables per 0.2.9 updates.
  • 03-05-2020   Checkboxes: Rebuilt all inline checkboxes per 0.2.9 updates.
  • 03-05-2020   Radio Buttons: Rebuilt all inline radio buttons per 0.2.9 updates.
  • 03-05-2020   Tabs: Fixed a line that was appearing beneath the active tab in 0.2.9 standard tabs.
  • 03-05-2020   Lists: Removed the left margin from unstyled lists.
  • 03-04-2020   Updated the stylesheet links to release 0.2.9 in CSS-stylesheet symbol and Settings > Custom Code.
  • 03-04-2020   Icons: Added dds__wifi-none.
  • 03-03-2020   Cards: Added sitewide messaging.
  • 03-03-2020   Banners: Fixed a wrapping issue for links inside a die cut banner.
  • 02-26-2020   Anchored Nav: Split this page into an "Anchored Nav - Horizontal" and "Anchored Nav - Vertical", and created the latter component.
  • 02-26-2020   Anchored Nav: Both Horizontal and Vertical anchored nav may contain links that navigate to new pages. Added an example of this to each.
  • 02-25-2020   Tooltips and User Progress Trackers: Replaced all legacy interactions with new interactions scheme. All legacy interactions should now be replaced, and all further interactions should be created using the new scheme.
  • 02-25-2020   Links: Tooltips for social links will remain open while the user mouses over them.
  • 02-24-2020   Tabs and Tables: Replaced all legacy interactions with new interactions scheme.
  • 02-21-2020   Added the Announcements page.
  • 02-21-2020   Lists: Added an unstyled list.
  • 02-21-2020   Navigation: Fixed formatting issues in the Account (Sign In) and Cart masthead menus.
  • 02-21-2020   Progress Indicators, Radio Buttons and Sliders: Replaced all legacy interactions with new interactions scheme.
  • 02-20-2020   Navigation, Off Canvas and Popovers: Replaced all legacy interactions with new interactions scheme.
  • 02-17-2020   Inputs, Links and Modals: Replaced all legacy interactions with new interactions scheme.
  • 02-17-2020   Tables: Fixed wrapping issues with the settings/options in the upper right corner of the complex tables.
  • 02-17-2020   Tables: Replaced the search buttons within the table search inputs with static divs because buttons are not needed due to real-time search & filtering.
  • 02-17-2020   Buttons: Added multi-select dropdown buttons.
  • 02-17-2020   Selects: Added single selects with secondary button treatments.
  • 02-17-2020   Filtering: Removed single select and multi-select dropdown filters as the underlying components are covered in Buttons and Selects.
  • 02-14-2020   Filtering: Replaced all legacy interactions with new interactions scheme.
  • 02-14-2020   Filtering and Sorting: Replaced all dropdown sorting buttons with selects. The external label is not shown on SM and XS breakpoints.
  • 02-12-2020   Tables: Added labels to the settings/options for complex tables.
  • 02-12-2020   Checkboxes and Contact Drawer: Replaced all legacy interactions with new interactions scheme.
  • 02-11-2020   Anchored Nav, Banners, Buttons, Cards and Carousels: Replaced all legacy interactions with new interactions scheme.
  • 02-11-2020   Carousels: Fixed bug in "ticklets" beneath banner carousels that was causing the page width to double.
  • 02-10-2020   Accordions and Notifications: Replaced all legacy interactions with new interactions scheme.
  • 02-07-2020   Global Prototype Navigation: Replaced all legacy interactions with new interactions scheme.
  • 02-07-2020   Revised Checkboxes, Links and Radio Buttons that are styled as stroked containers.
  • 02-05-2020   Added the Lists page, which includes unordered list, ordered list and link collector.
  • 02-05-2020   Banners: Rebuilt the mosaic banner per 0.2.8 updates.
  • 02-05-2020   Navigation: Rebuilt the standard footer per 0.2.8 updates.
  • 02-05-2020   All pages: Vertical cards now use an h5 link title instead of an h4.
  • 02-04-2020   All pages: Replaced all icons with class definitions rather than character codes (see Accordions, Buttons, Cards, Filtering, Modals, Navigation, Pagination, Selects, Sliders, Sorting, Tables and User Progress Trackers).
  • 02-04-2020   Cards: Revised the link collector within the multi content card per 0.2.8 updates.
  • 02-04-2020   Navigation: The background tint now covers the entire page height while the masthead mobile menu is open.
  • 02-04-2020   Navigation: Tier 3 and 4 dropdown menus are not initially visible when a masthead dropdown opens.
  • 02-03-2020   Selects: Added horizontal and vertical spin box selects.
  • 02-03-2020   Banners: Rebuilt die cut banner per 0.2.8 updates.
  • 02-03-2020   Icons: Revised all dds__icons to use a space character (" ") with a class defined, rather than a character code.
  • 02-03-2020   Icons: Added dds__brand-skype and dds__globe-location.
  • 01-30-2020   Radio Buttons: Added radio buttons styled as stroked containers.
  • 01-30-2020   Checkboxes: Added checkboxes styled as stroked containers.
  • 01-29-2020   Links: Added links styled as stroked containers.
  • 01-28-2020   Updated the stylesheet links to release 0.2.8 in CSS-stylesheet symbol and Settings > Custom Code.
  • 01-28-2020   Color Swatches: Added "Purchase" swatch (for green purchase buttons).
  • 01-27-2020   Tabs: Rebuilt all tabs to simplify them.
  • 01-24-2020   Tabs: Added justified tabs with overflow controls.
  • 01-23-2020   Tabs: Added standard tabs with overflow controls.
  • 01-21-2020   Navigation: Added a standard footer (For Work context).
  • 01-21-2020   Navigation: Fixed a bug that was causing the masthead menu option to appear before the masthead cart option on smaller breakpoints.
  • 01-21-2020   Notifications: Added solid filled and stroked label badges.
  • 01-17-2020   Buttons: Added a toggle button with an external label.
  • 01-17-2020   Buttons: Added disabled toggle buttons.
  • 01-15-2020   Navigation: Rebuilt masthead search, sign in, cart and menu options per 0.2.7 updates.
  • 01-15-2020   Tables: Updated background color for striped table rows.
  • 01-15-2020   Off Canvas: Rebuilt off canvas standard per 0.2.4 updates.
  • 01-14-2020   Anchored Nav: This component no longer appears on SM breakpoint.
  • 01-14-2020   Modals: The background tint overlay now appears and vanishes with the modal.
  • 01-14-2020   Links: Fixed a positioning error in the tooltips that are triggered by the social links.
  • 01-14-2020   Filtering: Rebuilt off canvas for filtering per 0.2.4 updates.
  • 01-13-2020   Tabs: Rebuilt off canvas for tabs per 0.2.4 updates.
  • 01-13-2020   Navigation: Added the skip nav component.
  • 01-13-2020   Modals: Fixed an interaction that was causing the modal to automatically close after three seconds.
  • 01-13-2020   Updated the stylesheet links to release 0.2.7 in CSS-stylesheet symbol and Settings > Custom Code.
  • 01-09-2020   Banners: Rebuilt the mosaic banner to reconcile design bugs.
  • 01-08-2020   Banners: Die cut banner now uses left-aligned text within a centered div.
  • 12-16-2019   Notifications: Merged labels into badges.
  • 11-18-2019   Cards: Marketing cards are now equal in height when displayed side-by-side.
  • 11-13-2019   Banners: Updated the image dimensions used in a mosaic.
  • 11-12-2019   Tooltips: The tooltip remains visible during mouseover of the tooltip itself so users can select and copy its text.
  • 11-07-2019   Checkboxes and Radio Buttons: Fixed the margins for inline checkboxes and radio buttons.
  • 11-06-2019   Filtering: Added a Filtering - Vertical pattern that demonstrates how the vertical components work in combination across breakpoints.
  • 11-06-2019   Filtering and Sorting: On smaller breakpoints, the sorting button opens a dropdown menu in which the current selection is highlighted, rather than an off canvas.
  • 11-06-2019   Filtering: Fixed the alignment and wrapping of elements within the Filter Collection.
  • 11-06-2019   Filtering: Replaced the < Apply option for closing the off canvas with a < Cancel option for both closing it and cancelling all changes.
  • 11-06-2019   Filtering: Added an Apply button to the off canvas masthead for both closing it and applying all changes.
  • 11-06-2019   Filtering: Removed the "# results:" text from the off canvas masthead because its value would never change while the off canvas is open.
  • 11-05-2019   All pages: Outline buttons and selects have black label text instead of blue.
  • 11-05-2019   All pages: Updated all off canvases per release 0.2.3.
  • 11-05-2019   Filtering and Sorting: The sorting dropdown/select becomes a button on smaller breakpoints that opens an off canvas.
  • 11-05-2019   Filtering: Added a select component variation for Single Select Dropdown Filter.
  • 11-04-2019   Updated the stylesheet links to release 0.2.3 in CSS-stylesheet symbol and Settings > Custom Code.
  • 11-04-2019   Filtering: Added a Filtering - Horizontal pattern that demonstrates how the horizontal components work in combination across breakpoints.
  • 11-04-2019   Sorting: Revised all components per 0.2.2 updates.
  • 10-31-2019   Popovers: The tint overlay no longer automatically appears when switching to a smaller breakpoint.
  • 10-31-2019   Popovers: All popovers now appear at center-screen on smaller breakpoints.
  • 10-31-2019   Pagination and Tables: Pagination buttons now show their chevrons 〈〉on smaller breakpoints.
  • 10-31-2019   Pagination and Tables: Fixed the alignment of Justified Pagination with Filters.
  • 10-31-2019   Navigation: On smaller breakpoints, Search is closed when one of the neighboring masthead options is selected.
  • 10-31-2019   User Progress Tracker: Rebuilt Standard and Disabled User Progress Trackers per 0.2.2 release.
  • 10-30-2019   All Pages: Menus for Dropdown Buttons now shut when an option is selected.
  • 10-30-2019   Inputs: Read-only inputs are no longer completely disabled. Users can highlight and copy the text within them.
  • 10-30-2019   Anchored Nav: This component is not shown on XS breakpoint.
  • 10-30-2019   Anchored Nav: Removed chevrons from SM breakpoint.
  • 10-30-2019   Updated the stylesheet links to release 0.2.2 in CSS-stylesheet symbol and Settings > Custom Code.
  • 10-29-2019   Off Canvas: Added the capability to define an off canvas percentage width.
  • 10-28-2019   User Progress Tracker: Fixed several minor bugs in the dropdown user progress tracker.
  • 10-25-2019   Tables: Added a complex table with stripes.
  • 10-25-2019   Tables: Added a striped table with pagination.
  • 10-24-2019   Tables: Added a striped table with global actions.
  • 10-23-2019   Tables: Added a striped table with sortable columns.
  • 10-23-2019   Tables: Added a striped table with search.
  • 10-23-2019   Tables: Added a striped table with batch actions.
  • 10-22-2019   Inputs: Rebuilt the phone number input per UI Core updates. The placeholder text is different.
  • 10-21-2019   Added an Anchored Nav page.
  • 10-21-2019   Filtering: Added a filter collection to the top of the Accordion Filter.
  • 10-21-2019   Buttons: The trigger for a dropdown button is a button and not a link, whereas the primary trigger (left side) for a split button may be a button or a link styled as a button.
  • 10-16-2019   Added a Pagination page.
  • 10-16-2019   Sliders: Removed dropshadow from all slider handles.
  • 10-16-2019   Sliders: Revised the horizontal double handle slider so it doesn't overlap the minimum value at its left end.
  • 10-15-2019   Tabs: Rebuilt standard tabs per UI Core updates.
  • 10-15-2019   Tabs: Added three variations of centered tabs.
  • 10-15-2019   Navigation: Revised the hover state appearance of all options within the small breakpoints masthead menu.
  • 10-14-2019   Filtering and Sorting: Moved the component from the Filtering page to the Sorting page and rebuilt the dropdown button variations.
  • 10-14-2019   Links and Buttons: Deleted the disabled state for all links, and the Button Styled as a Link, because links should never appear disabled.
  • 10-11-2019   Popovers: Rebuilt all popovers per UI Core updates. They can now contain an image and up to two links.
  • 10-11-2019   Buttons: All disabled buttons now show the correct cursor on mouseover and won't respond to interaction.
  • 10-11-2019   Filtering: Rebuilt the dropdowns used for filtering and sort per UI Core updates.
  • 10-11-2019   Icons: Added five new icons to the end of the dds__icons set.
  • 10-10-2019   Tabs: Rebuilt all tabs per UI Core updates. On smaller breakpoints, they will now become an option (list) that opens an off-canvas.
  • 10-09-2019   Buttons: Rebuilt the dropdown buttons per UI Core updates.
  • 10-09-2019   Buttons: Rebuilt the split buttons per UI Core updates.
  • 10-09-2019   Updated the stylesheet links to release 0.2.1 in CSS-stylesheet symbol and Settings > Custom Code. Note that release 0.2.0 was skipped.
  • 10-08-2019   Tables: Rebuilt all tables using columns and rows because grids were too hard to work with.
  • 10-08-2019   Tables: Added a Complex Table with Expandable Details.
  • 10-04-2019   Filtering: Corrected the width of dropdown select filters across breakpoints.
  • 10-02-2019   Navigation: Completed a fully functional, responsive masthead (For Work taxonomy).
  • 09-30-2019   Filtering: Added a Sorting component.
  • 09-30-2019   Moved the Filter Buttons component from Buttons to Filtering.
  • 09-25-2019   Added a Sliders page.
  • 09-19-2019   Color Swatches: Revised content to clarify how color swatches should be used.
  • 09-16-2019   User Progress Tracker: Removed the Next and Exit options from the Dropdown UPT because they don't exist in the Standard UPT.
  • 09-16-2019   Accordions: Rebuilt the Content Gallery component on a grid so it can have multiple, wrapping rows.
  • 09-16-2019   Accordions: Added functionality and remaining breakpoints to the Filter Collector component.
  • 09-16-2019   Accordions: Added the Accordion Filter component.
  • 09-16-2019   Added a Sorting page.
  • 09-13-2019   Added a Filtering page.
  • 09-13-2019   Accordions: Added the content gallery component.
  • 09-12-2019   Inputs: Added a phone number input.
  • 09-12-2019   Links: Added disabled links.
  • 09-12-2019   User Progress Tracker: Added a Dropdown User Progress Tracker component.
  • 09-11-2019   Carousels: Added a Banner Carousel with Arrows component.
  • 09-11-2019   Carousels: Added a Filmstrip Carousel with Supporting Content component.
  • 09-11-2019   Cards: Added Vertical Cards components.
  • 09-10-2019   Banners: Added a Die Cut Banner component.
  • 09-09-2019   Banners: Fixed bugs related to the card body overlapping mosaic banners.
  • 09-09-2019   Cards: Added Left Aligned and Right Aligned Side-by-Side components.
  • 09-06-2019   Buttons & Selects: Replaced Toggle Select with Toggle Button and corrected the default background color.
  • 09-05-2019   Links: Added a Social Links component.
  • 09-04-2019   Accordions: Added a Show More / Show Less Paragraph component.
  • 09-04-2019   Selects: Added a Toggle Select component.
  • 09-04-2019   Links: Added Links Styled as Buttons.
  • 08-29-2019   Buttons: Fixed mouse hover state on filter buttons constructed from Webflow tabs.
  • 08-28-2019   Cards: Added marketing cards. This pattern is still pending approval from Design Systems.
  • 08-28-2019   Updated the stylesheet links to release 0.1.9 in CSS-stylesheet symbol and Settings > Custom Code.
  • 08-14-2019   Tabs: There are no "complex" tabs but rather standard tabs with (optional) supporting text and/or image.
  • 08-14-2019   Added a DUPLICATE ME page to encourage the creation of new pages via this method rather than Create New Page.
  • 08-13-2019   Buttons: Added a tabs-based variation of filter buttons that's easier to work with in Webflow.
  • 08-09-2019   Accordions: Added Show All / Hide All controls to the accordion with independent panels.
  • 08-08-2019   Tooltips: Revised all tooltips per release 0.1.7 updates.
  • 08-07-2019   Popovers: Revised all popovers per release 0.1.7 updates.
  • 08-07-2019   Selects: Disabled state now uses an actual script rather than an overlay that fakes it.
  • 08-07-2019   Tabs: Minor revisions to all tabs per release 0.1.7 updates.
  • 08-07-2019   Tables: Revised all tables per release 0.1.7 updates.
  • 08-05-2019   Radio Buttons: Revised all radio buttons per release 0.1.7 updates.
  • 08-05-2019   Off Canvas: Revised standard off canvas per release 0.1.7 updates.
  • 08-05-2019   Off Canvas: Removed nested off canvas variation pending further approvals.
  • 08-01-2019   Inputs: Revised disabled and read only inputs per release 0.1.7 updates.
  • 08-01-2019   Icons: Added dds__arrow-tri-solid-stacked, dds__barbell, dds__popout-double-condense, dds__popout-double-condense-vertical, and dds__popout-double-vertical.
  • 08-01-2019   Modals: Improved open/close transitions for standard modal.
  • 08-01-2019   Progress Indicators: Revised loading indicator per release 0.1.7 updates.
  • 07-31-2019   Checkboxes: Revised all checkboxes per release 0.1.7 updates.
  • 07-31-2019   Buttons: Added a link button.
  • 07-30-2019   Buttons: Revised dropdown buttons per release 0.1.7 updates.
  • 07-30-2019   Buttons: Added split buttons.
  • 07-29-2019   Accordions: Fixed padding when Show More is replaced with Show Less.
  • 07-29-2019   Cards: Fixed size and spacing on 4-up cards.
  • 07-29-2019   Cards: Revised Consumer Product Card per release 0.1.7 updates.
  • 07-29-2019   Cards: Revised Kitchen Sink Card per release 0.1.7 updates.
  • 07-29-2019   Carousels: Added a Filmstrip Carousel.
  • 07-26-2019   Updated the stylesheet links to release 0.1.7 in CSS-stylesheet symbol and Settings > Custom Code.
  • 07-25-2019   Accordions: Renamed "Expand from a Link" to "Secondary Accordion".
  • 07-22-2019   Buttons: Added Filter Buttons.
  • 07-18-2019   Modals: Replaced Standard Modal with 0.1.6 release version.
  • 07-18-2019   Progress Indicators: Revised Loading Indicator Modal per 0.1.6 updates.
  • 07-17-2019   Updated the stylesheet links to release 0.1.6 in CSS-stylesheet symbol and Settings > Custom Code.
  • 07-17-2019   Progress Indicators: Added animated Loading Indicator SVG (HTML embed).
  • 07-10-2019   Progress Indicators: Added a Loading Indicator Modal.
  • 07-10-2019   Tabs: Renamed "Centered Tabs" to "Complex Tabs".
  • 07-09-2019   Modals and Off-Canvas: Cannot be dismissed by selecting the background tint.
  • 07-08-2019   Cards: Revised all cards so that body content moves beneath on smaller breakpoints, per UI Core update.
  • 07-08-2019   Cards: Added Kitchen Sink Card.
  • 06-13-2019   Accordions: Fixed a padding issue with the label for secondary accordions.
  • 06-10-2019   Replaced the Show/Hides page with an Accordions page.
  • 06-04-2019   Added a Color Swatches page.
  • 06-03-2019   Notifications: Revised errors and alerts per UI Core updates.
  • 06-03-2019   Removed all organization-wide templates other than this one and the legacy DCX Master Template.
  • 05-30-2019   Added a Tooltips page.
  • 05-24-2019   Added an Off-Canvas page.
  • 05-24-2019   Off-Canvas: Added an example of a standard off-canvas, which is more common than a nested one.
  • 05-22-2019   Added a Modals page.
  • 05-17-2019   Progress Indicators: Redefined and separated Progress Indicators from User Progress Trackers (a new page).
  • 05-15-2019   Navigation: Revised the masthead per UI Core updates (but it's still not complete).
  • 05-13-2019   Progress Indicators: Added Standard Progress Bar with Helper Text and Controls.
  • 05-06-2019   Banners: Added Mosaic.
  • 05-01-2019   Added a Popovers page.
  • 04-30-2019   Cards: Added Value Prop component.
  • 04-30-2019   Notifications: Revised badges per UI Core updates.
  • 04-29-2019   Typography: Added examples for all remaining classes from the CSS stylesheet.
  • 04-25-2019   Radio Buttons: Revised all radio buttons per UI Core updates.
  • 04-25-2019   Checkboxes and Inputs: Revised all checkboxes per UI Core updates.
  • 04-24-2019   CSS Stylesheet: Updated all stylesheet URLs in Custom Code settings and the embedded HTML symbol.
  • 04-24-2019   Typography: Revised all documented breakpoints per UI Core updates.
  • 04-17-2019   Tabs: Revised all tabs to better match UI Core.
  • 04-17-2019   Show/Hides: Revised all show/hides per UI Core updates.
  • 04-16-2019   Checkboxes and Inputs: Revised all checkboxes per UI Core updates.
  • 04-16-2019   Radio Buttons: Revised all radio buttons per UI Core updates.
  • 04-16-2019   Progress Indicators: Added Animated Progress Bar.
  • 04-16-2019   Progress Indicators: Revised all progress indicators per UI Core updates.
  • 04-16-2019   Inputs: Replaced custom classes with dds__ classes.
  • 04-16-2019   Inputs: Revised all checkboxes per UI Core stylesheet update.
  • 04-16-2019   Dividers & Containers: For vertical dividers, applied the classes to divs instead of text components.
  • 04-16-2019   Tables: Applied a flex-column class to the majority of table columns.
  • 04-16-2019   Added a Grid page.
  • 04-15-2019   Notifications: Revised all Labels per UI Core updates.
  • 04-15-2019   Notifications: Revised Headings with Badges per UI Core updates.
  • 04-15-2019   Notifications: Added Success Alerts.
  • 04-15-2019   Notifications: Revised Informational Alerts per UI Core updates.
  • 04-12-2019   Radio Buttons: Revised all radio buttons per UI Core stylesheet update.
  • 04-12-2019   Checkboxes: Revised all checkboxes per UI Core stylesheet update.
  • 04-12-2019   All pages: Revised the URLs for the CSS-stylesheet (a symbol on each page) per UI Core update. Propagated update to Custom Code in Project Settings.
  • 04-11-2019   Checkboxes: Revised Inline Checkboxes per UI Core update.
  • 04-11-2019   Radio Buttons: Revised Inline Radio Buttons per UI Core update.
  • 04-10-2019   Checkboxes: Added Inline Checkboxes plus the "...with Errors" variation.
  • 04-10-2019   Radio Buttons: Inline Radio Buttons can wrap and become a vertical list on XS.
  • 04-09-2019   Carousels: Revised the Carousel with Buttons to better match UI Core.
  • 04-09-2019   Banners: Revised the Link Picker to better match UI Core.
  • 04-09-2019   Notifications: Added labels.
  • 04-09-2019   Notifications: Added badges.
  • 04-08-2019   Added Progress Indicators.
  • 04-05-2019   Radio Buttons: Added error variations.
  • 04-04-2019   Notifications: Added informational alerts.
  • 04-04-2019   Contact Drawer: Removed underline on mouse-over of close "X" button.
  • 04-04-2019   Added Radio Buttons.
  • 04-04-2019   Fixed alignment of boxes in all checkboxes.
  • 04-03-2019   Applied Bootstap 4 grid to Checkboxes, Contact Drawer, Dividers & Containers, Icons, Inputs, Links, Notifications, Selects, Show/Hides, Tabs, Tables and Typography. Revised components as necessary.
  • 04-02-2019   Applied Bootstap 4 grid to Banners, Breadcrumb, Buttons, Cards and Carousels. Revised components as necessary.
  • 04-01-2019   Icons: Added the prefix "dds__" to all labels for the dds__icons set.
  • 04-01-2019   Added Notifications (Errors only, with more to come).
  • 03-29-2019   Buttons: Added dropdown buttons.
  • 03-29-2019   Added Contact Drawer.
  • 03-28-2019   Carousels: Revised slider controls for Banner Carousel Auto-Rotate to better match UI Core.
  • 03-28-2019   Dividers & Containers: Revised all dividers and containers to better match UI Core.
  • 03-28-2019   Inputs: Replaced improvised method for simulating disabled inputs with custom code that actually disables them.
  • 03-28-2019   Checkboxes: Replaced improvised method for simulating disabled checkboxes with custom code that actually disables them.
  • 03-28-2019   Show/Hides: Revised all show/hides to better match UI Core.
  • 03-28-2019   Cards: Revised all cards to better match UI Core.
  • 03-27-2019   Added Carousels.
  • 03-27-2019   Updated all specification links from the design system Webflow to delldesignsystem.com.
  • 03-26-2019   Banners: Revised all banners so they are fluid to the browser edges.
  • 03-25-2019   Cards: Added more cards and revised the rest to better match UI Core.
  • 03-25-2019   Banners: Revised all banners to better match UI Core.
  • 03-21-2019   Added Selects.
  • 03-21-2019   Added error states to Checkboxes.
  • 03-21-2019   Added error states to all Inputs.
  • 03-20-2019   Added Show/Hides.
  • 03-16-2019   Added Tabs.
  • 03-15-2019   Banners: Event Title and legal statement are optional and cannot appear on the same banner.
  • 03-14-2019   Added Banners.
  • 03-14-2019   Buttons: Revised all disabled buttons per UI core updates.
  • 03-14-2019   Added Cards.
  • 03-13-2019   Added all remaining legacy Icons.
  • 03-11-2019   Added Dividers & Containers.
  • 03-11-2019   Added Tables.
  • 03-06-2019   Icons: Added Icons from font dds-icons.
  • 03-06-2019   Replaced the single Component Library page with an All Components category page + separate component detail pages.
  • 03-04-2019   All pages: Replaced the in-page navigation pattern.
  • 03-01-2019   Added Buttons.
  • 02-28-2019   Updated the stylesheet links to release 0.1.1 in CSS-stylesheet symbol and Settings > Custom Code.
  • 02-28-2019   Created this template.