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/styleguideReleases 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 + 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 + 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 …</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>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>Dropdown
Teach Dropdown
Add a class of .dc-is-active to .dct-dropdown to show the dropdown body.
<div class="dct-dropdown dc-is-active">
<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>
<ul class="dct-dropdown-body">
<li><button class="dropdown-menu-item dc-btn--unstyled">Revert changes</button></li>
<li><button class="dropdown-menu-item dc-btn--unstyled">Save</button></li>
<li><button class="dropdown-menu-item dc-btn--unstyled">Save & Publish</button></li>
</ul>
</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 + 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 + 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="dc-edge-to-edge@sm">
<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
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>Modal
Modal
A generic modal that offers three sizes: .dc-modal--small, .dc-modal--medium, .dc-modal--large.
Use of header and footer are optional.
NOTE: the actual modal will not have a border and will be center aligned on the screen.
<!-- NOTE: remove the `dc-modal--demo` class which is just here for proper displaying in the styleguide -->
<div class="dc-modal dc-modal--medium dc-modal--demo" role="dialog">
<div class="dc-modal__header">
<h1>Import Course</h1>
</div>
<div class="dc-modal__body">
<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>
<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--grey">Import</a>
</div>
</div>Modal Patterns
Edit Exercise
<!-- NOTE: This should be placed inside a `dc-modal` container -->
<div class="dc-modal__body dc-modal__body--centered">
<h4>
<span class="dc-icon dc-icon--size-24 dc-icon--grey-oslo 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#code-brackets"></use>
</svg>
</span>
Normal Exercise
</h4>
<input class="dc-input--text u-spacing-t2 u-spacing-b6" type="text" value="Exercise 1">
<button class="dc-btn dc-btn--secondary">Edit Exercise</button>
</div>Add Chapter
<!-- NOTE: This should be placed inside a `dc-modal` container -->
<div class="dc-modal__body dc-modal__body--centered">
<h4>Add a Chapter</h4>
<input class="dc-input--text u-spacing-t2 u-spacing-b2" type="text" placeholder="Chapter Name">
<textarea class="dc-textarea u-spacing-b6" type="text" placeholder="Chapter Summary"></textarea>
<button class="dc-btn dc-btn--secondary">Add Chapter</button>
</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"> </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>