Looking for the most up-to-date tariff communications from DigiKey? Sign up here.

assdfd

The dk-layout classname will add the minimum required css for a single column 1440px wide layout. This classname is also required for all the following layout variations.

The dk-layout__fullpage classname will override the base layout width and make it extend to 100% the page width instead of stopping at 1440px.

The dk-layout__thinpage classname will override the base layout max-width to be 900px wide.

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.

dk-layout__1024-wrap this class makes the layout wrap early at 1024px page width to help with data dense pages.

twocolumn--7525

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae justo eget magna fermentum iaculis.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae justo eget magna fermentum iaculis.

Grids in dk-layouts

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

1/12 Column

8/12 Column

3/12 Column

twocolumn--7525

1/6 Column

3/6 Column

2/6 Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae justo eget magna fermentum iaculis.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae justo eget magna fermentum iaculis.