Here is a collection of all the components and pieces from the guide to allow for quick testing of both vanilla and web component versions as well as color schemes.
Stock Status
Stock Status New Products The tag In Stock Regularly Stocking Primary Secondary Alternate Disabled 
Do the thing. 
Colors
Dark Mode Variation
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading 1Heading 3
Heading With Underline
This is Regular Body Copy.Excepteur sint occaecat cupidatat non proident.
This is Large Body Copy. The dk-text--large classname increases the font size and line height.
Marketplace Product
Link TextThis is a blockquote
Breadcrumbs
Applied Filters
Breadcrumbs
Buttons
Vanilla
PrimarySecondaryAlternateDisabledPrimarySecondary
Web Component
Other Buttons (Old Ways)
Button made with only .dk-btn classname
Span dk-btnSpan dk-btn primarySpan dk-btn disabledSpan dk-btn primary disabledCard
Card using Tailwind to add padding and margin (p-2 adds 16px padding to all sides, my-2 adds 16px margin to top and bottom).
Interactive card showing hover effects.
Carousel
Vanilla
Web Component
Collapse
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This section will collapse when the buttons are pressed
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Date Picker
Dropdown
Select Something
Form Elements
Input
This is an example of some instructional textUser Name or Password is incorrect
Logo
Messaging
Modal
Nav
Pagination
Tables
<div class="dk-card">
<table class="dk-table">
<caption>List of users</caption>
<thead class="dk-table__headings--solid">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
</tbody>
</table>
</div><div class="dk-card">
<table class="dk-table">
<caption>List of users</caption>
<thead class="dk-table__headings--solid-blue">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
</tbody>
</table>
</div><div class="dk-card">
<table class="dk-table">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th
scope="col"
class="dk-table__head--sort">
First
</th>
<th
scope="col"
class="dk-table__head--asc">
Last
</th>
<th
scope="col"
class="dk-table__head--desc">
Handle
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div><div class="dk-card">
<table class="dk-table dk-table--sm">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
</tbody>
</table>
</div><div class="dk-card">
<table class="dk-table dk-table--lg ">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
</tbody>
</table>
</div><div class="dk-card">
<table class="dk-table dk-table--border">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
</tbody>
</table>
</div><div class="dk-card">
<table class="dk-table dk-table--border-grid">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
</tbody>
</table>
</div><div class="dk-card">
<table class="dk-table dk-table--striped">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
</tbody>
</table>
</div><div class="dk-card">
<div class="dk-table">
<div class="dk-table__headings">
<div class="dk-table__head">
#
</div>
<div class="dk-table__head ">
First
</div>
<div class="dk-table__head">
Last
</div>
<div class="dk-table__head">
Handle
</div>
</div>
<div class="dk-table__body">
<div class="dk-table__row">
<div class="dk-table__head">
1
</div>
<div class="dk-table__cell">
Mark
</div>
<div class="dk-table__cell">
Otto
</div>
<div class="dk-table__cell">
@mdo
</div>
</div>
<div class="dk-table__row">
<div class="dk-table__head">
2
</div>
<div class="dk-table__cell">
Jacob
</div>
<div class="dk-table__cell">
Thornton
</div>
<div class="dk-table__cell">
@fat
</div>
</div>
<div class="dk-table__row">
<div class="dk-table__head">
3
</div>
<div class="dk-table__cell">
Larry
</div>
<div class="dk-table__cell">
the Bird
</div>
<div class="dk-table__cell">
@twitter
</div>
</div>
</div>
</div>
</div>Tabs
Tour
New Feature!!!
Words go here :)
Tour Modal
Step 1 Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mattis lacinia fringilla. Duis et nulla sit amet orci lacinia fermentum vitae vitae turpis. Sed mattis egestas venenatis. Integer sit amet enim sit amet metus aliquet egestas ac in elit. Integer.
Step 2 Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mattis lacinia fringilla. Duis et nulla sit amet orci lacinia fermentum vitae vitae turpis. Sed mattis egestas venenatis. Integer sit amet enim sit amet metus aliquet egestas ac in elit. Integer.
We have the doomStep 3 Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mattis lacinia fringilla. Duis et nulla sit amet orci lacinia fermentum vitae vitae turpis. Sed mattis egestas venenatis. Integer sit amet enim sit amet metus aliquet egestas ac in elit. Integer.
Step 4 Headline - No Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mattis lacinia fringilla. Duis et nulla sit amet orci lacinia fermentum vitae vitae turpis. Sed mattis egestas venenatis. Integer sit amet enim sit amet metus aliquet egestas ac in elit. Integer.
Forms
Grid
Column 1
Column 2
CSS Loading Animations
Everything
Following javascript id required to make some of the above components function properly and can be ignored for testing purposes.
Javascript
dk => {
//dk.carousel({ slidesPerView: 1, initialSlide: 3 })
dk.carousel(".vanillacarousel", {
slidesPerView: 1,
initialSlide: 3
}); //const secondCarousel = document.querySelector(`dk-carousel[title="Multiple Cards"]`);
//secondCarousel.setOptions({
// slidesPerView: 1,
// initialSlide: 3,
// breakpoints: {
// 800: {
// slidesPerView: 3
// }
// }
//});
//const thirdCarousel = document.querySelector(`dk-carousel[title="More Multiple Cards"]`);
//thirdCarousel.setOptions({
// slidesPerView: 1,
// initialSlide: 3,
// breakpoints: {
// 800: {
// slidesPerView: 3
// }
// }
//});
//() => {
// const carousel = document.querySelector(`dk-carousel[title="Multiple Products"]`);
// carousel.setOptions = {
// slidesPerView: 1,
// initialSlide: 3};
//}
const secondCarousel = document.querySelector(`dk-carousel[title="Multiple Cards"]`);
secondCarousel.setOptions({
slidesPerView: 1,
breakpoints: {
800: {
slidesPerView: 3
}
}
});
dk.accordion("#example-container");
dk.dropdowns();
dk.nav();
dk.tabbedMenu();
dk.tabbedSidebar();
var tag = document.createElement("span");
tag.classList.add("dark-mode-button");
var text = document.createTextNode("Dark Mode");
tag.appendChild(text);
var element = document.getElementById("all-the-things!");
element.appendChild(tag);
var darkModeButton = document.getElementsByClassName("dark-mode-button")[0];
darkModeButton.addEventListener("click", function () {
document.querySelector("body").classList.toggle("dkdk");
});
}