⚠️ DEPRECATION WARNING – Use waffles.datacamp.com instead!
Codename: Cluster

Teach

These are components specifically for the teach-app. Items that would be shared with main-app get moved to Core Components.

Initial Setup

npm install @datacamp/styleguide

    Import the file dc-teach.scss from node_modules and remove imports for local files covered within the style guide.

    Updates

    npm update @datacamp/styleguide

    Releases will include instructions for necessary updates. For the time being updates should be implemented by the front-end team.

    Action Card

    Standard

    <div class="dc-action-card mb-xs">
        	<div class="dc-action-card__header">
        		<h6 class="dc-action-card__title">
        			<span class="dc-action-card__icon dc-icon dc-icon--size-12 mr-xs">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
        				</svg>
        			</span>
        			<span>Assignment</span>
        			<span class="dc-icon dc-icon--primary dc-icon--white-shadowed dc-icon--size-12 ml-xs">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#info_2" />
        				</svg>
        			</span>
        		</h6>
        		<div class="dc-action-card__controls">
        			<!-- controls for textarea go here. -->
        			Placeholder: Controls Go Here
        		</div>
        	</div>
        	<div class="dc-action-card__content">
        		<textarea class="dc-action-card__content__text" name="text" rows="3" placeholder="Start typing here…"></textarea>
        		<div class="dc-action-card__info">
        			<span class="mr-sm">0:0</span>
        			<span class="mr-sm">0 lines</span>
        			<span>0 chars</span>
        		</div>
        	</div>
        </div>

    Focused

    Add the .is-focused to .dc-action-card class for this style.

    <div class="dc-action-card mb-xs is-focused">
        	<div class="dc-action-card__header">
        		<h6 class="dc-action-card__title">
        			<span class="dc-action-card__icon dc-icon dc-icon--size-12 mr-xs">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
        				</svg>
        			</span>
        			Assignment
        			<span class="dc-icon dc-icon--primary dc-icon--white-shadowed dc-icon--size-12 ml-xs">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#info_2" />
        				</svg>
        			</span>
        		</h6>
        		<div class="dc-action-card__controls">
        			<!-- controls for textarea go here. -->
        			Placeholder: Controls Go Here
        		</div>
        	</div>
        	<div class="dc-action-card__content">
        		<textarea class="dc-action-card__content__text" name="text" rows="3" placeholder="Start typing here…"></textarea>
        		<div class="dc-action-card__info">
        			<span class="mr-sm">0:0</span>
        			<span class="mr-sm">0 lines</span>
        			<span>0 chars</span>
        		</div>
        	</div>
        </div>

    Code

    <div class="dc-action-card mb-xs">
        	<div class="dc-action-card__header">
        		<h6 class="dc-action-card__title">
        			<span class="dc-action-card__icon dc-icon dc-icon--size-12 mr-xs">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
        				</svg>
        			</span>
        			Sample Code
        			<span class="dc-icon dc-icon--primary dc-icon--white-shadowed dc-icon--size-12 ml-xs">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#info_2" />
        				</svg>
        			</span>
        		</h6>
        	</div>
        	<div class="dc-action-card__content">
        		<!-- Embedded Code Editor -->
        		Embedded Code Editor Here
        	</div>
        </div>

    Add Exercise

    Add Exercise

    <div class="dct-panel is-active">
        	<header class="dct-panel__header">
        		<h6 class="dct-panel__header-title">
        			<span class="dc-icon dc-icon--grey-oslo dc-icon--size-12 u-spacing-r1">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        				</svg>
        			</span>
        			<span>Add Exercise</span>
        			<span class="dc-icon dc-icon--primary dc-icon--size-12 u-spacing-l1">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#info" />
        				</svg>
        			</span>
        		</h6>
        		<button class="dc-btn dc-btn--link">
        			<span class="dc-icon dc-icon--primary dc-icon--size-12 u-spacing-r1">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#close" />
        				</svg>
        			</span>
        		</button>
        	</header>
        	<div class="dct-panel__content">
        		<article class="dc-action-card dc-add-exercise-card">
        
        			<header class="dc-action-card__header dc-action-card__header--secondary">
        				<h6 class="dc-action-card__title">
        					<span class="dc-icon dc-icon--grey-oslo dc-icon--size-18 u-spacing-r1">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        						</svg>
        					</span>
        					Normal
        				</h6>
        				<div class="dc-action-card__controls">
        					<span class="dc-action-card__tag dc-category__tag dc-category__tag--popular">
        						Popular
        					</span>
        					<span class="dc-add-exercise-card__icon dc-icon dc-icon--white dc-icon--size-18">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        						</svg>
        					</span>
        				</div>
        			</header>
        
        			<div class="dc-action-card__content">
        				<p>
        					Dolore et ut in enim voluptate proident laborum in ea officia consequat consequat eiusmod. Elit non est tempor incididunt
        					Lorem occaecat cillum ullamco laboris eu. Dolore qui irure ea reprehenderit officia tempor ex. Aliqua eiusmod commodo
        					tempor eu ea sint consectetur.
        				</p>
        			</div>
        		</article>
        
        		<article class="dc-action-card dc-add-exercise-card">
        			<header class="dc-action-card__header  dc-action-card__header--secondary">
        				<h6 class="dc-action-card__title">
        					<span class="dc-icon dc-icon--grey-oslo dc-icon--size-18 u-spacing-r1">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#multiple-choice" />
        						</svg>
        					</span>
        					Multiple Choice
        				</h6>
        				<div class="dc-action-card__controls">
        					<span class="dc-add-exercise-card__icon dc-icon dc-icon--white dc-icon--size-18">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        						</svg>
        					</span>
        				</div>
        			</header>
        			<div class="dc-action-card__content">
        				<p>
        					Dolore et ut in enim voluptate proident laborum in ea officia consequat consequat eiusmod. Elit non est tempor incididunt
        					Lorem occaecat cillum ullamco laboris eu. Dolore qui irure ea reprehenderit officia tempor ex. Aliqua eiusmod commodo
        					tempor eu ea sint consectetur.
        				</p>
        			</div>
        		</article>
        
        		<article class="dc-action-card dc-add-exercise-card">
        			<header class="dc-action-card__header  dc-action-card__header--secondary">
        				<h6 class="dc-action-card__title">
        					<span class="dc-icon dc-icon--grey-oslo dc-icon--size-18 u-spacing-r1">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#video" />
        						</svg>
        					</span>
        					Video
        				</h6>
        				<div class="dc-action-card__controls">
        					<span class="dc-action-card__tag dc-category__tag dc-category__tag--secondary">
        						New
        					</span>
        					<span class="dc-add-exercise-card__icon dc-icon dc-icon--white dc-icon--size-18">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        						</svg>
        					</span>
        				</div>
        			</header>
        			<div class="dc-action-card__content">
        				<p>
        					Dolore et ut in enim voluptate proident laborum in ea officia consequat consequat eiusmod. Elit non est tempor incididunt
        					Lorem occaecat cillum ullamco laboris eu. Dolore qui irure ea reprehenderit officia tempor ex. Aliqua eiusmod commodo
        					tempor eu ea sint consectetur.
        				</p>
        			</div>
        		</article>
        
        		<article class="dc-action-card dc-add-exercise-card">
        			<header class="dc-action-card__header  dc-action-card__header--secondary">
        				<h6 class="dc-action-card__title">
        					<span class="dc-icon dc-icon--grey-oslo dc-icon--size-18 u-spacing-r1">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#video-slides" />
        						</svg>
        					</span>
        					Video &#43; Slides
        				</h6>
        				<div class="dc-action-card__controls">
        					<span class="dc-add-exercise-card__icon dc-icon dc-icon--white dc-icon--size-18">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        						</svg>
        					</span>
        				</div>
        			</header>
        			<div class="dc-action-card__content">
        				<p>
        					Dolore et ut in enim voluptate proident laborum in ea officia consequat consequat eiusmod. Elit non est tempor incididunt
        					Lorem occaecat cillum ullamco laboris eu. Dolore qui irure ea reprehenderit officia tempor ex. Aliqua eiusmod commodo
        					tempor eu ea sint consectetur.
        				</p>
        			</div>
        		</article>
        
        		<article class="dc-action-card dc-add-exercise-card">
        			<header class="dc-action-card__header  dc-action-card__header--secondary">
        				<h6 class="dc-action-card__title">
        					<span class="dc-icon dc-icon--grey-oslo dc-icon--size-18 u-spacing-r1">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#audio" />
        						</svg>
        					</span>
        					Audio &#43; Slides
        				</h6>
        				<div class="dc-action-card__controls">
        					<span class="dc-add-exercise-card__icon dc-icon dc-icon--white dc-icon--size-18">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        						</svg>
        					</span>
        				</div>
        			</header>
        			<div class="dc-action-card__content">
        				<p>
        					Dolore et ut in enim voluptate proident laborum in ea officia consequat consequat eiusmod. Elit non est tempor incididunt
        					Lorem occaecat cillum ullamco laboris eu. Dolore qui irure ea reprehenderit officia tempor ex. Aliqua eiusmod commodo
        					tempor eu ea sint consectetur.
        				</p>
        			</div>
        		</article>
        
        		<article class="dc-action-card dc-add-exercise-card">
        			<header class="dc-action-card__header  dc-action-card__header--secondary">
        				<h6 class="dc-action-card__title">
        					<span class="dc-icon dc-icon--grey-oslo dc-icon--size-18 u-spacing-r1">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bullet" />
        						</svg>
        					</span>
        					Bullet
        				</h6>
        				<div class="dc-action-card__controls">
        					<span class="dc-add-exercise-card__icon dc-icon dc-icon--white dc-icon--size-18">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        						</svg>
        					</span>
        				</div>
        			</header>
        			<div class="dc-action-card__content">
        				<p>
        					Dolore et ut in enim voluptate proident laborum in ea officia consequat consequat eiusmod. Elit non est tempor incididunt
        					Lorem occaecat cillum ullamco laboris eu. Dolore qui irure ea reprehenderit officia tempor ex. Aliqua eiusmod commodo
        					tempor eu ea sint consectetur.
        				</p>
        			</div>
        		</article>
        
        		<article class="dc-action-card dc-add-exercise-card">
        			<header class="dc-action-card__header  dc-action-card__header--secondary">
        				<h6 class="dc-action-card__title">
        					<span class="dc-icon dc-icon--grey-oslo dc-icon--size-18 u-spacing-r1">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#tab" />
        						</svg>
        					</span>
        					Tabs
        				</h6>
        				<div class="dc-action-card__controls">
        					<span class="dc-add-exercise-card__icon dc-icon dc-icon--white dc-icon--size-18">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        						</svg>
        					</span>
        				</div>
        			</header>
        			<div class="dc-action-card__content">
        				<p>
        					Dolore et ut in enim voluptate proident laborum in ea officia consequat consequat eiusmod. Elit non est tempor incididunt
        					Lorem occaecat cillum ullamco laboris eu. Dolore qui irure ea reprehenderit officia tempor ex. Aliqua eiusmod commodo
        					tempor eu ea sint consectetur.
        				</p>
        			</div>
        		</article>
        
        		<article class="dc-action-card dc-add-exercise-card">
        			<header class="dc-action-card__header  dc-action-card__header--secondary">
        				<h6 class="dc-action-card__title">
        					<span class="dc-icon dc-icon--grey-oslo dc-icon--size-18 u-spacing-r1">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        						</svg>
        					</span>
        					Markdown
        				</h6>
        				<div class="dc-action-card__controls">
        					<span class="dc-add-exercise-card__icon dc-icon dc-icon--white dc-icon--size-18">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        						</svg>
        					</span>
        				</div>
        			</header>
        			<div class="dc-action-card__content">
        				<p>
        					Dolore et ut in enim voluptate proident laborum in ea officia consequat consequat eiusmod. Elit non est tempor incididunt
        					Lorem occaecat cillum ullamco laboris eu. Dolore qui irure ea reprehenderit officia tempor ex. Aliqua eiusmod commodo
        					tempor eu ea sint consectetur.
        				</p>
        			</div>
        		</article>
        	</div>
        </div>

    Assets

    Assets Toc

    <!-- TOC -->
        <div class="dct-toc">
        	<div class="dct-toc-header">
        		<span class="dc-icon dc-icon--grey-oslo dc-icon--size-12 u-spacing-r1">
        			<svg class="dc-icon__svg">
        				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#upload" />
        			</svg>
        		</span>
        		<h6 class="dc-u-fs-small">Upload File</h6>
        	</div>
        	<div class="u-fx-f1 u-oxa">
        		<div class="dct-drag-upload u-text-center u-spacing-4">
        			<span class="dc-icon dc-icon--primary dc-icon--size-24 u-spacing-b2">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#attachment" />
        				</svg>
        			</span>
        			<span class="u-text-uppercase u-fw-700">Drag File Here</span>
        			<span class="dct-drag-upload__hide u-spacing-b2">or</span>
        			<button class="dct-drag-upload__hide dc-btn dc-btn--primary-light dc-btn--sm">Browse</button>
        		</div>
        	</div>
        	<div class="dct-toc-footer u-text-center u-fx-fdc">
        		<span>Max. 3MB</span>
        		<span>Only JPG, PNG, GIF & CSV</span>
        	</div>
        </div>
        <!-- TOC -->

    Assets Table

    <div class="dc-table-wrapper u-spacing-b6">
        	<table class="dc-table dc-table--headless">
        		<thead class="dc-table__thead">
        			<tr>
        				<th role="columnheader" aria-disabled="true" class="dc-table__th dc-table__td--shrink dc-table__td--icon u-pr-0">
        					<input type="checkbox" id="checkbox-label-1">
        					<label class="dc-label--none dc-label--white" for="checkbox-label-1"></label>
        				</th>
        				<th role="columnheader" aria-sort="none" class="dc-table__th" colspan="2">
        					File Name
        				</th>
        				<th role="columnheader" aria-sort="none" class="dc-table__th">
        					Uploaded At
        				</th>
        				<th role="columnheader" aria-sort="none" class="dc-table__th">
        					File Type
        				</th>
        				<th role="columnheader" aria-sort="none" class="dc-table__th">
        					File Size
        				</th>
        				<th role="columnheader" aria-disabled="true" class="dc-table__th"></th>
        				<th role="columnheader" aria-disabled="true" class="dc-table__th dct-assets-th--btn"></th>
        			</tr>
        		</thead>
        		<tbody class="dc-table__tbody">
        			<tr class="dc-table__tr">
        				<td class="dc-table__td">
        				</td>
        				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon u-pr-0">
        					<svg class="dc-icon--red" height="24" width="24">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#error" />
        					</svg>
        				</td>
        				<td class="dc-table__td dct-assets-td--fail">my-course-picture.jpg</td>
        				<td class="dc-table__td dct-assets-td--fail">Upload failed</td>
        				<td class="dc-table__td"></td>
        				<td class="dc-table__td"></td>
        				<td class="dc-table__td">
        
        				</td>
        				<td class="dc-table__td u-pl-0">
        					<button class="dc-btn dc-btn--bordered-red dc-btn--sm dc-btn--block">Try Again</button>
        				</td>
        			</tr>
        			<tr class="dc-table__tr">
        				<td class="dc-table__td">
        				</td>
        				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon u-pr-0">
        					<span class="dc-icon dc-icon--size-18 dc-icon--grey-oslo dc-icon--flex dc-icon--spinner">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#spinner" />
        						</svg>
        					</span>
        				</td>
        				<td class="dc-table__td dct-assets-td--upload">my-course-picture.jpg</td>
        				<td class="dc-table__td dct-assets-td--upload">Uploading to our servers &hellip;</td>
        				<td class="dc-table__td"></td>
        				<td class="dc-table__td"></td>
        				<td class="dc-table__td">
        
        				</td>
        				<td class="dc-table__td u-pl-0">
        					<button class="dc-btn dc-btn--bordered-red dc-btn--sm dc-btn--block">Cancel</button>
        				</td>
        			</tr>
        			<tr class="dc-table__tr">
        				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon u-pr-0">
        					<input type="checkbox" id="checkbox-label-2">
        					<label class="dc-label--none" for="checkbox-label-2"></label>
        				</td>
        				<td class="dc-table__td dc-table__td--avatar u-pr-0">
        					<img height="28" width="28" src="https://styleguide-assets.datacamp.com/images/core/components/image-file-uploader/placeholder-cbaf724d5e.svg">
        				</td>
        				<td class="dc-table__td">[email protected]</td>
        				<td class="dc-table__td">22/01/2018 at 09:12 am</td>
        				<td class="dc-table__td">Image</td>
        				<td class="dc-table__td">72 kB</td>
        				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
        					<svg class="dc-icon--primary" width="18" height="18">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
        					</svg>
        				</td>
        				<td class="dc-table__td u-pl-0">
        					<button class="dc-btn dc-btn--tertiary dc-btn--sm dc-btn--block">Copy Link</button>
        				</td>
        			</tr>
        			<tr class="dc-table__tr">
        				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon u-pr-0">
        					<input type="checkbox" id="checkbox-label-3">
        					<label class="dc-label--none" for="checkbox-label-3"></label>
        				</td>
        				<td class="dc-table__td dc-table__td--avatar u-pr-0">
        					<img height="28" width="28" src="https://styleguide-assets.datacamp.com/images/core/components/image-file-uploader/placeholder-cbaf724d5e.svg">
        				</td>
        				<td class="dc-table__td">[email protected]</td>
        				<td class="dc-table__td">22/01/2018 at 09:12 am</td>
        				<td class="dc-table__td">Image</td>
        				<td class="dc-table__td">72 kB</td>
        				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
        					<svg class="dc-icon--primary" width="18" height="18">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
        					</svg>
        				</td>
        				<td class="dc-table__td u-pl-0">
        					<button class="dc-btn dc-btn--green dc-btn--sm dc-btn--block">
        						<svg class="dc-icon--white u-spacing-r1" width="12" height="12">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#checkmark" />
        						</svg>
        						Copied
        					</button>
        				</td>
        			</tr>
        			<tr class="dc-table__tr">
        				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon u-pr-0">
        					<input type="checkbox" id="checkbox-label-4">
        					<label class="dc-label--none" for="checkbox-label-4"></label>
        				</td>
        				<td class="dc-table__td dc-table__td--avatar u-pr-0">
        					<img height="28" width="28" src="https://styleguide-assets.datacamp.com/images/core/components/image-file-uploader/placeholder-cbaf724d5e.svg">
        				</td>
        				<td class="dc-table__td">[email protected]</td>
        				<td class="dc-table__td">22/01/2018 at 09:12 am</td>
        				<td class="dc-table__td">Image</td>
        				<td class="dc-table__td">72 kB</td>
        				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
        					<svg class="dc-icon--primary" width="18" height="18">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
        					</svg>
        				</td>
        				<td class="dc-table__td u-pl-0">
        					<button class="dc-btn dc-btn--tertiary dc-btn--sm dc-btn--block">Copy Link</button>
        				</td>
        			</tr>
        			<tr class="dc-table__tr">
        				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon u-pr-0">
        					<input type="checkbox" id="checkbox-label-5">
        					<label class="dc-label--none" for="checkbox-label-5"></label>
        				</td>
        				<td class="dc-table__td dc-table__td--avatar u-pr-0">
        					<img height="28" width="28" src="https://styleguide-assets.datacamp.com/images/core/components/image-file-uploader/placeholder-cbaf724d5e.svg">
        				</td>
        				<td class="dc-table__td">[email protected]</td>
        				<td class="dc-table__td">22/01/2018 at 09:12 am</td>
        				<td class="dc-table__td">Image</td>
        				<td class="dc-table__td">72 kB</td>
        				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
        					<svg class="dc-icon--primary" width="18" height="18">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
        					</svg>
        				</td>
        				<td class="dc-table__td u-pl-0">
        					<button class="dc-btn dc-btn--tertiary dc-btn--sm dc-btn--block">Copy Link</button>
        				</td>
        			</tr>
        		</tbody>
        		<tfoot></tfoot>
        	</table>
        </div>

    Delete Confirmation

    <div class="dc-modal__body dc-modal__body--centered">
        
        	<h4>You're about to delete the selected asset</h4>
        
        	<p class="u-spacing-t2">
        		The selected asset is
        		<span class="dc-highlight dc-highlight--warning">used in 2 exercises</span>. Are you sure?
        	</p>
        
        	<div class="u-spacing-3">
        		<button class="dc-btn dc-btn--tertiary">Cancel</button>
        		<button class="dc-btn dc-btn--red u-spacing-l3">Delete Asset</button>
        	</div>
        
        </div>

    Buttons

    Button Diagnostics

    <a href="#" class="dc-btn dc-btn--white dc-btn--shadowed dc-btn--sm">
        	<span class="dc-icon dc-icon--primary dc-icon--size-18 mr-xs">
        		<svg class="dc-icon__svg">
        			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#reporting" />
        		</svg>
        	</span>
        	Diagnostics
        </a>

    Button Delete

    <a href="#" class="dc-btn dc-btn--white dc-btn--shadowed dc-btn--white dc-btn--shadowed-red dc-btn--sm">
        	<span class="dc-icon dc-icon--red dc-icon--size-18 dc-icon--flex mr-xs">
        		<svg class="dc-icon__svg">
        			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        		</svg>
        	</span>
        	Delete Exercise
        </a>

    Button Edit

    <a href="#" class="dc-btn dc-btn--white dc-btn--shadowed dc-btn--white dc-btn--shadowed-green dc-btn--sm">
        	<span class="dc-icon dc-icon--green dc-icon--size-18 dc-icon--flex mr-xs">
        		<svg class="dc-icon__svg">
        			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#video" />
        		</svg>
        	</span>
        	Edit Video
        </a>

    Button Bordered

    <a href="#" class="dc-btn dc-btn--bordered dct-btn--controls">
        	Bordered
        </a>

    Button Dropdown

    <a href="#" class="dc-btn dc-btn--bordered dct-btn--dropdown dct-btn--controls">
        	Fade In
        </a>

    Button Multi

    <div class="dc-btn-multi">
        	<button class="dc-btn-multi__child dc-btn--unstyled">Save</button>
        	<button class="dc-btn-multi__child dc-btn-multi__icon dc-btn--unstyled">
        		<span class=" dc-icon dc-icon--primary-darkest dc-icon--size-12">
        			<svg class="dc-icon__svg">
        				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
        			</svg>
        		</span>
        	</button>
        </div>

    Button Multi White

    <div class="dc-btn-multi dc-btn-multi--white">
        	<button class="dc-btn-multi__child dc-btn--unstyled">Save</button>
        	<button class="dc-btn-multi__child dc-btn-multi__icon dc-btn--unstyled">
        		<span class=" dc-icon dc-icon--primary-darkest dc-icon--size-12">
        			<svg class="dc-icon__svg">
        				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
        			</svg>
        		</span>
        	</button>
        </div>
        
        <div class="dc-btn-multi dc-btn-multi--white">
        	<button class="dc-btn-multi__child dc-btn-multi__icon dc-btn--unstyled">
        		<span class=" dc-icon dc-icon--primary-darkest dc-icon--size-12">
        			<svg class="dc-icon__svg">
        				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
        			</svg>
        		</span>
        	</button>
        	<button class="dc-btn-multi__child dc-btn--unstyled">
        		Save</button>
        </div>

    Multi Button Timer

    Custom settings for a multi-btn with a text input and inactive icon

    <div class="dc-multi-btn dc-multi-btn--sm dc-multi-btn--timer">
        	<input type="text" class="dc-multi-btn__item dc-multi-btn__text" value="00:20" />
        	<button class="dc-multi-btn__item dc-multi-btn__icon">
        		<span class="dc-icon dc-icon--size-12 dc-icon--grey-dark">
        			<svg class="dc-icon__svg">
        				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#stopwatch" />
        			</svg>
        		</span>
        	</button>
        </div>

    Multi Button White

    Custom settings for a multi-btn with a text input and inactive icon

    <div class="dc-multi-btn dc-multi-btn--sm dc-multi-btn--white">
        	<button class="dc-multi-btn__item dc-multi-btn__icon">
        		<span class="dc-icon dc-icon--size-12 dc-icon--grey-oslo dc-video-editor__icon-backward">
        			<svg class="dc-icon__svg">
        				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
        			</svg>
        		</span>
        	</button>
        	<input type="text" class="dc-multi-btn__item dc-multi-btn__text" value="00:20" />
        </div>

    Button Preview

    <button class="dc-btn dc-btn--tertiary dc-u-color-white dc-btn--sm">
        	<span class="dc-icon dc-icon--white dc-icon--size-12 dc-u-mr-8 dc-icon--flex">
        		<svg class="dc-icon__svg">
        			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#eye" />
        		</svg>
        	</span>
        	Preview</button>

    Content Tag

    Content Tag Context

    The content tag is often positioned over an image or similar content. The container of the image needs position styles, which are applied via .has-dc-content-tag. This will center the tag horizontally and vertically.

    The example uses a grid, which restricts the size of the image container.

    <div class="container">
        	<div class="col-xs-12 col-md-6">
        		Any content
        	</div>
        	<div class="col-xs-12 col-md-6">
        		<div class="has-dc-content-tag">
        			<img class="u-img-fluid" src="http://placehold.it/600x450" />
        			<div class="dc-content-tag dc-content-tag--challenges"></div>
        		</div>
        	</div>
        </div>

    Content Tag

    Large tags that are positioned over content, to indicate what section they are a part of. For positioning the tag in the most popular use case, centered horizontally and vertically, there is the .dc-has-content-tag class.

    Modifiers

    The default is a white circle, but the icons are added and positioned via background images. Here are the current variations:

    Type Class Background Image
    Challenges dc-content-tag--challenges Preview
    Courses dc-content-tag--courses Preview
    Projects dc-content-tag--projects Preview
    <div class="dc-content-tag dc-content-tag--challenges"></div>

    Diagnostics Panel

    Diagnostics Panel

    <div class="dc-teach-layout">
        	<div class="dc-teach-layout__wrapper">
        		<nav class="dc-teach-nav">
        			<button class="dc-btn--unstyled dc-teach-nav__btn is-active">
        				<span class="dc-icon dc-icon--size-18">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        					</svg>
        				</span>
        			</button>
        			<button class="dc-btn--unstyled dc-teach-nav__btn">
        				<span class="dc-icon dc-icon--size-18">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#attachment" />
        					</svg>
        				</span>
        			</button>
        			<button class="dc-btn--unstyled dc-teach-nav__btn">
        				<span class="dc-icon dc-icon--size-18">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#settings" />
        					</svg>
        				</span>
        			</button>
        			<button class="dc-btn--unstyled dc-teach-nav__btn">
        				<span class="dc-icon dc-icon--size-18">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#notification" />
        					</svg>
        				</span>
        			</button>
        			<button class="dc-btn--unstyled dc-teach-nav__btn">
        				<span class="dc-icon dc-icon--size-18">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#info" />
        					</svg>
        				</span>
        			</button>
        		</nav>
        
        		<!-- Main Goes Here -->
        		<div class="dct-content">
        			<!-- TOC -->
        			<div class="dct-toc">
        				<div class="dct-toc-header">
        					<span class="dc-icon dc-icon--grey-oslo dc-icon--size-12 u-spacing-r1">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#course" />
        						</svg>
        					</span>
        					<h6 class="dc-u-fs-small">Introduction to R</h6>
        				</div>
        				<ol class="dct-toc-list list-unstyled">
        					<li class="dct-toc-list__child dc-is-active">
        						<div class="dct-toc-list__title u-fx u-fx-jcsb">
        							<button class="dct-toc-btn--icon dc-btn--unstyled u-text-truncate u-spacing-r1 dc-u-ta-left">
        								<span class="dc-icon dc-icon--grey-oslo dc-icon--size-12 u-spacing-r1">
        									<svg class="dc-icon__svg">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
        									</svg>
        								</span>
        								Chapter Long Name
        							</button>
        							<div class="u-por u-fx u-fx-aic">
        								<button class="dct-toc-btn--icon dc-btn--unstyled">
        									<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        									</svg>
        								</button>
        								<button class="dct-toc-btn--icon dc-btn--unstyled">
        									<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        									</svg>
        								</button>
        							</div>
        						</div>
        						<ol class="dct-toc-list__content list-unstyled">
        							<li class="dct-toc-list__item dct-toc-list__item--drag">
        								<div class="u-fx u-oh dc-u-fxi-fg-1">
        									<span class="u-spacing-r2">
        										<svg class="dc-icon--geyser dct-toc-list__icon--drag dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        										</svg>
        									</span>
        									<button class="dc-btn--unstyled dct-toc-list-item__link u-fx u-fx-aic u-text-truncate dc-is-active">
        										<svg class="dct-toc-list-item__icon u-spacing-r2" width="18" height="18">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        										</svg>
        										<span class="u-fx-f1 u-spacing-r1 u-text-truncate">Exercise 1</span>
        									</button>
        								</div>
        								<div class="u-fx">
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        										</svg>
        									</button>
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        										</svg>
        									</button>
        								</div>
        							</li>
        							<li class="dct-toc-list__item dct-toc-list__item--drag">
        								<div class="u-fx u-oh dc-u-fxi-fg-1">
        									<span class="u-spacing-r2">
        										<svg class="dc-icon--geyser dct-toc-list__icon--drag dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        										</svg>
        									</span>
        									<button class="dc-btn--unstyled dct-toc-list-item__link u-fx u-fx-aic u-text-truncate">
        										<svg class="dct-toc-list-item__icon u-spacing-r2" width="18" height="18">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        										</svg>
        										<span class="u-fx-f1 u-spacing-r1 u-text-truncate">Exercise 2</span>
        									</button>
        								</div>
        								<div class="u-fx">
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        										</svg>
        									</button>
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        										</svg>
        									</button>
        								</div>
        							</li>
        							<li class="dct-toc-list__item dct-toc-list__item--drag">
        								<div class="u-fx u-oh dc-u-fxi-fg-1">
        									<span class="u-spacing-r2">
        										<svg class="dc-icon--geyser dct-toc-list__icon--drag dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        										</svg>
        									</span>
        									<button class="dc-btn--unstyled dct-toc-list-item__link u-fx u-fx-aic u-text-truncate">
        										<svg class="dct-toc-list-item__icon u-spacing-r2" width="18" height="18">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        										</svg>
        										<span class="u-fx-f1 u-spacing-r1 u-text-truncate">Exercise Long Name</span>
        									</button>
        								</div>
        								<div class="u-fx">
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        										</svg>
        									</button>
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        										</svg>
        									</button>
        								</div>
        							</li>
        							<li class="dct-toc-list__item">
        								<button href="#" class="dct-toc-list-item__btn">
        									<span class="dc-icon dc-icon--size-18 u-spacing-r1">
        										<svg class="dc-icon__svg">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        										</svg>
        									</span>
        									Add Exercise</button>
        							</li>
        						</ol>
        					</li>
        					<li class="dct-toc-list__child">
        						<div class="dct-toc-list__title u-fx u-fx-jcsb">
        							<button class="dct-toc-btn--icon dc-btn--unstyled u-text-truncate u-spacing-r1 dc-u-ta-left">
        								<span class="dc-icon dc-icon--grey-oslo dc-icon--size-12 u-spacing-r1">
        									<svg class="dc-icon__svg">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_right" />
        									</svg>
        								</span>
        								Chapter 2
        							</button>
        							<div class="u-por u-fx u-fx-aic">
        								<div class="dct-toc-list__status"></div>
        								<button class="dct-toc-btn--icon dc-btn--unstyled">
        									<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        									</svg>
        								</button>
        								<button class="dct-toc-btn--icon dc-btn--unstyled">
        									<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        									</svg>
        								</button>
        							</div>
        						</div>
        						<ol class="dct-toc-list__content list-unstyled">
        							<li class="dct-toc-list__item dct-toc-list__item--drag">
        								<div class="u-fx u-oh dc-u-fxi-fg-1">
        									<span class="u-spacing-r2">
        										<svg class="dc-icon--geyser dct-toc-list__icon--drag dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        										</svg>
        									</span>
        									<button class="dc-btn--unstyled dct-toc-list-item__link u-fx u-fx-aic u-text-truncate dc-is-active">
        										<svg class="dct-toc-list-item__icon u-spacing-r2" width="18" height="18">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        										</svg>
        										<span class="u-fx-f1 u-spacing-r1 u-text-truncate">Exercise 1</span>
        									</button>
        								</div>
        								<div class="u-fx">
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        										</svg>
        									</button>
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        										</svg>
        									</button>
        								</div>
        							</li>
        							<li class="dct-toc-list__item dct-toc-list__item--drag">
        								<div class="u-fx u-oh dc-u-fxi-fg-1">
        									<span class="u-spacing-r2">
        										<svg class="dc-icon--geyser dct-toc-list__icon--drag dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        										</svg>
        									</span>
        									<button class="dc-btn--unstyled dct-toc-list-item__link u-fx u-fx-aic u-text-truncate">
        										<svg class="dct-toc-list-item__icon u-spacing-r2" width="18" height="18">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        										</svg>
        										<span class="u-fx-f1 u-spacing-r1 u-text-truncate">Exercise 2</span>
        									</button>
        								</div>
        								<div class="u-fx">
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        										</svg>
        									</button>
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        										</svg>
        									</button>
        								</div>
        							</li>
        							<li class="dct-toc-list__item dct-toc-list__item--drag">
        								<div class="u-fx u-oh dc-u-fxi-fg-1">
        									<span class="u-spacing-r2">
        										<svg class="dc-icon--geyser dct-toc-list__icon--drag dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        										</svg>
        									</span>
        									<button class="dc-btn--unstyled dct-toc-list-item__link u-fx u-fx-aic u-text-truncate">
        										<svg class="dct-toc-list-item__icon u-spacing-r2" width="18" height="18">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        										</svg>
        										<span class="u-fx-f1 u-spacing-r1 u-text-truncate">Exercise Long Name</span>
        									</button>
        								</div>
        								<div class="u-fx">
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        										</svg>
        									</button>
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        										</svg>
        									</button>
        								</div>
        							</li>
        							<li class="dct-toc-list__item">
        								<button href="#" class="dct-toc-list-item__btn">
        									<span class="dc-icon dc-icon--size-18 u-spacing-r1">
        										<svg class="dc-icon__svg">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        										</svg>
        									</span>
        									Add Exercise</button>
        							</li>
        						</ol>
        					</li>
        				</ol>
        				<div class="dct-toc-footer">
        					<button href="#" class="dc-btn dc-btn--primary-light dc-btn--block">
        						<span class="dc-icon dc-icon--white dc-icon--size-18 dc-icon--flex u-spacing-r1">
        							<svg class="dc-icon__svg">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        							</svg>
        						</span>
        						<span>Add Chapter</span>
        					</button>
        				</div>
        			</div> <!-- TOC -->
        
        			<!-- Diagnostics Panel -->
        			<div class="dct-panel dct-panel--right is-active dct-diagnostics-panel">
        				<header class="dct-panel__header">
        					<h6 class="dct-panel__header-title">
        						<span class="dc-icon dc-icon--grey-oslo dc-icon--size-12 u-spacing-r1">
        							<svg class="dc-icon__svg">
        								<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#reporting"></use>
        							</svg>
        						</span>
        						<span>Diagnostics - exercise 1</span>
        					</h6>
        					<button class="dc-btn dc-btn--link">
        						<span class="dc-icon dc-icon--primary dc-icon--size-12 u-spacing-r1">
        							<svg class="dc-icon__svg">
        								<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#close"></use>
        							</svg>
        						</span>
        					</button>
        				</header>
        
        				<div class="dct-panel__content">
        					<article class="dc-action-card u-spacing-b2">
        
        						<header class="dc-action-card__header dc-action-card__header--warning">
        							<h6 class="dc-action-card__title">3 warnings</h6>
        						</header>
        
        						<div class="dc-action-card__content dc-action-card__content--list">
        							<ul class="dc-action-card__list">
        								<li class="dc-action-card__list-item">Comments in the solution code and the sample code should match</li>
        								<li class="dc-action-card__list-item">Exercises should not have more then 4 instructions. You have 6 instructions.</li>
        								<li class="dc-action-card__list-item">Hints should not have more than 160 chararcters. You have 172 characters. </li>
        							</ul>
        						</div>
        					</article>
        
        					<article class="dc-action-card u-spacing-b2">
        
        						<header class="dc-action-card__header dc-action-card__header--error">
        							<h6 class="dc-action-card__title">3 user reported issues</h6>
        						</header>
        
        						<div class="dc-action-card__content dc-action-card__content--list">
        							<ul class="dc-action-card__list">
        								<li class="dc-action-card__list-item">Comments in the solution code and the sample code should match</li>
        								<li class="dc-action-card__list-item">Exercises should not have more then 4 instructions. You have 6 instructions.</li>
        								<li class="dc-action-card__list-item">Hints should not have more than 160 chararcters. You have 172 characters. </li>
        							</ul>
        						</div>
        					</article>
        				</div>
        			</div>
        			<!-- /Diagnostics Panel -->
        
        			<!-- Main Content Goes Here-->
        			<div class="dc-teach-layout__content">
        
        				<!-- Main Content Header -->
        				<div class="u-fx u-fx-aic u-fx-jcsb dc-u-mb-16">
        					<div class="u-fx u-fx-aic">
        						<svg class="dc-icon--grey-oslo u-spacing-r1" height="18" width="18">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        						</svg>
        						<h3 class="h4 u-spacing-r2">
        							Exercise 1
        						</h3>
        						<button class="dc-btn--link " href="#">
        							<span class="dc-icon dc-icon--primary dc-icon--size-12">
        								<svg class="dc-icon__svg">
        									<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        								</svg>
        							</span>
        						</button>
        					</div>
        					<div>
        						<a href="#" class="dc-btn dc-btn--white dc-btn--shadowed dc-btn--sm">
        							<span class="dc-icon dc-icon--primary dc-icon--size-18 mr-xs">
        								<svg class="dc-icon__svg">
        									<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#reporting" />
        								</svg>
        							</span>
        							Diagnostics
        						</a>
        						<a href="#" class="dc-btn dc-btn--white dc-btn--shadowed dc-btn--sm">
        							<span class="dc-icon dc-icon--red dc-icon--size-18 dc-icon--flex mr-xs">
        								<svg class="dc-icon__svg">
        									<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        								</svg>
        							</span>
        							Delete Exercise
        						</a>
        					</div>
        				</div>
        				<!-- Main Content Header -->
        
        				<div class="dc-action-card mb-xs">
        					<div class="dc-action-card__header ">
        						<div class="dc-action-card__title">
        							<span class="dc-icon dc-icon--grey-oslo dc-icon--size-12 mr-xs">
        								<svg class="dc-icon__svg">
        									<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
        								</svg>
        							</span>
        							Assignment
        							<span class="dc-icon dc-icon--primary dc-icon--size-12 ml-xs">
        								<svg class="dc-icon__svg">
        									<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#info" />
        								</svg>
        							</span>
        						</div>
        						<div class="dc-action-card__controls">
        							<!-- controls for textarea go here. -->
        							Placeholder: Controls Go Here
        						</div>
        					</div>
        					<div class="dc-action-card__content">
        						<textarea class="dc-action-card__content__text" name="text" rows="3" placeholder="Start typing here…"></textarea>
        						<div class="dc-action-card__info">
        							<span class="mr-sm">0:0</span>
        							<span class="mr-sm">0 lines</span>
        							<span>0 chars</span>
        						</div>
        					</div>
        				</div>
        			</div>
        			<!-- Main Content Goes Here-->
        		</div>
        		<!-- Main Goes Here -->
        	</div>
        	<footer class="dct-footer">
        		<a href="#" class="dc-btn dc-btn--sm dct-btn--footer btn-unstyled">
        			<span class="dc-icon dc-icon--size-12 dc-u-mr-8 dc-icon--flex">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_2_left" />
        				</svg>
        			</span>
        			All Courses</a>
        		<div class="dc-u-fx">
        			<h1 class="dct-footer__title">Introduction to R</h1>
        			<div class="dc-category__tag">
        				<span class="dc-category__tag__content">Master</span>
        				<span class="dc-category__tag__icon dc-icon dc-icon--green dc-icon--size-12">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#checkmark" />
        					</svg>
        				</span>
        			</div>
        			<div class="dc-user-mode__tag dc-u-bgc-red dc-u-ml-8">
        				<button class="dc-user-mode__btn">View Only</button>
        				<div class="dc-u-mh-8">
        					<span class="dc-icon dc-icon--white dc-icon--size-12">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#attention" />
        						</svg>
        					</span>
        				</div>
        			</div>
        			<div class="dc-tag dc-tag--hue dc-u-bgc-orange dc-u-brad-all">
        				Unsaved Changes
        			</div>
        		</div>
        		<div>
        			<div class="dc-btn-multi u-spacing-r1">
        				<button class="dc-btn-multi__child dc-btn--unstyled">Save</button>
        				<button class="dc-btn-multi__child dc-btn-multi__icon dc-btn--unstyled">
        					<span class=" dc-icon dc-icon--primary-darkest dc-icon--size-12">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
        						</svg>
        					</span>
        				</button>
        			</div>
        			<button class="dc-btn dc-btn--tertiary dc-u-color-white dc-btn--sm">
        				<span class="dc-icon dc-icon--white dc-icon--size-12 dc-u-mr-8 dc-icon--flex">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#eye" />
        					</svg>
        				</span>
        				Preview</button>
        		</div>
        	</footer>
        </div>

    Drag Drop Upload

    Drag Drop

    <div class="dct-drag-upload u-text-center">
        	<span class="dc-icon dc-icon--primary dc-icon--size-24 u-spacing-b2">
        		<svg class="dc-icon__svg">
        			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#attachment" />
        		</svg>
        	</span>
        	<span class="u-text-uppercase u-fw-700">Drag File Here</span>
        	<span class="dct-drag-upload__hide u-spacing-b2">or</span>
        	<button class="dct-drag-upload__hide dc-btn dc-btn--primary-light dc-btn--sm">Browse</button>
        </div>

    Drag Drop Active

    Add the .dc-is-active to .dct-drag-upload class to show acitve state.

    <div class="dct-drag-upload u-text-center dc-is-active">
        	<span class="dc-icon dc-icon--primary dc-icon--size-24 u-spacing-b2">
        		<svg class="dc-icon__svg">
        			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#attachment" />
        		</svg>
        	</span>
        	<span class="u-text-uppercase u-fw-700">Drag File Here</span>
        	<span class="dct-drag-upload__hide u-spacing-b2">or</span>
        	<button class="dct-drag-upload__hide dc-btn dc-btn--primary-light dc-btn--sm">Browse</button>
        </div>

    Exercise Panel

    Exercise Panel

    <div class="dc-teach-layout">
        	<div class="dc-flash-wrapper">
        		<div class="dc-flash dc-flash--notice">
        			<div class="dc-flash__content">
        				<strong>Stay tuned!</strong> Visit <a href="#">this page in the meantime</a>.
        			</div>
        			<div class="dc-flash__close">
        				<span class="dc-icon dc-icon--size-12 dc-icon--white dc-icon--flex">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#close" />
        					</svg>
        				</span>
        			</div>
        		</div>
        	</div>
        	<div class="dc-teach-layout__wrapper">
        		<nav class="dc-teach-nav">
        			<button class="dc-btn--unstyled dc-teach-nav__btn is-active">
        				<span class="dc-icon dc-icon--size-18">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        					</svg>
        				</span>
        			</button>
        			<button class="dc-btn--unstyled dc-teach-nav__btn">
        				<span class="dc-icon dc-icon--size-18">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#attachment" />
        					</svg>
        				</span>
        			</button>
        			<button class="dc-btn--unstyled dc-teach-nav__btn">
        				<span class="dc-icon dc-icon--size-18">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#settings" />
        					</svg>
        				</span>
        			</button>
        			<button class="dc-btn--unstyled dc-teach-nav__btn">
        				<span class="dc-icon dc-icon--size-18">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#notification" />
        					</svg>
        				</span>
        			</button>
        			<button class="dc-btn--unstyled dc-teach-nav__btn">
        				<span class="dc-icon dc-icon--size-18">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#info" />
        					</svg>
        				</span>
        			</button>
        		</nav>
        
        		<!-- Main Goes Here -->
        		<div class="dct-content dc-is-expanded">
        			<!-- TOC -->
        			<div class="dct-toc">
        				<div class="dct-toc-header">
        					<span class="dc-icon dc-icon--grey-oslo dc-icon--size-12 u-spacing-r1">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#course" />
        						</svg>
        					</span>
        					<h6 class="dc-u-fs-small">Introduction to R</h6>
        				</div>
        				<ol class="dct-toc-list list-unstyled">
        					<li class="dct-toc-list__child dc-is-active">
        						<div class="dct-toc-list__title u-fx u-fx-jcsb">
        							<button class="dct-toc-btn--icon dc-btn--unstyled u-text-truncate u-spacing-r1 dc-u-ta-left">
        								<span class="dc-icon dc-icon--grey-oslo dc-icon--size-12 u-spacing-r1">
        									<svg class="dc-icon__svg">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
        									</svg>
        								</span>
        								Chapter Long Name
        							</button>
        							<div class="u-por u-fx u-fx-aic">
        								<button class="dct-toc-btn--icon dc-btn--unstyled">
        									<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        									</svg>
        								</button>
        								<button class="dct-toc-btn--icon dc-btn--unstyled">
        									<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        									</svg>
        								</button>
        							</div>
        						</div>
        						<ol class="dct-toc-list__content list-unstyled">
        							<li class="dct-toc-list__item dct-toc-list__item--drag">
        								<div class="u-fx u-oh dc-u-fxi-fg-1">
        									<span class="u-spacing-r2">
        										<svg class="dc-icon--geyser dct-toc-list__icon--drag dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        										</svg>
        									</span>
        									<button class="dc-btn--unstyled dct-toc-list-item__link u-fx u-fx-aic u-text-truncate dc-is-active">
        										<svg class="dct-toc-list-item__icon u-spacing-r2" width="18" height="18">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        										</svg>
        										<span class="u-fx-f1 u-spacing-r1 u-text-truncate">Exercise 1</span>
        									</button>
        								</div>
        								<div class="u-fx">
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        										</svg>
        									</button>
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        										</svg>
        									</button>
        								</div>
        							</li>
        							<li class="dct-toc-list__item dct-toc-list__item--drag">
        								<div class="u-fx u-oh dc-u-fxi-fg-1">
        									<span class="u-spacing-r2">
        										<svg class="dc-icon--geyser dct-toc-list__icon--drag dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        										</svg>
        									</span>
        									<button class="dc-btn--unstyled dct-toc-list-item__link u-fx u-fx-aic u-text-truncate">
        										<svg class="dct-toc-list-item__icon u-spacing-r2" width="18" height="18">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        										</svg>
        										<span class="u-fx-f1 u-spacing-r1 u-text-truncate">Exercise 2</span>
        									</button>
        								</div>
        								<div class="u-fx">
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        										</svg>
        									</button>
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        										</svg>
        									</button>
        								</div>
        							</li>
        							<li class="dct-toc-list__item dct-toc-list__item--drag">
        								<div class="u-fx u-oh dc-u-fxi-fg-1">
        									<span class="u-spacing-r2">
        										<svg class="dc-icon--geyser dct-toc-list__icon--drag dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        										</svg>
        									</span>
        									<button class="dc-btn--unstyled dct-toc-list-item__link u-fx u-fx-aic u-text-truncate">
        										<svg class="dct-toc-list-item__icon u-spacing-r2" width="18" height="18">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        										</svg>
        										<span class="u-fx-f1 u-spacing-r1 u-text-truncate">Exercise Long Name</span>
        									</button>
        								</div>
        								<div class="u-fx">
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        										</svg>
        									</button>
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        										</svg>
        									</button>
        								</div>
        							</li>
        							<li class="dct-toc-list__item">
        								<button href="#" class="dct-toc-list-item__btn">
        									<span class="dc-icon dc-icon--size-18 u-spacing-r1">
        										<svg class="dc-icon__svg">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        										</svg>
        									</span>
        									Add Exercise</button>
        							</li>
        						</ol>
        					</li>
        					<li class="dct-toc-list__child">
        						<div class="dct-toc-list__title u-fx u-fx-jcsb">
        							<button class="dct-toc-btn--icon dc-btn--unstyled u-text-truncate u-spacing-r1 dc-u-ta-left">
        								<span class="dc-icon dc-icon--grey-oslo dc-icon--size-12 u-spacing-r1">
        									<svg class="dc-icon__svg">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_right" />
        									</svg>
        								</span>
        								Chapter 2
        							</button>
        							<div class="u-por u-fx u-fx-aic">
        								<div class="dct-toc-list__status"></div>
        								<button class="dct-toc-btn--icon dc-btn--unstyled">
        									<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        									</svg>
        								</button>
        								<button class="dct-toc-btn--icon dc-btn--unstyled">
        									<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        									</svg>
        								</button>
        							</div>
        						</div>
        						<ol class="dct-toc-list__content list-unstyled">
        							<li class="dct-toc-list__item dct-toc-list__item--drag">
        								<div class="u-fx u-oh dc-u-fxi-fg-1">
        									<span class="u-spacing-r2">
        										<svg class="dc-icon--geyser dct-toc-list__icon--drag dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        										</svg>
        									</span>
        									<button class="dc-btn--unstyled dct-toc-list-item__link u-fx u-fx-aic u-text-truncate dc-is-active">
        										<svg class="dct-toc-list-item__icon u-spacing-r2" width="18" height="18">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        										</svg>
        										<span class="u-fx-f1 u-spacing-r1 u-text-truncate">Exercise 1</span>
        									</button>
        								</div>
        								<div class="u-fx">
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        										</svg>
        									</button>
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        										</svg>
        									</button>
        								</div>
        							</li>
        							<li class="dct-toc-list__item dct-toc-list__item--drag">
        								<div class="u-fx u-oh dc-u-fxi-fg-1">
        									<span class="u-spacing-r2">
        										<svg class="dc-icon--geyser dct-toc-list__icon--drag dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        										</svg>
        									</span>
        									<button class="dc-btn--unstyled dct-toc-list-item__link u-fx u-fx-aic u-text-truncate">
        										<svg class="dct-toc-list-item__icon u-spacing-r2" width="18" height="18">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        										</svg>
        										<span class="u-fx-f1 u-spacing-r1 u-text-truncate">Exercise 2</span>
        									</button>
        								</div>
        								<div class="u-fx">
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        										</svg>
        									</button>
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        										</svg>
        									</button>
        								</div>
        							</li>
        							<li class="dct-toc-list__item dct-toc-list__item--drag">
        								<div class="u-fx u-oh dc-u-fxi-fg-1">
        									<span class="u-spacing-r2">
        										<svg class="dc-icon--geyser dct-toc-list__icon--drag dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        										</svg>
        									</span>
        									<button class="dc-btn--unstyled dct-toc-list-item__link u-fx u-fx-aic u-text-truncate">
        										<svg class="dct-toc-list-item__icon u-spacing-r2" width="18" height="18">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        										</svg>
        										<span class="u-fx-f1 u-spacing-r1 u-text-truncate">Exercise Long Name</span>
        									</button>
        								</div>
        								<div class="u-fx">
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        										</svg>
        									</button>
        									<button class="dct-toc-btn--icon dc-btn--unstyled">
        										<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        										</svg>
        									</button>
        								</div>
        							</li>
        							<li class="dct-toc-list__item">
        								<button href="#" class="dct-toc-list-item__btn">
        									<span class="dc-icon dc-icon--size-18 u-spacing-r1">
        										<svg class="dc-icon__svg">
        											<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        										</svg>
        									</span>
        									Add Exercise</button>
        							</li>
        						</ol>
        					</li>
        				</ol>
        				<div class="dct-toc-footer">
        					<button href="#" class="dc-btn dc-btn--primary-light dc-btn--block">
        						<span class="dc-icon dc-icon--white dc-icon--size-18 dc-icon--flex u-spacing-r1">
        							<svg class="dc-icon__svg">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        							</svg>
        						</span>
        						<span>Add Chapter</span>
        					</button>
        				</div>
        			</div> <!-- TOC -->
        
        			<!-- Add Exercise -->
        			<div class="dct-panel is-active">
        				<header class="dct-panel__header">
        					<h6 class="dct-panel__header-title">
        						<span class="dc-icon dc-icon--grey-oslo dc-icon--size-12 u-spacing-r1">
        							<svg class="dc-icon__svg">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        							</svg>
        						</span>
        						<span>Add Exercise</span>
        						<span class="dc-icon dc-icon--primary dc-icon--size-12 u-spacing-l1">
        							<svg class="dc-icon__svg">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#info" />
        							</svg>
        						</span>
        					</h6>
        					<button class="dc-btn dc-btn--link">
        						<span class="dc-icon dc-icon--primary dc-icon--size-12 u-spacing-r1">
        							<svg class="dc-icon__svg">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#close" />
        							</svg>
        						</span>
        					</button>
        				</header>
        				<div class="dct-panel__content">
        					<article class="dc-action-card dc-add-exercise-card">
        
        						<header class="dc-action-card__header dc-action-card__header--secondary">
        							<h6 class="dc-action-card__title">
        								<span class="dc-icon dc-icon--grey-oslo dc-icon--size-18 u-spacing-r1">
        									<svg class="dc-icon__svg">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        									</svg>
        								</span>
        								Normal
        							</h6>
        							<div class="dc-action-card__controls">
        								<span class="dc-action-card__tag dc-category__tag dc-category__tag--popular">
        									Popular
        								</span>
        								<span class="dc-add-exercise-card__icon dc-icon dc-icon--white dc-icon--size-18">
        									<svg class="dc-icon__svg">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        									</svg>
        								</span>
        							</div>
        						</header>
        
        						<div class="dc-action-card__content">
        							<p>
        								Dolore et ut in enim voluptate proident laborum in ea officia consequat consequat eiusmod. Elit non est tempor incididunt
        								Lorem occaecat cillum ullamco laboris eu. Dolore qui irure ea reprehenderit officia tempor ex. Aliqua eiusmod
        								commodo tempor eu ea sint consectetur.
        							</p>
        						</div>
        					</article>
        
        					<article class="dc-action-card dc-add-exercise-card">
        						<header class="dc-action-card__header  dc-action-card__header--secondary">
        							<h6 class="dc-action-card__title">
        								<span class="dc-icon dc-icon--grey-oslo dc-icon--size-18 u-spacing-r1">
        									<svg class="dc-icon__svg">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#multiple-choice" />
        									</svg>
        								</span>
        								Multiple Choice
        							</h6>
        							<div class="dc-action-card__controls">
        								<span class="dc-add-exercise-card__icon dc-icon dc-icon--white dc-icon--size-18">
        									<svg class="dc-icon__svg">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        									</svg>
        								</span>
        							</div>
        						</header>
        						<div class="dc-action-card__content">
        							<p>
        								Dolore et ut in enim voluptate proident laborum in ea officia consequat consequat eiusmod. Elit non est tempor incididunt
        								Lorem occaecat cillum ullamco laboris eu. Dolore qui irure ea reprehenderit officia tempor ex. Aliqua eiusmod
        								commodo tempor eu ea sint consectetur.
        							</p>
        						</div>
        					</article>
        
        					<article class="dc-action-card dc-add-exercise-card">
        						<header class="dc-action-card__header  dc-action-card__header--secondary">
        							<h6 class="dc-action-card__title">
        								<span class="dc-icon dc-icon--grey-oslo dc-icon--size-18 u-spacing-r1">
        									<svg class="dc-icon__svg">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#video" />
        									</svg>
        								</span>
        								Video
        							</h6>
        							<div class="dc-action-card__controls">
        								<span class="dc-action-card__tag dc-category__tag dc-category__tag--secondary">
        									New
        								</span>
        								<span class="dc-add-exercise-card__icon dc-icon dc-icon--white dc-icon--size-18">
        									<svg class="dc-icon__svg">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        									</svg>
        								</span>
        							</div>
        						</header>
        						<div class="dc-action-card__content">
        							<p>
        								Dolore et ut in enim voluptate proident laborum in ea officia consequat consequat eiusmod. Elit non est tempor incididunt
        								Lorem occaecat cillum ullamco laboris eu. Dolore qui irure ea reprehenderit officia tempor ex. Aliqua eiusmod
        								commodo tempor eu ea sint consectetur.
        							</p>
        						</div>
        					</article>
        
        					<article class="dc-action-card dc-add-exercise-card">
        						<header class="dc-action-card__header  dc-action-card__header--secondary">
        							<h6 class="dc-action-card__title">
        								<span class="dc-icon dc-icon--grey-oslo dc-icon--size-18 u-spacing-r1">
        									<svg class="dc-icon__svg">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#video-slides" />
        									</svg>
        								</span>
        								Video &#43; Slides
        							</h6>
        							<div class="dc-action-card__controls">
        								<span class="dc-add-exercise-card__icon dc-icon dc-icon--white dc-icon--size-18">
        									<svg class="dc-icon__svg">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        									</svg>
        								</span>
        							</div>
        						</header>
        						<div class="dc-action-card__content">
        							<p>
        								Dolore et ut in enim voluptate proident laborum in ea officia consequat consequat eiusmod. Elit non est tempor incididunt
        								Lorem occaecat cillum ullamco laboris eu. Dolore qui irure ea reprehenderit officia tempor ex. Aliqua eiusmod
        								commodo tempor eu ea sint consectetur.
        							</p>
        						</div>
        					</article>
        
        					<article class="dc-action-card dc-add-exercise-card">
        						<header class="dc-action-card__header  dc-action-card__header--secondary">
        							<h6 class="dc-action-card__title">
        								<span class="dc-icon dc-icon--grey-oslo dc-icon--size-18 u-spacing-r1">
        									<svg class="dc-icon__svg">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#audio" />
        									</svg>
        								</span>
        								Audio &#43; Slides
        							</h6>
        							<div class="dc-action-card__controls">
        								<span class="dc-add-exercise-card__icon dc-icon dc-icon--white dc-icon--size-18">
        									<svg class="dc-icon__svg">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        									</svg>
        								</span>
        							</div>
        						</header>
        						<div class="dc-action-card__content">
        							<p>
        								Dolore et ut in enim voluptate proident laborum in ea officia consequat consequat eiusmod. Elit non est tempor incididunt
        								Lorem occaecat cillum ullamco laboris eu. Dolore qui irure ea reprehenderit officia tempor ex. Aliqua eiusmod
        								commodo tempor eu ea sint consectetur.
        							</p>
        						</div>
        					</article>
        
        					<article class="dc-action-card dc-add-exercise-card">
        						<header class="dc-action-card__header  dc-action-card__header--secondary">
        							<h6 class="dc-action-card__title">
        								<span class="dc-icon dc-icon--grey-oslo dc-icon--size-18 u-spacing-r1">
        									<svg class="dc-icon__svg">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bullet" />
        									</svg>
        								</span>
        								Bullet
        							</h6>
        							<div class="dc-action-card__controls">
        								<span class="dc-add-exercise-card__icon dc-icon dc-icon--white dc-icon--size-18">
        									<svg class="dc-icon__svg">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        									</svg>
        								</span>
        							</div>
        						</header>
        						<div class="dc-action-card__content">
        							<p>
        								Dolore et ut in enim voluptate proident laborum in ea officia consequat consequat eiusmod. Elit non est tempor incididunt
        								Lorem occaecat cillum ullamco laboris eu. Dolore qui irure ea reprehenderit officia tempor ex. Aliqua eiusmod
        								commodo tempor eu ea sint consectetur.
        							</p>
        						</div>
        					</article>
        
        					<article class="dc-action-card dc-add-exercise-card">
        						<header class="dc-action-card__header  dc-action-card__header--secondary">
        							<h6 class="dc-action-card__title">
        								<span class="dc-icon dc-icon--grey-oslo dc-icon--size-18 u-spacing-r1">
        									<svg class="dc-icon__svg">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#tab" />
        									</svg>
        								</span>
        								Tabs
        							</h6>
        							<div class="dc-action-card__controls">
        								<span class="dc-add-exercise-card__icon dc-icon dc-icon--white dc-icon--size-18">
        									<svg class="dc-icon__svg">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        									</svg>
        								</span>
        							</div>
        						</header>
        						<div class="dc-action-card__content">
        							<p>
        								Dolore et ut in enim voluptate proident laborum in ea officia consequat consequat eiusmod. Elit non est tempor incididunt
        								Lorem occaecat cillum ullamco laboris eu. Dolore qui irure ea reprehenderit officia tempor ex. Aliqua eiusmod
        								commodo tempor eu ea sint consectetur.
        							</p>
        						</div>
        					</article>
        
        					<article class="dc-action-card dc-add-exercise-card">
        						<header class="dc-action-card__header  dc-action-card__header--secondary">
        							<h6 class="dc-action-card__title">
        								<span class="dc-icon dc-icon--grey-oslo dc-icon--size-18 u-spacing-r1">
        									<svg class="dc-icon__svg">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        									</svg>
        								</span>
        								Markdown
        							</h6>
        							<div class="dc-action-card__controls">
        								<span class="dc-add-exercise-card__icon dc-icon dc-icon--white dc-icon--size-18">
        									<svg class="dc-icon__svg">
        										<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        									</svg>
        								</span>
        							</div>
        						</header>
        						<div class="dc-action-card__content">
        							<p>
        								Dolore et ut in enim voluptate proident laborum in ea officia consequat consequat eiusmod. Elit non est tempor incididunt
        								Lorem occaecat cillum ullamco laboris eu. Dolore qui irure ea reprehenderit officia tempor ex. Aliqua eiusmod
        								commodo tempor eu ea sint consectetur.
        							</p>
        						</div>
        					</article>
        				</div>
        			</div>
        			<!-- Add Exercise -->
        
        			<!-- Main Content Goes Here-->
        			<div class="dc-teach-layout__content">
        
        				<!-- Main Content Header -->
        				<div class="u-fx u-fx-aic u-fx-jcsb dc-u-mb-16">
        					<div class="u-fx u-fx-aic">
        						<svg class="dc-icon--grey-oslo u-spacing-r1" height="18" width="18">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        						</svg>
        						<h3 class="h4 u-spacing-r2">
        							Exercise 1
        						</h3>
        						<button class="dc-btn--link " href="#">
        							<span class="dc-icon dc-icon--primary dc-icon--size-12">
        								<svg class="dc-icon__svg">
        									<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        								</svg>
        							</span>
        						</button>
        					</div>
        					<div>
        						<a href="#" class="dc-btn dc-btn--white dc-btn--shadowed dc-btn--sm">
        							<span class="dc-icon dc-icon--primary dc-icon--size-18 mr-xs">
        								<svg class="dc-icon__svg">
        									<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#reporting" />
        								</svg>
        							</span>
        							Diagnostics
        						</a>
        						<a href="#" class="dc-btn dc-btn--white dc-btn--shadowed dc-btn--white dc-btn--shadowed-red dc-btn--sm">
        							<span class="dc-icon dc-icon--red dc-icon--size-18 dc-icon--flex mr-xs">
        								<svg class="dc-icon__svg">
        									<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        								</svg>
        							</span>
        							Delete Exercise
        						</a>
        					</div>
        				</div>
        				<!-- Main Content Header -->
        
        				<div class="dc-action-card mb-xs">
        					<div class="dc-action-card__header ">
        						<div class="dc-action-card__title">
        							<span class="dc-icon dc-icon--grey-oslo dc-icon--size-12 mr-xs">
        								<svg class="dc-icon__svg">
        									<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
        								</svg>
        							</span>
        							Assignment
        							<span class="dc-icon dc-icon--primary dc-icon--size-12 ml-xs">
        								<svg class="dc-icon__svg">
        									<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#info" />
        								</svg>
        							</span>
        						</div>
        						<div class="dc-action-card__controls">
        							<!-- controls for textarea go here. -->
        							Placeholder: Controls Go Here
        						</div>
        					</div>
        					<div class="dc-action-card__content">
        						<textarea class="dc-action-card__content__text" name="text" rows="3" placeholder="Start typing here…"></textarea>
        						<div class="dc-action-card__info">
        							<span class="mr-sm">0:0</span>
        							<span class="mr-sm">0 lines</span>
        							<span>0 chars</span>
        						</div>
        					</div>
        				</div>
        			</div>
        			<!-- Main Content Goes Here-->
        		</div>
        		<!-- Main Goes Here -->
        	</div>
        	<footer class="dct-footer">
        		<a href="#" class="dc-btn dc-btn--sm dct-btn--footer btn-unstyled">
        			<span class="dc-icon dc-icon--size-12 dc-u-mr-8 dc-icon--flex">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_2_left" />
        				</svg>
        			</span>
        			All Courses</a>
        		<div class="dc-u-fx">
        			<h1 class="dct-footer__title">Introduction to R</h1>
        			<div class="dc-category__tag">
        				<span class="dc-category__tag__content">Master</span>
        				<span class="dc-category__tag__icon dc-icon dc-icon--green dc-icon--size-12">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#checkmark" />
        					</svg>
        				</span>
        			</div>
        			<div class="dc-user-mode__tag dc-u-bgc-red dc-u-ml-8">
        				<button class="dc-user-mode__btn">View Only</button>
        				<div class="dc-u-mh-8">
        					<span class="dc-icon dc-icon--white dc-icon--size-12">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#attention" />
        						</svg>
        					</span>
        				</div>
        			</div>
        			<div class="dc-tag dc-tag--hue dc-u-bgc-orange dc-u-brad-all">
        				Unsaved Changes
        			</div>
        		</div>
        		<div>
        			<div class="dc-btn-multi u-spacing-r1">
        				<button class="dc-btn-multi__child dc-btn--unstyled">Save</button>
        				<button class="dc-btn-multi__child dc-btn-multi__icon dc-btn--unstyled">
        					<span class=" dc-icon dc-icon--primary-darkest dc-icon--size-12">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
        						</svg>
        					</span>
        				</button>
        			</div>
        			<button class="dc-btn dc-btn--tertiary dc-u-color-white dc-btn--sm">
        				<span class="dc-icon dc-icon--white dc-icon--size-12 dc-u-mr-8 dc-icon--flex">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#eye" />
        					</svg>
        				</span>
        				Preview</button>
        		</div>
        	</footer>
        </div>

    Headers

    Header With Actions

    The header area of exercise creation and edit.

    <header class="[email protected]">
        	<h4 class="dc-edge-to-edge__item u-fx u-fx-aic">
        		<span class="dc-icon dc-icon--size-18 dc-icon--grey-oslo dc-icon--flex u-spacing-r2">
        			<svg class="dc-icon__svg">
        				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#course" />
        			</svg>
        		</span>
        		Title
        	</h4>
        	<div class="dc-edge-to-edge__item u-fx u-fx-aic">
        		<div class="dc-tag dc-tag--hue dc-tag--green u-spacing-r3">
        			Published
        			<span class="dc-icon dc-icon--primary dc-icon--flex dc-icon--white-shadowed dc-icon--size-12 ml-xs">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#info_2" />
        				</svg>
        			</span>
        		</div>
        		<button class="dc-btn dc-btn--sm dc-btn--white dc-btn--shadowed">
        			<span class="dc-icon dc-icon--size-18 dc-icon--primary dc-icon--flex u-spacing-r1">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#datacamp" />
        				</svg>
        			</span>
        			Request Review
        		</button>
        	</div>
        </header>

    Layout

    Footer

    <footer class="dct-footer">
        	<a href="#" class="dc-btn dc-btn--sm dct-btn--footer btn-unstyled">
        		<span class="dc-icon dc-icon--size-12 dc-u-mr-8 dc-icon--flex">
        			<svg class="dc-icon__svg">
        				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_2_left" />
        			</svg>
        		</span>
        		All Courses</a>
        	<div class="dc-u-fx">
        		<h1 class="dct-footer__title">Introduction to R</h1>
        		<div class="dc-category__tag">
        			<span class="dc-category__tag__content">Master</span>
        			<span class="dc-category__tag__icon dc-icon dc-icon--green dc-icon--size-12">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#checkmark" />
        				</svg>
        			</span>
        		</div>
        		<div class="dc-user-mode__tag dc-u-bgc-red dc-u-ml-8">
        			<button class="dc-user-mode__btn">View Only</button>
        			<div class="dc-u-mh-8">
        				<span class="dc-icon dc-icon--white dc-icon--size-12">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#attention" />
        					</svg>
        				</span>
        			</div>
        		</div>
        		<div class="dc-tag dc-tag--hue dc-u-bgc-orange dc-u-brad-all">
        			Unsaved Changes
        		</div>
        	</div>
        	<div>
        		<div class="dc-btn-multi u-spacing-r1">
        			<button class="dc-btn-multi__child dc-btn--unstyled">Save</button>
        			<button class="dc-btn-multi__child dc-btn-multi__icon dc-btn--unstyled">
        				<span class=" dc-icon dc-icon--primary-darkest dc-icon--size-12">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
        					</svg>
        				</span>
        			</button>
        		</div>
        		<button class="dc-btn dc-btn--tertiary dc-u-color-white dc-btn--sm">
        			<span class="dc-icon dc-icon--white dc-icon--size-12 dc-u-mr-8 dc-icon--flex">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#eye" />
        				</svg>
        			</span>
        			Preview</button>
        	</div>
        </footer>

    Layout

    Hovering the menu items .dc-teach-nav__btn will show a tooltip with the page name. Hovering an active item would still show the tooltip, but the visual state of the navigation item will remain the same.

    <div class="dc-teach-layout">
        	<div class="dc-teach-layout__wrapper">
        		<nav class="dc-teach-nav">
        			<button class="dc-btn--unstyled dc-teach-nav__btn is-active">
        				<span class="dc-icon dc-icon--size-18">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        					</svg>
        				</span>
        			</button>
        			<button class="dc-btn--unstyled dc-teach-nav__btn">
        				<span class="dc-icon dc-icon--size-18">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#attachment" />
        					</svg>
        				</span>
        			</button>
        			<button class="dc-btn--unstyled dc-teach-nav__btn">
        				<span class="dc-icon dc-icon--size-18">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#settings" />
        					</svg>
        				</span>
        			</button>
        			<button class="dc-btn--unstyled dc-teach-nav__btn">
        				<span class="dc-icon dc-icon--size-18">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#notification" />
        					</svg>
        				</span>
        			</button>
        			<button class="dc-btn--unstyled dc-teach-nav__btn">
        				<span class="dc-icon dc-icon--size-18">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#info" />
        					</svg>
        				</span>
        			</button>
        		</nav>
        		<div class="dct-content">
        			<!-- Main Content Goes Here -->
        		</div>
        	</div>
        	<footer class="dct-footer">
        		<a href="#" class="dc-btn dc-btn--sm dct-btn--footer btn-unstyled">
        			<span class="dc-icon dc-icon--size-12 dc-u-mr-8 dc-icon--flex">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_2_left" />
        				</svg>
        			</span>
        			All Courses</a>
        		<div class="dc-u-fx">
        			<h1 class="dct-footer__title">Introduction to R</h1>
        			<div class="dc-category__tag">
        				<span class="dc-category__tag__content">Master</span>
        				<span class="dc-category__tag__icon dc-icon dc-icon--green dc-icon--size-12">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#checkmark" />
        					</svg>
        				</span>
        			</div>
        			<div class="dc-user-mode__tag dc-u-bgc-red dc-u-ml-8">
        				<button class="dc-user-mode__btn">View Only</button>
        				<div class="dc-u-mh-8">
        					<span class="dc-icon dc-icon--white dc-icon--size-12">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#attention" />
        						</svg>
        					</span>
        				</div>
        			</div>
        			<div class="dc-tag dc-tag--hue dc-u-bgc-orange dc-u-brad-all">
        				Unsaved Changes
        			</div>
        		</div>
        		<div>
        			<div class="dc-btn-multi u-spacing-r1">
        				<button class="dc-btn-multi__child dc-btn--unstyled">Save</button>
        				<button class="dc-btn-multi__child dc-btn-multi__icon dc-btn--unstyled">
        					<span class=" dc-icon dc-icon--primary-darkest dc-icon--size-12">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
        						</svg>
        					</span>
        				</button>
        			</div>
        			<button class="dc-btn dc-btn--tertiary dc-u-color-white dc-btn--sm">
        				<span class="dc-icon dc-icon--white dc-icon--size-12 dc-u-mr-8 dc-icon--flex">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#eye" />
        					</svg>
        				</span>
        				Preview</button>
        		</div>
        	</footer>
        </div>

    Mode Indicator

    Mode Indicator

    This shows the mode that the user is currently in. It is currently an inactive button, because it will be clickable in the near future. There's a single modifier in place, future modifiers will need to be documented as options.

    <div class="dc-user-mode__tag dc-u-bgc-red ">
        	<button class="dc-user-mode__btn">View Only</button>
        	<div class="dc-u-mh-8">
        		<span class="dc-icon dc-icon--white dc-icon--size-12">
        			<svg class="dc-icon__svg">
        				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#attention" />
        			</svg>
        		</span>
        	</div>
        </div>

    Named List

    Named List

    A list with a heading and typically radio/label options.

    <ul class="dc-named-list">
        	<li class="dc-named-list__heading">Name</li>
        	<li class="dc-named-list__item">
        		<label class="dc-input-radio">
        			<input class="dc-input-radio__input" id="radio1" name="radio" type="radio">
        			<span class="dc-input-radio__indicator u-fx-center"></span>
        			<span class="dc-input-radio__text">datacamp/mycourse-1</span>
        		</label>
        	</li>
        	<li class="dc-named-list__item">
        		<label class="dc-input-radio">
        			<input class="dc-input-radio__input" id="radio2" name="radio" type="radio">
        			<span class="dc-input-radio__indicator u-fx-center"></span>
        			<span class="dc-input-radio__text">datacamp/mycourse-2</span>
        		</label>
        	</li>
        	<li class="dc-named-list__item">
        		<label class="dc-input-radio">
        			<input class="dc-input-radio__input" id="radio3" name="radio" type="radio">
        			<span class="dc-input-radio__indicator u-fx-center"></span>
        			<span class="dc-input-radio__text">datacamp/mycourse-3</span>
        		</label>
        	</li>
        	<li class="dc-named-list__item">
        		<label class="dc-input-radio">
        			<input class="dc-input-radio__input" id="radio4" name="radio" type="radio">
        			<span class="dc-input-radio__indicator u-fx-center"></span>
        			<span class="dc-input-radio__text">datacamp/mycourse-4</span>
        		</label>
        	</li>
        	<li class="dc-named-list__item">
        		<label class="dc-input-radio">
        			<input class="dc-input-radio__input" id="radio5" name="radio" type="radio">
        			<span class="dc-input-radio__indicator u-fx-center"></span>
        			<span class="dc-input-radio__text">datacamp/mycourse-5</span>
        		</label>
        	</li>
        </ul>

    Onboarding Create

    Onboarding Create

    Onboarding has different options on what content to create: course, challenge or project.

    <div class="dc-edge-to-edge u-spacing-b2">
        	<div class="dc-edge-to-edge__item">
        		<div class="dc-connect-github">
        			<a href="/teach/my/content/github">
        				<strong>Connect your GitHub account</strong>
        			</a>
        			<span class="tooltip-trigger--primary-dark" data-toggle="tooltip" data-placement="auto right" title="Unlock advanced authoring functionalities by linking GitHub. Click to learn more">
        				<span class="dc-icon dc-icon--info.svg dc-icon--size-12 u-spacing-l1">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#info" />
        					</svg>
        				</span>
        			</span>
        		</div>
        	</div>
        	<div class="dc-edge-to-edge__item">
        		<a href="#" class="dc-onboarding-create-content-skip">
        			<strong>Skip</strong>
        			<span class="dc-icon dc-icon--arrow_2_right.svg dc-icon--size-12 u-spacing-l1">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_2_right" />
        				</svg>
        			</span>
        		</a>
        	</div>
        </div>
        
        <div class="dc-onboarding-create-content">
        	<div class="dc-onboarding-create-content__image">
        		<img alt="Illustration " src="https://styleguide-assets.datacamp.com/images/teach/components/onboarding/learn-b5b70350e5.svg" />
        	</div>
        	<div class="dc-onboarding-create-content__info">
        		<h4>Course</h4>
        		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus dapibus magna at rutrum. Sed nec leo quis libero vulputate lacinia. Proin vehicula pharetra nulla, et imperdiet urna gravida eu. Sed maximus ac mauris non pulvinar.</p>
        	</div>
        	<div class="dc-onboarding-create-content__action">
        		<a href="#" class="dc-btn dc-btn--secondary dc-btn--block">Create Course</a>
        	</div>
        </div>
        
        <div class="dc-onboarding-create-content">
        	<div class="dc-onboarding-create-content__image">
        		<img src="https://styleguide-assets.datacamp.com/images/teach/components/onboarding/practice-2d3b99c381.svg" />
        	</div>
        	<div class="dc-onboarding-create-content__info">
        		<h4>Challenge</h4>
        		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus dapibus magna at rutrum. Sed nec leo quis libero vulputate lacinia. Proin vehicula pharetra nulla, et imperdiet urna gravida eu. Sed maximus ac mauris non pulvinar.</p>
        	</div>
        	<div class="dc-onboarding-create-content__action">
        		<a href="#" class="dc-btn dc-btn--secondary dc-btn--block">Create Challenge</a>
        	</div>
        </div>
        
        <div class="dc-onboarding-create-content">
        	<div class="dc-onboarding-create-content__image">
        		<img alt="Illustration " src="https://styleguide-assets.datacamp.com/images/teach/components/onboarding/build-5b1d1cbb77.svg" />
        	</div>
        	<div class="dc-onboarding-create-content__info">
        		<h4>Project</h4>
        		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus dapibus magna at rutrum. Sed nec leo quis libero vulputate lacinia. Proin vehicula pharetra nulla, et imperdiet urna gravida eu. Sed maximus ac mauris non pulvinar.</p>
        	</div>
        	<div class="dc-onboarding-create-content__action">
        		<a href="#" class="dc-btn dc-btn--grey dc-btn--block">Coming soon</a>
        	</div>
        </div>

    Onboarding Dialogue

    Onboarding Dialogue

    <!-- NOTE: remove the `dc-modal--demo` class which is just here for proper displaying in the styleguide -->
        <div class="dc-modal dc-modal--small dc-modal--demo" role="dialog">
        	<div class="dc-modal__header">
        		<img alt="Illustration" src="https://styleguide-assets.datacamp.com/images/teach/components/onboarding/learn-b5b70350e5.svg" width="80" />
        		<h2>Creating Course</h2>
        	</div>
        
        	<div class="dc-modal__body">
        		<label class="label u-offscreen">Course name</label>
        		<input class="dc-input--text" type="text" placeholder="Name of the Course*">
        
        		<p>Which technology will you use?*</p>
        		<div class="row dc-onboarding-content-technology">
        			<div class="col-sm-4 u-spacing-b2">
        				<a href="#" class="dc-btn dc-btn--block">
        					<img src="https://styleguide-assets.datacamp.com/images/teach/components/onboarding/r-icon-99f0dbf6c6.svg" alt="R" class="dc-onboarding-content-technology__icon" width="24">
        					<span class="u-spacing-l1">R</span>
        				</a>
        			</div>
        			<div class="col-sm-4 u-spacing-b2">
        				<a href="#" class="dc-btn dc-btn--block">
        					<img src="https://styleguide-assets.datacamp.com/images/teach/components/onboarding/python-icon-c0085bd32d.svg" alt="Python" class="dc-onboarding-content-technology__icon" width="24">
        					<span class="u-spacing-l1">Python</span>
        				</a>
        			</div>
        			<div class="col-sm-4 u-spacing-b2">
        				<a href="#" class="dc-btn dc-btn--block is-selected">
        					<img src="https://styleguide-assets.datacamp.com/images/teach/components/onboarding/sql-icon-e964a1c3b8.svg" alt="SQL" class="dc-onboarding-content-technology__icon" width="24">
        					<span class="u-spacing-l1">SQL</span>
        				</a>
        			</div>
        		</div>
        		<div class="row dc-onboarding-content-technology">
        			<div class="col-sm-4 u-spacing-b2">
        				<a href="#" class="dc-btn dc-btn--block">
        					<img src="https://styleguide-assets.datacamp.com/images/teach/components/onboarding/git-icon-1ae3c5f122.svg" alt="Git" class="dc-onboarding-content-technology__icon" width="24">
        					<span class="u-spacing-l1">Git</span>
        				</a>
        			</div>
        			<div class="col-sm-4 u-spacing-b2">
        				<a href="#" class="dc-btn dc-btn--block">
        					<img src="https://styleguide-assets.datacamp.com/images/teach/components/onboarding/shell-icon-21e5a5f069.svg" alt="Shell" class="dc-onboarding-content-technology__icon" width="24">
        					<span class="u-spacing-l1">Shell</span>
        				</a>
        			</div>
        		</div>
        
        		<button type="button" class="dc-modal__close" aria-label="Close">
        			<span class="dc-icon dc-icon--size-12 dc-icon--white dc-icon--flex">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#close" />
        				</svg>
        			</span>
        		</button>
        	</div>
        
        	<div class="dc-modal__footer">
        		<a href="javascript:;" class="dc-btn dc-btn--secondary dc-btn--block">Create</a>
        		<small>*Mandatory fields</small>
        	</div>
        </div>

    Overlay Pane

    Overlay Pane

    <div class="dc-overlay-pane dc-is-active">
        	<div class="dc-collapse dc-collapse--east dc-collapse--position-left">
        		<span class="dc-icon dc-icon--size-12 dc-icon--grey-oslo dc-icon--flex">
        			<svg class="dc-icon__svg">
        				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_right" />
        			</svg>
        		</span>
        	</div>
        	<header class="dc-overlay-pane__header dc-u-fx-jcsb">
        		<div class="dc-u-fx">
        			<button class="dc-btn dc-btn--link dc-u-mr-16">
        				<span class="dc-icon dc-icon--size-18 dc-icon--primary dc-icon--flex">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_left" />
        					</svg>
        				</span> </button>
        			<h3>
        				Issue #54230
        			</h3>
        		</div>
        		<button class="dc-btn dc-btn--link">
        			<span class="dc-icon dc-icon--size-18 dc-icon--primary dc-icon--flex">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#close" />
        				</svg>
        			</span> </button>
        	</header>
        
        	<div class="dc-overlay-pane__body">
        		<div class="dc-card dc-card--sectioned dc-card--bordered dc-u-mb-32">
        			<div class="dc-card__header">
        				Header
        			</div>
        			<div class="dc-card__body">
        				Body
        			</div>
        			<div class="dc-card__footer">
        				Footer
        			</div>
        		</div>
        	</div>
        	<div class="dc-overlay-pane__banner dc-u-fx-jcsb">
        		<label class="dc-input-checkbox dc-input-checkbox--flex">
        			<input class="dc-input-checkbox__input" type="checkbox">
        			<span class="dc-input-checkbox__indicator u-fx-center">
        				<span class="dc-icon dc-input-checkbox__check">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#checkmark" />
        					</svg>
        				</span>
        			</span>
        			<span class="dc-input-checkbox__text">Let the user know the issue was resolved</span>
        		</label> <a href="#" class="dc-btn dc-btn--green">Resolve Issue</a>
        	</div>
        	<div class="dc-overlay-pane__footer dc-u-fx-jcsb">
        		<button class="dc-btn dc-btn--link dc-u-mr-16">
        			<span class="dc-icon dc-icon--size-18 dc-icon--primary dc-icon--flex dc-u-mr-8">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_2_left" />
        				</svg>
        			</span> Previous Issue
        		</button>
        		<div class="dc-tag dc-tag--hue dc-tag--white dc-u-fw-bold">
        			5 Issues Remaining
        		</div>
        		<button class="dc-btn dc-btn--link dc-u-mr-16">
        			Next Issue
        			<span class="dc-icon dc-icon--size-18 dc-icon--primary dc-icon--flex dc-u-ml-8">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_2_right" />
        				</svg>
        			</span> </button>
        	</div>
        </div>

    Sortable Table

    Sortable Table

    <div class="table-wrapper dc-table-wrapper--bordered">
        	<table class="table table--sortable dc-table--bordered">
        		<thead class="dc-table__thead">
        			<tr>
        				<th class="dc-table__th">Title <a href="javascript:;" class="table__sort-down is-active"></a></th>
        				<th class="dc-table__th">Status <a href="javascript:;" class="table__sort-up"></a></th>
        				<th class="dc-table__th">Last edited <a href="javascript:;" class="table__sort-up"></a></th>
        				<th class="dc-table__th">&nbsp;</th>
        			</tr>
        		</thead>
        		<tbody>
        			<tr class="dc-table__tr">
        				<td>Intro to R</td>
        				<td>Published</td>
        				<td class="table__limited-cell">01/05/2018</td>
        				<td class="table__limited-cell"><a href="#">Edit</a></td>
        			</tr>
        			<tr class="dc-table__tr">
        				<td>Intro to Lorem Ipsum</td>
        				<td>Premium</td>
        				<td class="table__limited-cell">01/05/2018</td>
        				<td class="table__limited-cell">
        					<a href="#">Edit</a>
        					<a class="u-spacing-l4" href="#">Revenue</a>
        				</td>
        			</tr>
        			<tr class="dc-table__tr">
        				<td>Intermediate Socrate</td>
        				<td>Draft</td>
        				<td class="table__limited-cell">01/05/2018</td>
        				<td class="table__limited-cell"><a href="#">Edit</a></td>
        			</tr>
        			<tr class="dc-table__tr">
        				<td>Intro to Lorem Ipsum</td>
        				<td>Published</td>
        				<td class="table__limited-cell">01/05/2018</td>
        				<td class="table__limited-cell">
        					<a href="#">Edit</a>
        					<a class="u-spacing-l4" href="#">Revenue</a>
        				</td>
        			</tr>
        			<tr class="dc-table__tr">
        				<td>Intro to R</td>
        				<td>Premium</td>
        				<td class="table__limited-cell">01/05/2018</td>
        				<td class="table__limited-cell"><a href="#">Edit</a></td>
        			</tr>
        		</tbody>
        	</table>
        </div>

    Table Of Contents

    Table Of Contents Exercise

    Add the .dc-is-active to .dct-toc-list__child class to show chapter content .dct-toc-list__content.

    Add the .dc-is-active to .dct-toc-list-item__link class to show list item active state.

    <div class="dct-toc">
        	<div class="dct-toc-header">
        		<span class="dc-icon dc-icon--grey-oslo dc-icon--size-12 u-spacing-r1">
        			<svg class="dc-icon__svg">
        				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#course" />
        			</svg>
        		</span>
        		<h6 class="dc-u-fs-small">Introduction to R</h6>
        	</div>
        	<ol class="dct-toc-list list-unstyled">
        		<li class="dct-toc-list__child dc-is-active">
        			<div class="dct-toc-list__title u-fx u-fx-jcsb">
        				<button class="dct-toc-btn--icon dc-btn--unstyled u-text-truncate u-spacing-r1 dc-u-ta-left">
        					<span class="dc-icon dc-icon--grey-oslo dc-icon--size-12 u-spacing-r1">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
        						</svg>
        					</span>
        					Chapter Long Name
        				</button>
        				<div class="u-por u-fx u-fx-aic">
        					<button class="dct-toc-btn--icon dc-btn--unstyled">
        						<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        						</svg>
        					</button>
        					<button class="dct-toc-btn--icon dc-btn--unstyled">
        						<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        						</svg>
        					</button>
        				</div>
        			</div>
        			<ol class="dct-toc-list__content list-unstyled">
        				<li class="dct-toc-list__item dct-toc-list__item--drag">
        					<div class="u-fx u-oh dc-u-fxi-fg-1">
        						<span class="u-spacing-r2">
        							<svg class="dc-icon--geyser dct-toc-list__icon--drag dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        							</svg>
        						</span>
        						<button class="dc-btn--unstyled dct-toc-list-item__link u-fx u-fx-aic u-text-truncate dc-is-active">
        							<svg class="dct-toc-list-item__icon u-spacing-r2" width="18" height="18">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        							</svg>
        							<span class="u-fx-f1 u-spacing-r1 u-text-truncate">Exercise 1</span>
        						</button>
        					</div>
        					<div class="u-fx">
        						<button class="dct-toc-btn--icon dc-btn--unstyled">
        							<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        							</svg>
        						</button>
        						<button class="dct-toc-btn--icon dc-btn--unstyled">
        							<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        							</svg>
        						</button>
        					</div>
        				</li>
        				<li class="dct-toc-list__item dct-toc-list__item--drag">
        					<div class="u-fx u-oh dc-u-fxi-fg-1">
        						<span class="u-spacing-r2">
        							<svg class="dc-icon--geyser dct-toc-list__icon--drag dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        							</svg>
        						</span>
        						<button class="dc-btn--unstyled dct-toc-list-item__link u-fx u-fx-aic u-text-truncate">
        							<svg class="dct-toc-list-item__icon u-spacing-r2" width="18" height="18">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        							</svg>
        							<span class="u-fx-f1 u-spacing-r1 u-text-truncate">Exercise 2</span>
        						</button>
        					</div>
        					<div class="u-fx">
        						<button class="dct-toc-btn--icon dc-btn--unstyled">
        							<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        							</svg>
        						</button>
        						<button class="dct-toc-btn--icon dc-btn--unstyled">
        							<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        							</svg>
        						</button>
        					</div>
        				</li>
        				<li class="dct-toc-list__item dct-toc-list__item--drag">
        					<div class="u-fx u-oh dc-u-fxi-fg-1">
        						<span class="u-spacing-r2">
        							<svg class="dc-icon--geyser dct-toc-list__icon--drag dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        							</svg>
        						</span>
        						<button class="dc-btn--unstyled dct-toc-list-item__link u-fx u-fx-aic u-text-truncate">
        							<svg class="dct-toc-list-item__icon u-spacing-r2" width="18" height="18">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        							</svg>
        							<span class="u-fx-f1 u-spacing-r1 u-text-truncate">Exercise Long Name</span>
        						</button>
        					</div>
        					<div class="u-fx">
        						<button class="dct-toc-btn--icon dc-btn--unstyled">
        							<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        							</svg>
        						</button>
        						<button class="dct-toc-btn--icon dc-btn--unstyled">
        							<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        							</svg>
        						</button>
        					</div>
        				</li>
        				<li class="dct-toc-list__item">
        					<button href="#" class="dct-toc-list-item__btn">
        						<span class="dc-icon dc-icon--size-18 u-spacing-r1">
        							<svg class="dc-icon__svg">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        							</svg>
        						</span>
        						Add Exercise</button>
        				</li>
        			</ol>
        		</li>
        		<li class="dct-toc-list__child">
        			<div class="dct-toc-list__title u-fx u-fx-jcsb">
        				<button class="dct-toc-btn--icon dc-btn--unstyled u-text-truncate u-spacing-r1 dc-u-ta-left">
        					<span class="dc-icon dc-icon--grey-oslo dc-icon--size-12 u-spacing-r1">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_right" />
        						</svg>
        					</span>
        					Chapter 2
        				</button>
        				<div class="u-por u-fx u-fx-aic">
        					<div class="dct-toc-list__status"></div>
        					<button class="dct-toc-btn--icon dc-btn--unstyled">
        						<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        						</svg>
        					</button>
        					<button class="dct-toc-btn--icon dc-btn--unstyled">
        						<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        						</svg>
        					</button>
        				</div>
        			</div>
        			<ol class="dct-toc-list__content list-unstyled">
        				<li class="dct-toc-list__item dct-toc-list__item--drag">
        					<div class="u-fx u-oh dc-u-fxi-fg-1">
        						<span class="u-spacing-r2">
        							<svg class="dc-icon--geyser dct-toc-list__icon--drag dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        							</svg>
        						</span>
        						<button class="dc-btn--unstyled dct-toc-list-item__link u-fx u-fx-aic u-text-truncate dc-is-active">
        							<svg class="dct-toc-list-item__icon u-spacing-r2" width="18" height="18">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        							</svg>
        							<span class="u-fx-f1 u-spacing-r1 u-text-truncate">Exercise 1</span>
        						</button>
        					</div>
        					<div class="u-fx">
        						<button class="dct-toc-btn--icon dc-btn--unstyled">
        							<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        							</svg>
        						</button>
        						<button class="dct-toc-btn--icon dc-btn--unstyled">
        							<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        							</svg>
        						</button>
        					</div>
        				</li>
        				<li class="dct-toc-list__item dct-toc-list__item--drag">
        					<div class="u-fx u-oh dc-u-fxi-fg-1">
        						<span class="u-spacing-r2">
        							<svg class="dc-icon--geyser dct-toc-list__icon--drag dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        							</svg>
        						</span>
        						<button class="dc-btn--unstyled dct-toc-list-item__link u-fx u-fx-aic u-text-truncate">
        							<svg class="dct-toc-list-item__icon u-spacing-r2" width="18" height="18">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        							</svg>
        							<span class="u-fx-f1 u-spacing-r1 u-text-truncate">Exercise 2</span>
        						</button>
        					</div>
        					<div class="u-fx">
        						<button class="dct-toc-btn--icon dc-btn--unstyled">
        							<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        							</svg>
        						</button>
        						<button class="dct-toc-btn--icon dc-btn--unstyled">
        							<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        							</svg>
        						</button>
        					</div>
        				</li>
        				<li class="dct-toc-list__item dct-toc-list__item--drag">
        					<div class="u-fx u-oh dc-u-fxi-fg-1">
        						<span class="u-spacing-r2">
        							<svg class="dc-icon--geyser dct-toc-list__icon--drag dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        							</svg>
        						</span>
        						<button class="dc-btn--unstyled dct-toc-list-item__link u-fx u-fx-aic u-text-truncate">
        							<svg class="dct-toc-list-item__icon u-spacing-r2" width="18" height="18">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        							</svg>
        							<span class="u-fx-f1 u-spacing-r1 u-text-truncate">Exercise Long Name</span>
        						</button>
        					</div>
        					<div class="u-fx">
        						<button class="dct-toc-btn--icon dc-btn--unstyled">
        							<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        							</svg>
        						</button>
        						<button class="dct-toc-btn--icon dc-btn--unstyled">
        							<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        							</svg>
        						</button>
        					</div>
        				</li>
        				<li class="dct-toc-list__item">
        					<button href="#" class="dct-toc-list-item__btn">
        						<span class="dc-icon dc-icon--size-18 u-spacing-r1">
        							<svg class="dc-icon__svg">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        							</svg>
        						</span>
        						Add Exercise</button>
        				</li>
        			</ol>
        		</li>
        	</ol>
        	<div class="dct-toc-footer">
        		<button href="#" class="dc-btn dc-btn--primary-light dc-btn--block">
        			<span class="dc-icon dc-icon--white dc-icon--size-18 dc-icon--flex u-spacing-r1">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        				</svg>
        			</span>
        			<span>Add Chapter</span>
        		</button>
        	</div>
        </div>

    Table Of Contents Video

    <div class="dct-toc">
        	<div class="dct-toc-header">
        		<a href="#" class="dct-toc-header__link">
        			<span class="dc-icon dc-icon--currentColor dc-icon--size-12 u-spacing-r1">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_left" />
        				</svg>
        			</span>
        			<span>Back to Overview</span>
        		</a>
        	</div>
        	<ol class="dct-toc-list list-unstyled">
        		<li class="dct-toc-list__child">
        			<div class="dct-toc-list__title u-fx u-fx-jcsb">
        				<button class="dct-toc-btn--icon dc-btn--unstyled u-text-truncate u-spacing-r1 dc-u-ta-left">
        					<span class="dc-icon dc-icon--grey-oslo dc-icon--size-12 u-spacing-r1">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#video-slides" />
        						</svg>
        					</span>
        					Slides - Exercise 1
        				</button>
        				<div class="u-por u-fx u-fx-aic">
        					<button class="dct-toc-btn--icon dc-btn--unstyled">
        						<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        						</svg>
        					</button>
        					<button class="dct-toc-btn--icon dc-btn--unstyled">
        						<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        						</svg>
        					</button>
        				</div>
        			</div>
        			<ol class="u-spacing-r2 list-unstyled">
        				<li class="dct-toc-list__item dct-toc-list__item--drag">
        					<div class="u-fx u-oh">
        						<span class="u-spacing-r2">
        							<svg class="dc-icon--geyser dct-toc-list__icon--drag dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        							</svg>
        						</span>
        						<button class="dc-btn--unstyled dct-toc-list-item__link u-fx u-fx-aic u-text-truncate">
        							<svg class="dct-toc-list-item__icon u-spacing-r2" width="18" height="18">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        							</svg>
        							<span class="u-fx-f1 u-spacing-r1 u-text-truncate">Title Slide</span>
        						</button>
        					</div>
        					<div class="u-fx">
        						<button class="dct-toc-btn--icon dc-btn--unstyled">
        							<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        							</svg>
        						</button>
        						<button class="dct-toc-btn--icon dc-btn--unstyled">
        							<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        							</svg>
        						</button>
        					</div>
        				</li>
        				<li class="dct-toc-list__item dct-toc-list__item--drag">
        					<div class="u-fx u-oh">
        						<span class="u-spacing-r2">
        							<svg class="dc-icon--geyser dct-toc-list__icon--drag dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#bars" />
        							</svg>
        						</span>
        						<button class="dc-btn--unstyled dct-toc-list-item__link u-fx u-fx-aic u-text-truncate">
        							<svg class="dct-toc-list-item__icon u-spacing-r2" width="18" height="18">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#code-brackets" />
        							</svg>
        							<span class="u-fx-f1 u-spacing-r1 u-text-truncate">Slide Extra Long Name</span>
        						</button>
        					</div>
        					<div class="u-fx">
        						<button class="dct-toc-btn--icon dc-btn--unstyled">
        							<svg class="dc-icon--primary u-spacing-r2 dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#write" />
        							</svg>
        						</button>
        						<button class="dct-toc-btn--icon dc-btn--unstyled">
        							<svg class="dc-icon--red dct-toc-list__icon--controls" width="12" height="12">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#trash" />
        							</svg>
        						</button>
        					</div>
        				</li>
        				<li class="dct-toc-list__item">
        					<button href="#" class="dct-toc-list-item__btn">
        						<span class="dc-icon dc-icon--size-18 u-spacing-r1">
        							<svg class="dc-icon__svg">
        								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        							</svg>
        						</span>
        						Add Slide</button>
        				</li>
        			</ol>
        		</li>
        	</ol>
        </div>

    Video Editor

    Video Editor

    <section class="dc-video-editor">
        	<div class="u-fx-center dc-video-editor__controls">
        		<button class="dc-btn--unstyled dc-video-editor__skip-start">
        			<span class=" dc-icon dc-icon--white dc-icon--size-12">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#video-prev-slide" />
        				</svg>
        			</span>
        		</button>
        		<button class="dc-btn--unstyled dc-video-editor__rewind">
        			<span class=" dc-icon dc-icon--white dc-icon--size-18">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#video-reverse" />
        				</svg>
        			</span>
        		</button>
        		<button class="dc-btn--unstyled dc-video-editor__play">
        			<span class=" dc-icon dc-icon--white dc-icon--size-24">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#video-play" />
        				</svg>
        			</span>
        		</button>
        		<button class="dc-btn--unstyled dc-video-editor__forward">
        			<span class=" dc-icon dc-icon--white dc-icon--size-18">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#video-forward" />
        				</svg>
        			</span>
        		</button>
        		<button class="dc-btn--unstyled dc-video-editor__skip-end">
        			<span class=" dc-icon dc-icon--white dc-icon--size-12">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#video-next-slide" />
        				</svg>
        			</span>
        		</button>
        	</div>
        	<div class="dc-video-editor__progress">
        		<ul class="dc-video-editor__progress-markers u-spacing-l4 u-spacing-r4">
        			<li class="dc-video-editor__progress-marker">00:00</li>
        			<li class="dc-video-editor__progress-marker">00:10</li>
        			<li class="dc-video-editor__progress-marker">00:20</li>
        			<li class="dc-video-editor__progress-marker">00:30</li>
        			<li class="dc-video-editor__progress-marker">00:40</li>
        		</ul>
        		<div class="dc-video-editor__progress-bar">
        			<div class="dc-range-slider dc-range-slider--video">
        				<div class="dc-range-slider__fill" style="width: 12%;">
        					<div class="dc-range-slider__handle"></div>
        				</div>
        			</div>
        		</div>
        	</div>
        	<ul class="dc-video-editor__slides">
        		<li class="dc-video-editor__slide dc-has-range-slider--slide">
        			<div class="dc-range-slider dc-range-slider--slide">
        				<div class="dc-range-slider__fill">
        					<div class="dc-range-slider__handle"></div>
        				</div>
        			</div>
        			<span class="dc-video-editor__slide-title">Title Slide</span>
        		</li>
        		<li class="dc-video-editor__slide">
        			<span class="dc-video-editor__slide-title">Slide 1</span>
        		</li>
        		<li class="dc-video-editor__slide">
        			<span class="dc-video-editor__slide-title">Slide 2</span>
        		</li>
        		<li class="dc-video-editor__slide">
        			<span class="dc-video-editor__slide-title">Final Slide</span>
        		</li>
        	</ul>
        	<div class="dc-video-editor__actions">
        		<div class="dc-btn-multi dc-btn-multi--white">
        			<button class="dc-btn-multi__child dc-btn-multi__icon dc-btn--unstyled">
        				<span class=" dc-icon dc-icon--grey-oslo dc-icon--size-12 dc-video-editor__icon-backward">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
        					</svg>
        				</span>
        			</button>
        			<button class="dc-btn-multi__child dc-btn--unstyled">00:00</button>
        		</div>
        		<button class="dc-btn dc-btn--primary dc-btn--sm">
        			<span class=" dc-icon dc-icon--white dc-icon--size-18 dc-icon--flex dc-video-editor__icon-backward u-spacing-r2">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        				</svg>
        			</span>
        			New Slide At 00:24
        		</button>
        		<div class="dc-btn-multi dc-btn-multi--white">
        			<button class="dc-btn-multi__child dc-btn--unstyled">00:10</button>
        			<button class="dc-btn-multi__child dc-btn-multi__icon dc-btn--unstyled">
        				<span class=" dc-icon dc-icon--grey-oslo dc-icon--size-12 dc-video-editor__icon-forward">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
        					</svg>
        				</span>
        			</button>
        		</div>
        	</div>
        </section>

    Video Editor Inner Slide

    <section class="dc-video-editor">
        	<div class="u-fx-center dc-video-editor__controls">
        		<button class="dc-btn--unstyled dc-video-editor__skip-start">
        			<span class=" dc-icon dc-icon--white dc-icon--size-12">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#video-prev-slide" />
        				</svg>
        			</span>
        		</button>
        		<button class="dc-btn--unstyled dc-video-editor__rewind">
        			<span class=" dc-icon dc-icon--white dc-icon--size-18">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#video-reverse" />
        				</svg>
        			</span>
        		</button>
        		<button class="dc-btn--unstyled dc-video-editor__play">
        			<span class=" dc-icon dc-icon--white dc-icon--size-24">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#video-play" />
        				</svg>
        			</span>
        		</button>
        		<button class="dc-btn--unstyled dc-video-editor__forward">
        			<span class=" dc-icon dc-icon--white dc-icon--size-18">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#video-forward" />
        				</svg>
        			</span>
        		</button>
        		<button class="dc-btn--unstyled dc-video-editor__skip-end">
        			<span class=" dc-icon dc-icon--white dc-icon--size-12">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#video-next-slide" />
        				</svg>
        			</span>
        		</button>
        	</div>
        	<div class="dc-video-editor__progress">
        		<ul class="dc-video-editor__progress-markers u-spacing-l4 u-spacing-r4">
        			<li class="dc-video-editor__progress-marker">00:00</li>
        			<li class="dc-video-editor__progress-marker">00:10</li>
        			<li class="dc-video-editor__progress-marker">00:20</li>
        			<li class="dc-video-editor__progress-marker">00:30</li>
        			<li class="dc-video-editor__progress-marker">00:40</li>
        		</ul>
        		<div class="dc-video-editor__progress-bar">
        			<div class="dc-range-slider dc-range-slider--video">
        				<div class="dc-range-slider__fill" style="width: 12%;">
        					<div class="dc-range-slider__handle"></div>
        				</div>
        			</div>
        		</div>
        	</div>
        	<ul class="dc-video-editor__slides">
        		<li class="dc-video-editor__slide">
        			<span class="dc-video-editor__slide-title">What's a factor and why would you use it?</span>
        		</li>
        		<li class="dc-video-editor__slide dc-has-range-slider--slide">
        			<div class="dc-range-slider dc-range-slider--slide">
        				<div class="dc-range-slider__fill">
        					<div class="dc-range-slider__handle dc-range-slider__handle--first"></div>
        					<div class="dc-range-slider__handle"></div>
        				</div>
        			</div>
        			<span class="dc-video-editor__slide-title">What's a factor and why would you use it? (2)</span>
        		</li>
        		<li class="dc-video-editor__slide">
        			<span class="dc-video-editor__slide-title">What's a factor and why would you use it? (3)</span>
        		</li>
        		<li class="dc-video-editor__slide">
        			<span class="dc-video-editor__slide-title">Factor levels</span>
        		</li>
        		<li class="dc-video-editor__slide">
        			<span class="dc-video-editor__slide-title">Summarizing a factor</span>
        		</li>
        		<li class="dc-video-editor__slide">
        			<span class="dc-video-editor__slide-title">Battle of the sexes</span>
        		</li>
        		<li class="dc-video-editor__slide">
        			<span class="dc-video-editor__slide-title">Ordered factors</span>
        		</li>
        		<li class="dc-video-editor__slide">
        			<span class="dc-video-editor__slide-title">Ordered factors (2)</span>
        		</li>
        		<li class="dc-video-editor__slide">
        			<span class="dc-video-editor__slide-title">Comparing ordered factors</span>
        		</li>
        	</ul>
        	<div class="dc-video-editor__actions">
        		<div class="dc-btn-multi dc-btn-multi--white">
        			<button class="dc-btn-multi__child dc-btn-multi__icon dc-btn--unstyled">
        				<span class=" dc-icon dc-icon--grey-oslo dc-icon--size-12 dc-video-editor__icon-backward">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
        					</svg>
        				</span>
        			</button>
        			<button class="dc-btn-multi__child dc-btn--unstyled">00:00</button>
        		</div>
        		<button class="dc-btn dc-btn--primary dc-btn--sm">
        			<span class=" dc-icon dc-icon--white dc-icon--size-18 dc-icon--flex dc-video-editor__icon-backward u-spacing-r2">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        				</svg>
        			</span>
        			New Slide At 00:24
        		</button>
        		<div class="dc-btn-multi dc-btn-multi--white">
        			<button class="dc-btn-multi__child dc-btn--unstyled">00:10</button>
        			<button class="dc-btn-multi__child dc-btn-multi__icon dc-btn--unstyled">
        				<span class=" dc-icon dc-icon--grey-oslo dc-icon--size-12 dc-video-editor__icon-forward">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
        					</svg>
        				</span>
        			</button>
        		</div>
        	</div>
        </section>

    Video Editor Slide Transitions

    <section class="dc-video-editor">
        	<div class="u-fx-center dc-video-editor__controls">
        		<button class="dc-btn--unstyled dc-video-editor__skip-start">
        			<span class=" dc-icon dc-icon--white dc-icon--size-12">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#video-prev-slide" />
        				</svg>
        			</span>
        		</button>
        		<button class="dc-btn--unstyled dc-video-editor__rewind">
        			<span class=" dc-icon dc-icon--white dc-icon--size-18">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#video-reverse" />
        				</svg>
        			</span>
        		</button>
        		<button class="dc-btn--unstyled dc-video-editor__play">
        			<span class=" dc-icon dc-icon--white dc-icon--size-24">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#video-play" />
        				</svg>
        			</span>
        		</button>
        		<button class="dc-btn--unstyled dc-video-editor__forward">
        			<span class=" dc-icon dc-icon--white dc-icon--size-18">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#video-forward" />
        				</svg>
        			</span>
        		</button>
        		<button class="dc-btn--unstyled dc-video-editor__skip-end">
        			<span class=" dc-icon dc-icon--white dc-icon--size-12">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#video-next-slide" />
        				</svg>
        			</span>
        		</button>
        	</div>
        	<div class="dc-video-editor__progress">
        		<ul class="dc-video-editor__progress-markers u-spacing-l4 u-spacing-r4">
        			<li class="dc-video-editor__progress-marker">00:00</li>
        			<li class="dc-video-editor__progress-marker">00:10</li>
        			<li class="dc-video-editor__progress-marker">00:20</li>
        			<li class="dc-video-editor__progress-marker">00:30</li>
        			<li class="dc-video-editor__progress-marker">00:40</li>
        		</ul>
        		<div class="dc-video-editor__progress-bar">
        			<!-- Markers would be inserted within the container, before the slider, with left applied dynamically -->
        			<div class="dc-video-editor__marker dc-video-editor__marker--video" style="left: 5%;"></div>
        			<div class="dc-video-editor__marker dc-video-editor__marker--video" style="left: 75%;"></div>
        			<!-- Fill, with width applied dynamically -->
        			<div class="dc-range-slider dc-range-slider--video">
        				<div class="dc-range-slider__fill" style="width: 12%;">
        					<div class="dc-range-slider__handle"></div>
        				</div>
        			</div>
        		</div>
        	</div>
        	<ul class="dc-video-editor__slides">
        		<li class="dc-video-editor__slide">
        			<span class="dc-video-editor__slide-title">What's a factor and why would you use it?</span>
        		</li>
        		<!-- dc-has-range-slider--slide-transitions is a conditional class that decides to show the arrow for the transitions UI  -->
        		<li class="dc-video-editor__slide dc-has-range-slider--slide dc-has-range-slider--slide-transitions">
        			<!-- Markers would be inserted within the container, before the slider, with left applied dynamically -->
        			<div class="dc-video-editor__marker dc-video-editor__marker--slide" style="left: 80%;"></div>
        			<!-- Fill, with width applied dynamically -->
        			<div class="dc-range-slider dc-range-slider--slide">
        				<div class="dc-range-slider__fill">
        					<div class="dc-range-slider__handle dc-range-slider__handle--first"></div>
        					<div class="dc-range-slider__handle"></div>
        				</div>
        			</div>
        			<span class="dc-video-editor__slide-title">What's a factor and why would you use it? (2)</span>
        		</li>
        		<li class="dc-video-editor__slide">
        			<span class="dc-video-editor__slide-title">What's a factor and why would you use it? (3)</span>
        		</li>
        		<li class="dc-video-editor__slide">
        			<span class="dc-video-editor__slide-title">Factor levels</span>
        		</li>
        		<li class="dc-video-editor__slide">
        			<span class="dc-video-editor__slide-title">Summarizing a factor</span>
        		</li>
        		<li class="dc-video-editor__slide">
        			<span class="dc-video-editor__slide-title">Battle of the sexes</span>
        		</li>
        		<li class="dc-video-editor__slide">
        			<span class="dc-video-editor__slide-title">Ordered factors</span>
        		</li>
        		<li class="dc-video-editor__slide">
        			<span class="dc-video-editor__slide-title">Ordered factors (2)</span>
        		</li>
        		<li class="dc-video-editor__slide">
        			<span class="dc-video-editor__slide-title">Comparing ordered factors</span>
        		</li>
        	</ul>
        	<div class="dc-slide-transitions dc-is-visible">
        		<div class="dc-slide-transitions__progress-bar">
        			<div class="dc-range-slider dc-range-slider--slide-transitions">
        				<!-- Markers would be inserted within the container, before the slider, with left applied dynamically -->
        				<div class="dc-video-editor__marker dc-video-editor__marker--slide-transition" style="left: 20%;"></div>
        				<div class="dc-video-editor__marker dc-video-editor__marker--slide-transition" style="left: 80%;"></div>
        				<!-- Fill, with width applied dynamically -->
        				<div class="dc-range-slider__fill" style="width: 62%;">
        					<div class="dc-range-slider__handle"></div>
        				</div>
        			</div>
        			<ul class="dc-video-editor__progress-markers u-spacing-t1">
        				<li class="dc-video-editor__progress-marker">00:20</li>
        				<li class="dc-video-editor__progress-marker">00:22</li>
        				<li class="dc-video-editor__progress-marker">00:25</li>
        				<li class="dc-video-editor__progress-marker">00:27</li>
        				<li class="dc-video-editor__progress-marker">00:30</li>
        			</ul>
        		</div>
        	</div>
        	<div class="dc-video-editor__actions">
        		<div class="dc-btn-multi dc-btn-multi--white">
        			<button class="dc-btn-multi__child dc-btn-multi__icon dc-btn--unstyled">
        				<span class=" dc-icon dc-icon--grey-oslo dc-icon--size-12 dc-video-editor__icon-backward">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
        					</svg>
        				</span>
        			</button>
        			<button class="dc-btn-multi__child dc-btn--unstyled">00:00</button>
        		</div>
        		<button class="dc-btn dc-btn--primary dc-btn--sm">
        			<span class=" dc-icon dc-icon--white dc-icon--size-18 dc-video-editor__icon-backward u-spacing-r2">
        				<svg class="dc-icon__svg">
        					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#add" />
        				</svg>
        			</span>
        			New Slide At 00:24
        		</button>
        		<div class="dc-btn-multi dc-btn-multi--white">
        			<button class="dc-btn-multi__child dc-btn--unstyled">00:10</button>
        			<button class="dc-btn-multi__child dc-btn-multi__icon dc-btn--unstyled">
        				<span class=" dc-icon dc-icon--grey-oslo dc-icon--size-12 dc-video-editor__icon-forward">
        					<svg class="dc-icon__svg">
        						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
        					</svg>
        				</span>
        			</button>
        		</div>
        	</div>
        </section>