DK Loading Indicator

Adding the classname `dk-loading` to the body tag of a page will add an animated red bar below the header to indicate loading progress. This is just an animated background color set that will continue to loop until the classname is removed. Toggle dk-loading classname. or Toggle dk-loading-circle classname. Not 100% ready for production use, added for example only.

New dk-layout Classnames

These new layouts use a clearer classname structure indicating their amout of columns and column sizes. Each layout is resposive and two column layouts will stack on smaller screens. Spacing to the left and right of the layouts is 36px at largest size, 24px for tablet sizes and 16px for phone sizes.Gray backgrounds are added to this page for visual reference only and will not appear when used within DigiKey web projects.

Each dk-layout div also contains 24px of padding on the top and bottom. If stacked layouts with less spacing between is required overrides can be added using the classnames pb-0 to the first layout and pt-0 to the second one.

Multi-Column dk-layout Classnames

The two column layouts have 5 options that can be set via classname and are represented by the percentage values of each column in order. Available are 7525, 2575, 6633, 3366, 5050. The number gets added to the twocolumn--#### div classname. For example below would be a 75% left column and 25% right column. All two column layouts have a 32px gap between columns and have responsive styles to stack columns on smaller screens.

<div class="dk-layout dk-layout__twocolumn">
    <div class="twocolumn--7525">
        <div class="dk-layout--leftcolumn">
          left column content goes here
        </div>
        <div class="dk-layout--rightcolumn">
          right column content goes here
        </div>
    </div>
</div>

Grids in dk-layouts

For more complex layouts a dk-grid can be added to further the options available.

Full Bleed in dk-layouts

The full bleed background is still available to pair with the new layout options using light or dark options.

Old Layout Classnames

Below are examples of the two older used layout classnames of layout-onecolumn and layout-twocolumn. Note the layouts are slightly wider due to a smaller left and right margin. The layouts above should be able to replace any current usage of this older layout template.