Digit is the name of the DigiKey style guide and design system. It is a tool that should be used to help provide a unified look across all of Digi-Key's web presence.
It consists of various components, layouts, and utilities that can be used to create web pages and applications.
The styles that come from Digit should NOT be modified or overridden in a lower style sheet. Doing this breaks the ability to keep a single source of truth for UI elements.
If you receive a design that doesn't match what is in Digit please email dl_Front_End_Developers@digikey.com.
Installation
The global files are provided by Sitecore through the header. If you need access to the files for prototyping or something outside of Digit, you can add the following links. Ensure that the final version doesn't include the Digit files if it will be including them with the header from the Sitecore sandwich service.
Global Files
<link rel="stylesheet" href="/-/digit/global.css" />
<script src="/-/digit/global.js"></script>
Global Files Minified (For use in Production)
<link rel="stylesheet" href="/-/digit/global.min.css" />
<script src="/-/digit/global.min.js"></script>
Web Components
Digit also comes with Web Components that provide functionality without the need for JS calls and can be used inside of any framework. Digit also provides bindings for some popular JS frameworks that make it much easier to work with them.
<!-- This needs to be placed in the <head> section to work properly -->
<script type="module" src="/-/digit/web-components/dk-web-components.esm.js"></script>
Something Missing?
Because Digit is continuously evolving, not everything has been accounted for. If you find that something important is missing or if designs don't match what is on this documentation site, please email dl_Front_End_Developers@digikey.com.