Quick Start Guide

Here is a listing of the most commonly used classes and components to get you started using Digit. These are the simplest versions of each and for more information and to see all the options visit each individual component's page.

IDs and Classnames

Unique IDs are required for components to work correctly so when coping and pasting components from the guide into your projects make sure to adjust them to have unique IDs and proper classnames where necessary.

Links

To format a link add the classname dk-link an element. Links will appear like this: Link Text

<a href="" class="dk-link">Link Text</a>

Buttons

Buttons have 3 standard styles to choose from using the classnames dk-btn__primary, dk-btn__secondary and dk-btn__alternate.

Adding these classnames to an element make buttons appear like this: Primary Secondary Alternate

<button class="dk-btn__primary">Button</button>
<a href="#" class="dk-btn__secondary">Link</a>
<span class="dk-btn__alternate">Span</span>

Icons

Most icons for the site come from a custom font. There are almost 200 icons to choose from in the DigiKey icon font. To display an icon either use the entitiy html or specific classname for the icon.

Examples: View all the icons.

<span class="icon-file-pdf"></span>
<span>&#xeadf</span>

Cards

Add the classname dk-card to any wrapper element to add the card styles of background-color, border, border-radius and box-shadow. Cards by default do not have any padding or margin and will need that added as needed.

<div class="dk-card">
  Default card with no padding or margin.
</div>

Messaging

These messages are intended to display at the top of a page or section. Each variation's color and icon is declared by the parent classname: dk-message--neutral is blue with an alarm bell, dk-message--attention is yellow with an exclamation mark, dk-message--success is green with a checkmark, and dk-message--failure is red with an X.

The standard messaging component contains the following sections: icon, header, details and close button. Close button is optional and close functionality is not included.

<div class="dk-message--neutral"> <!-- This classname designates which color and icon appear on the message -->
    <div class="dk-message__icon"></div>
    <div class="dk-message__content">
        <span class="dk-message__header">
            Message Headline Text
        </span>
        <span class="dk-message__details">
            Message Detail Text
        </span>
    </div>
    <div class="dk-message__btn">
        <button class="icon-close"></button>
    </div>
</div>

Modals

Modals are triggered popups that overlay on top of the page content. Clicking the button below will show a standard Digit modal.

The modal has a specific template to follow to display correctly and requires a unique ID to be used in toggling display. To stop the modal from closing when a user clicks on the site mask add the attribute data-modal-type="alert" to the <aside> tag. Note all elements with the data-modal-dismiss attribute will still close the mask and modal.

Content not limited to a single <p>.

<aside
    className="dk-modal"
    id="modal"
    role="dialog"
    aria-modal="true"
    aria-hidden="true"
    aria-label="Modal Title">
    <header className="dk-modal__title">
        Modal Title
    </header>
    <section className="dk-modal__content">
        <p>
            Content Text
        </p>
    </section>
    <footer className="dk-modal__footer">
        <button
            className="dk-btn__primary"
            data-modal-dismiss="true">
            Button Text
        </button>
    </footer>
    <span
        title="Close Message"
        className="dk-modal__close"
        data-modal-dismiss="true"></span>
</aside>

Modals can be triggered by clicking on an element that has the attribute data-modal-target=#modalID on it matching the modal ID.

Alternate method to trigger a modal to show, hide, or toggle display use the following javascript functions.

dk.modal("#modalSelector").toggle();
dk.modal("#modalSelector").show();
dk.modal("#modalSelector").hide();

Tables

The style guide tables are meant to be used as the building blocks for building your tables. These tables don't have any mobile functionality by default it is up to the individual use case to dictate the best approach for making the table work on mobile. There are different style modifier classes that you can add to your table to style it the way you need to.

The basic table is styled starting with the classname dk-table. This is required for all following table variations. Add a classname below to further style the table:

• dk-table__headings--solid This is added to the <thead> element.
• dk-table__headings--solid-blue This is added to the <thead> element.
• dk-table__head--sort, dk-table__head-asc, dk-table__head-desc These are added to <th> element showing a column is sortable or already sorted. Sorting functionality is not included.
• dk-table__sm This is added to the <table> element. Condenses the table spacing of cells and rows.
• dk-table__lg This is added to the <table> element. Adds extra spacing to the cells and rows.
• dk-table-border This is added to the <table> element. Adds a border around the table.
• dk-table-border-grid This is added to the <table> element. Adds border to table cells.
• dk-table--striped This is added to the <table> element. Adds alternate striping of white and gray table rows.

Multiple classname options can be used at the same time. Example dk-table dk-table--sm dk-table--striped: