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.
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.
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.