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

Learn

These are components specifically for the learn UIs. Currently, campus-app is the only app using it but challenges-frontend and projects-app are on the roadmap.

Initial Setup

npm install @datacamp/styleguide

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

    Updates

    npm update @datacamp/styleguide

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

    Autocomplete

    Modifed popover that is used to suggest code within the editor.

    TODO: Functionality will need to be discussed

    <ul class="dc-autocomplete">
        	<li class="dc-autocomplete__item">
        		<button class="dc-autocomplete__action">
        			<div class="dc-edge-to-edge">
        				<div class="dc-edge-to-edge__item">
        					geom point
        				</div>
        				<div class="dc-edge-to-edge__item dc-autocomplete__meta">
        					local
        				</div>
        			</div>
        		</button>
        	</li>
        	<li class="dc-autocomplete__item">
        		<button class="dc-autocomplete__action">
        			<div class="dc-edge-to-edge">
        				<div class="dc-edge-to-edge__item">
        					mpg
        				</div>
        				<div class="dc-edge-to-edge__item dc-autocomplete__meta">
        					local
        				</div>
        			</div>
        		</button>
        	</li>
        	<li class="dc-autocomplete__item">
        		<button class="dc-autocomplete__action">
        			<div class="dc-edge-to-edge">
        				<div class="dc-edge-to-edge__item">
        					cyl
        				</div>
        				<div class="dc-edge-to-edge__item dc-autocomplete__meta">
        					local
        				</div>
        			</div>
        		</button>
        	</li>
        </ul>

    Buttons

    Invert

    Add the modifier for white text. Use on an element with the .btn--tertiary class.

    <div class="bg-darker">
        	<!-- Div is only for context -->
        	<a href="#" class="dc-btn dc-btn--tertiary dc-btn--sm dc-btn--text-light">Invert button</a>
        	<!-- Div is only for context -->
        </div>

    Previous Plot

    Use a button element.

    <button class="dc-btn dc-btn--sm dc-btn--tertiary">
        	<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 Plot
        </button>

    Chapters With Progress

    The chapter layout, which is implemented within a modal.

    <ol class="chapters">
        	<li class="dc-chapter">
        		<header>
        			<div class="[email protected] dc-edge-to-edge--align-center">
        				<div class="dc-edge-to-edge__item">
        					<div class="dc-chapter__title-wrapper">
        						<span class="dc-chapter__number">
        							1
        						</span>
        						<h4 class="dc-chapter__title">
        							Intro to basics
        						</h4>
        						<p class="dc-chapter__price">
        							Free
        						</p>
        					</div>
        				</div>
        				<div class="dc-edge-to-edge__item dc-chapter__progress">
        					<div class="progress-bar">
        						<div class="progress-bar__fill" role="presentation" style="width: 75%">
        							<span>75%</span>
        						</div>
        					</div>
        				</div>
        			</div>
        		</header>
        		<p class="dc-chapter__description">
        			In this chapter, you will take your first steps with R. You will learn how to use the console as a calculator and how to
        			assign variables. You will also get to know the basic data types in R. Let's get started!
        		</p>
        
        		<ul class="dc-chapter__exercises js-chapter__exercises hidden">
        			<li class="dc-chapter__exercise">
        				<a class="dc-chapter__exercise-link" href="https://campus.datacamp.com/courses/free-introduction-to-r/chapter-1-intro-to-basics-1?ex=1">
        					<img class="chapter__exercise-icon" width="23" height="23" src="https://cdn.datacamp.com/main-app/assets/courses/icon_exercise_interactive-fc6a320c6df96e05d5510a829280db3e77e7d70ae04ece8566bc569dea1afecd.svg" alt="Icon exercise interactive">
        					<h5 class="dc-chapter__exercise-title" title="How it works">How it works</h5>
        					<span class="dc-chapter__exercise-xp">
        						100 xp
        					</span>
        				</a>
        			</li>
        			<li class="dc-chapter__exercise">
        				<a class="dc-chapter__exercise-link" href="https://campus.datacamp.com/courses/free-introduction-to-r/chapter-1-intro-to-basics-1?ex=2">
        					<img class="chapter__exercise-icon" width="23" height="23" src="https://cdn.datacamp.com/main-app/assets/courses/icon_exercise_interactive-fc6a320c6df96e05d5510a829280db3e77e7d70ae04ece8566bc569dea1afecd.svg" alt="Icon exercise interactive">
        					<h5 class="dc-chapter__exercise-title" title="Arithmetic with R">Arithmetic with R</h5>
        					<span class="dc-chapter__exercise-xp">
        						100 xp
        					</span>
        				</a>
        			</li>
        			<li class="dc-chapter__exercise">
        				<a class="dc-chapter__exercise-link" href="https://campus.datacamp.com/courses/free-introduction-to-r/chapter-1-intro-to-basics-1?ex=3">
        					<img class="chapter__exercise-icon" width="23" height="23" src="https://cdn.datacamp.com/main-app/assets/courses/icon_exercise_interactive-fc6a320c6df96e05d5510a829280db3e77e7d70ae04ece8566bc569dea1afecd.svg" alt="Icon exercise interactive">
        					<h5 class="dc-chapter__exercise-title" title="Variable assignment">Variable assignment</h5>
        					<span class="dc-chapter__exercise-xp">
        						100 xp
        					</span>
        				</a>
        			</li>
        			<li class="dc-chapter__exercise">
        				<a class="dc-chapter__exercise-link" href="https://campus.datacamp.com/courses/free-introduction-to-r/chapter-1-intro-to-basics-1?ex=4">
        					<img class="chapter__exercise-icon" width="23" height="23" src="https://cdn.datacamp.com/main-app/assets/courses/icon_exercise_interactive-fc6a320c6df96e05d5510a829280db3e77e7d70ae04ece8566bc569dea1afecd.svg" alt="Icon exercise interactive">
        					<h5 class="dc-chapter__exercise-title" title="Variable assignment (2)">Variable assignment (2)</h5>
        					<span class="dc-chapter__exercise-xp">
        						100 xp
        					</span>
        				</a>
        			</li>
        			<li class="dc-chapter__exercise">
        				<a class="dc-chapter__exercise-link" href="https://campus.datacamp.com/courses/free-introduction-to-r/chapter-1-intro-to-basics-1?ex=5">
        					<img class="chapter__exercise-icon" width="23" height="23" src="https://cdn.datacamp.com/main-app/assets/courses/icon_exercise_interactive-fc6a320c6df96e05d5510a829280db3e77e7d70ae04ece8566bc569dea1afecd.svg" alt="Icon exercise interactive">
        					<h5 class="dc-chapter__exercise-title" title="Variable assignment (3)">Variable assignment (3)</h5>
        					<span class="dc-chapter__exercise-xp">
        						100 xp
        					</span>
        				</a>
        			</li>
        			<li class="dc-chapter__exercise">
        				<a class="dc-chapter__exercise-link" href="https://campus.datacamp.com/courses/free-introduction-to-r/chapter-1-intro-to-basics-1?ex=6">
        					<img class="chapter__exercise-icon" width="23" height="23" src="https://cdn.datacamp.com/main-app/assets/courses/icon_exercise_interactive-fc6a320c6df96e05d5510a829280db3e77e7d70ae04ece8566bc569dea1afecd.svg" alt="Icon exercise interactive">
        					<h5 class="dc-chapter__exercise-title" title="Apples and oranges">Apples and oranges</h5>
        					<span class="dc-chapter__exercise-xp">
        						100 xp
        					</span>
        				</a>
        			</li>
        			<li class="dc-chapter__exercise">
        				<a class="dc-chapter__exercise-link" href="https://campus.datacamp.com/courses/free-introduction-to-r/chapter-1-intro-to-basics-1?ex=7">
        					<img class="chapter__exercise-icon" width="23" height="23" src="https://cdn.datacamp.com/main-app/assets/courses/icon_exercise_interactive-fc6a320c6df96e05d5510a829280db3e77e7d70ae04ece8566bc569dea1afecd.svg" alt="Icon exercise interactive">
        					<h5 class="dc-chapter__exercise-title" title="Basic data types in R">Basic data types in R</h5>
        					<span class="dc-chapter__exercise-xp">
        						100 xp
        					</span>
        				</a>
        			</li>
        			<li class="dc-chapter__exercise">
        				<a class="dc-chapter__exercise-link" href="https://campus.datacamp.com/courses/free-introduction-to-r/chapter-1-intro-to-basics-1?ex=8">
        					<img class="chapter__exercise-icon" width="23" height="23" src="https://cdn.datacamp.com/main-app/assets/courses/icon_exercise_interactive-fc6a320c6df96e05d5510a829280db3e77e7d70ae04ece8566bc569dea1afecd.svg" alt="Icon exercise interactive">
        					<h5 class="dc-chapter__exercise-title" title="What's that data type?">What's that data type?</h5>
        					<span class="dc-chapter__exercise-xp">
        						100 xp
        					</span>
        				</a>
        			</li>
        		</ul>
        
        		<footer class="dc-chapter__footer">
        			<a class="dc-chapter__footer-btn-link js-toggle-chapter-details dc-chapter__footer-btn-link-view js-chapter__footer-btn-link-view" href="" data-toggle-details="" chevron-direction="down">
        				View Chapter Details
        			</a>
        			<a class="dc-chapter__footer-btn dc-btn dc-btn--secondary js-modal-open" data-url="/sign_in_or_up_modal?redirect=%2Fcourses%2Ffree-introduction-to-r%2Fchapters%2F316%2Fcontinue" href="/users/sign_up?redirect=%2Fcourses%2Ffree-introduction-to-r%2Fchapters%2F316%2Fcontinue">Play Chapter Now</a>
        		</footer>
        	</li>
        
        </ol>

    Control

    This holds an icon that is used to change the course UI.

    The icon is interchangeable based on the control, but it requires the .control__action class.

    <div class="control">
        	<span class="dc-icon dc-icon--size-12 dc-icon--grey dc-icon--flex">
        		<svg class="dc-icon__svg">
        			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_left" />
        		</svg>
        	</span>
        </div>

    Feedback

    Feedback

    <section class="dc-feedback">
        	<nav class="dc-feedback-nav">
        		<button class="dc-feedback-nav__item dc-feedback-nav__item--incorrect">
        			<svg class="dc-feedback__icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
        				<path class="cls-1" d="M9,0a9,9,0,1,0,9,9A9,9,0,0,0,9,0ZM9,2.25a6.7,6.7,0,0,1,3.93,1.28,1.06,1.06,0,0,0-.16.11L3.51,12.9A6.74,6.74,0,0,1,9,2.25ZM9,15.75a6.7,6.7,0,0,1-3.9-1.25l9.27-9.27a1.06,1.06,0,0,0,.11-.16A6.74,6.74,0,0,1,9,15.75Z" />
        			</svg>
        		</button>
        		<button class="dc-feedback-nav__item dc-feedback-nav__item--hint is-shown">
        			<svg class="dc-feedback__icon" xmlns="http://www.w3.org/2000/svg" width="13.16" height="18" viewBox="0 0 13.16 18">
        				<title>Hint</title>
        				<path d="M13.16 6.33a6.28 6.28 0 0 1-1.93 4.55 2.83 2.83 0 0 0-.91 1.86.91.91 0 1 1-1.81 0A4.63 4.63 0 0 1 10 9.54a4.46 4.46 0 0 0 1.34-3.21 4.52 4.52 0 0 0-4.52-4.52h-.49a4.52 4.52 0 0 0-3.14 7.77 4.62 4.62 0 0 1 1.46 3.17.91.91 0 1 1-1.81 0A2.81 2.81 0 0 0 2 10.91 6.33 6.33 0 0 1 6.33 0h.49a6.34 6.34 0 0 1 6.33 6.33M10 14.67a3.33 3.33 0 0 1-6.65 0" />
        				<path d="M6.59 13.65a.91.91 0 0 1-.91-.91V7.39a.91.91 0 0 1 1.81 0v5.35a.91.91 0 0 1-.9.91z" />
        			</svg>
        			<span class="dc-feedback__prompt dc-feedback__prompt--hint">Take Hint (-30xp)</span>
        		</button>
        		<button class="dc-feedback-nav__item dc-feedback-nav__item--answer">
        			<svg class="dc-feedback__icon" xmlns="http://www.w3.org/2000/svg" width="21" height="12" viewBox="0 0 33.43 18">
        				<title>Answer</title>
        				<rect x="7.73" y="7.92" width="17.52" height="2.79" rx="1.19" ry="1.19" transform="rotate(-77.27 16.487 9.323)" />
        				<path d="M9 18a1.54 1.54 0 0 1-1.09-.45L.45 10.09a1.54 1.54 0 0 1 0-2.18L7.91.45a1.54 1.54 0 1 1 2.18 2.18L3.73 9l6.37 6.37A1.54 1.54 0 0 1 9 18zM24.43 18a1.54 1.54 0 0 1-1.09-2.63L29.7 9l-6.36-6.37A1.54 1.54 0 1 1 25.52.45L33 7.91a1.54 1.54 0 0 1 0 2.18l-7.46 7.46a1.54 1.54 0 0 1-1.11.45z" />
        			</svg>
        			<span class="dc-feedback__prompt dc-feedback__prompt--answer">Show Answer (-70xp)</span>
        		</button>
        	</nav>
        	<div class="dc-feedback__body">
        		<h6 class="dc-feedback__title">Incorrect submission</h6>
        		<p class="dc-feedback__text">Incorrect. <code>BETWEEN</code> does not just filter values.</p>
        	</div>
        </section>

    Feedback With Incorrect

    <section class="dc-feedback">
        	<nav class="dc-feedback-nav">
        		<button class="dc-feedback-nav__item dc-feedback-nav__item--condensed dc-feedback-nav__item--incorrect is-shown is-active">
        			<svg class="dc-feedback__icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
        				<path class="cls-1" d="M9,0a9,9,0,1,0,9,9A9,9,0,0,0,9,0ZM9,2.25a6.7,6.7,0,0,1,3.93,1.28,1.06,1.06,0,0,0-.16.11L3.51,12.9A6.74,6.74,0,0,1,9,2.25ZM9,15.75a6.7,6.7,0,0,1-3.9-1.25l9.27-9.27a1.06,1.06,0,0,0,.11-.16A6.74,6.74,0,0,1,9,15.75Z" />
        			</svg>
        		</button>
        		<button class="dc-feedback-nav__item dc-feedback-nav__item--hint is-shown">
        			<svg class="dc-feedback__icon" xmlns="http://www.w3.org/2000/svg" width="13.16" height="18" viewBox="0 0 13.16 18">
        				<title>Hint</title>
        				<path d="M13.16 6.33a6.28 6.28 0 0 1-1.93 4.55 2.83 2.83 0 0 0-.91 1.86.91.91 0 1 1-1.81 0A4.63 4.63 0 0 1 10 9.54a4.46 4.46 0 0 0 1.34-3.21 4.52 4.52 0 0 0-4.52-4.52h-.49a4.52 4.52 0 0 0-3.14 7.77 4.62 4.62 0 0 1 1.46 3.17.91.91 0 1 1-1.81 0A2.81 2.81 0 0 0 2 10.91 6.33 6.33 0 0 1 6.33 0h.49a6.34 6.34 0 0 1 6.33 6.33M10 14.67a3.33 3.33 0 0 1-6.65 0" />
        				<path d="M6.59 13.65a.91.91 0 0 1-.91-.91V7.39a.91.91 0 0 1 1.81 0v5.35a.91.91 0 0 1-.9.91z" />
        			</svg>
        			<span class="dc-feedback__prompt dc-feedback__prompt--hint">Take Hint (-30xp)</span>
        		</button>
        		<button class="dc-feedback-nav__item dc-feedback-nav__item--answer">
        			<svg class="dc-feedback__icon" xmlns="http://www.w3.org/2000/svg" width="21" height="12" viewBox="0 0 33.43 18">
        				<title>Answer</title>
        				<rect x="7.73" y="7.92" width="17.52" height="2.79" rx="1.19" ry="1.19" transform="rotate(-77.27 16.487 9.323)" />
        				<path d="M9 18a1.54 1.54 0 0 1-1.09-.45L.45 10.09a1.54 1.54 0 0 1 0-2.18L7.91.45a1.54 1.54 0 1 1 2.18 2.18L3.73 9l6.37 6.37A1.54 1.54 0 0 1 9 18zM24.43 18a1.54 1.54 0 0 1-1.09-2.63L29.7 9l-6.36-6.37A1.54 1.54 0 1 1 25.52.45L33 7.91a1.54 1.54 0 0 1 0 2.18l-7.46 7.46a1.54 1.54 0 0 1-1.11.45z" />
        			</svg>
        			<span class="dc-feedback__prompt dc-feedback__prompt--answer">Show Answer (-70xp)</span>
        		</button>
        	</nav>
        	<div class="dc-feedback__body dc-feedback__body--incorrect is-shown">
        		<h6 class="dc-feedback__title">Incorrect submission</h6>
        		<p class="dc-feedback__text">Incorrect. <code>BETWEEN</code> does not just filter values.</p>
        	</div>
        </section>

    Feedback With Hint

    <section class="dc-feedback">
        	<nav class="dc-feedback-nav">
        		<button class="dc-feedback-nav__item dc-feedback-nav__item--condensed dc-feedback-nav__item--incorrect is-shown">
        			<svg class="dc-feedback__icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
        				<path class="cls-1" d="M9,0a9,9,0,1,0,9,9A9,9,0,0,0,9,0ZM9,2.25a6.7,6.7,0,0,1,3.93,1.28,1.06,1.06,0,0,0-.16.11L3.51,12.9A6.74,6.74,0,0,1,9,2.25ZM9,15.75a6.7,6.7,0,0,1-3.9-1.25l9.27-9.27a1.06,1.06,0,0,0,.11-.16A6.74,6.74,0,0,1,9,15.75Z" />
        			</svg>
        		</button>
        		<button class="dc-feedback-nav__item dc-feedback-nav__item--condensed dc-feedback-nav__item--hint is-shown is-active">
        			<svg class="dc-feedback__icon" xmlns="http://www.w3.org/2000/svg" width="13.16" height="18" viewBox="0 0 13.16 18">
        				<title>Hint</title>
        				<path d="M13.16 6.33a6.28 6.28 0 0 1-1.93 4.55 2.83 2.83 0 0 0-.91 1.86.91.91 0 1 1-1.81 0A4.63 4.63 0 0 1 10 9.54a4.46 4.46 0 0 0 1.34-3.21 4.52 4.52 0 0 0-4.52-4.52h-.49a4.52 4.52 0 0 0-3.14 7.77 4.62 4.62 0 0 1 1.46 3.17.91.91 0 1 1-1.81 0A2.81 2.81 0 0 0 2 10.91 6.33 6.33 0 0 1 6.33 0h.49a6.34 6.34 0 0 1 6.33 6.33M10 14.67a3.33 3.33 0 0 1-6.65 0" />
        				<path d="M6.59 13.65a.91.91 0 0 1-.91-.91V7.39a.91.91 0 0 1 1.81 0v5.35a.91.91 0 0 1-.9.91z" />
        			</svg>
        			<span class="dc-feedback__prompt dc-feedback__prompt--hint">Take Hint (-30xp)</span>
        		</button>
        		<button class="dc-feedback-nav__item dc-feedback-nav__item--answer is-shown">
        			<svg class="dc-feedback__icon" xmlns="http://www.w3.org/2000/svg" width="21" height="12" viewBox="0 0 33.43 18">
        				<title>Answer</title>
        				<rect x="7.73" y="7.92" width="17.52" height="2.79" rx="1.19" ry="1.19" transform="rotate(-77.27 16.487 9.323)" />
        				<path d="M9 18a1.54 1.54 0 0 1-1.09-.45L.45 10.09a1.54 1.54 0 0 1 0-2.18L7.91.45a1.54 1.54 0 1 1 2.18 2.18L3.73 9l6.37 6.37A1.54 1.54 0 0 1 9 18zM24.43 18a1.54 1.54 0 0 1-1.09-2.63L29.7 9l-6.36-6.37A1.54 1.54 0 1 1 25.52.45L33 7.91a1.54 1.54 0 0 1 0 2.18l-7.46 7.46a1.54 1.54 0 0 1-1.11.45z" />
        			</svg>
        			<span class="dc-feedback__prompt dc-feedback__prompt--answer">Show Answer (-70xp)</span>
        		</button>
        	</nav>
        	<div class="dc-feedback__body dc-feedback__body--hint is-shown">
        		<h6 class="dc-feedback__title">Incorrect submission</h6>
        		<p class="dc-feedback__text">Incorrect. <code>BETWEEN</code> does not just filter values.</p>
        	</div>
        </section>

    Feedback With Answer

    <section class="dc-feedback">
        	<nav class="dc-feedback-nav">
        		<button class="dc-feedback-nav__item dc-feedback-nav__item--condensed dc-feedback-nav__item--incorrect is-shown">
        			<svg class="dc-feedback__icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
        				<path class="cls-1" d="M9,0a9,9,0,1,0,9,9A9,9,0,0,0,9,0ZM9,2.25a6.7,6.7,0,0,1,3.93,1.28,1.06,1.06,0,0,0-.16.11L3.51,12.9A6.74,6.74,0,0,1,9,2.25ZM9,15.75a6.7,6.7,0,0,1-3.9-1.25l9.27-9.27a1.06,1.06,0,0,0,.11-.16A6.74,6.74,0,0,1,9,15.75Z" />
        			</svg>
        		</button>
        		<button class="dc-feedback-nav__item dc-feedback-nav__item--condensed dc-feedback-nav__item--hint is-shown">
        			<svg class="dc-feedback__icon" xmlns="http://www.w3.org/2000/svg" width="13.16" height="18" viewBox="0 0 13.16 18">
        				<title>Hint</title>
        				<path d="M13.16 6.33a6.28 6.28 0 0 1-1.93 4.55 2.83 2.83 0 0 0-.91 1.86.91.91 0 1 1-1.81 0A4.63 4.63 0 0 1 10 9.54a4.46 4.46 0 0 0 1.34-3.21 4.52 4.52 0 0 0-4.52-4.52h-.49a4.52 4.52 0 0 0-3.14 7.77 4.62 4.62 0 0 1 1.46 3.17.91.91 0 1 1-1.81 0A2.81 2.81 0 0 0 2 10.91 6.33 6.33 0 0 1 6.33 0h.49a6.34 6.34 0 0 1 6.33 6.33M10 14.67a3.33 3.33 0 0 1-6.65 0" />
        				<path d="M6.59 13.65a.91.91 0 0 1-.91-.91V7.39a.91.91 0 0 1 1.81 0v5.35a.91.91 0 0 1-.9.91z" />
        			</svg>
        			<span class="dc-feedback__prompt dc-feedback__prompt--hint">Take Hint (-30xp)</span>
        		</button>
        		<button class="dc-feedback-nav__item dc-feedback-nav__item--condensed dc-feedback-nav__item--answer is-shown is-active">
        			<svg class="dc-feedback__icon" xmlns="http://www.w3.org/2000/svg" width="21" height="12" viewBox="0 0 33.43 18">
        				<title>Answer</title>
        				<rect x="7.73" y="7.92" width="17.52" height="2.79" rx="1.19" ry="1.19" transform="rotate(-77.27 16.487 9.323)" />
        				<path d="M9 18a1.54 1.54 0 0 1-1.09-.45L.45 10.09a1.54 1.54 0 0 1 0-2.18L7.91.45a1.54 1.54 0 1 1 2.18 2.18L3.73 9l6.37 6.37A1.54 1.54 0 0 1 9 18zM24.43 18a1.54 1.54 0 0 1-1.09-2.63L29.7 9l-6.36-6.37A1.54 1.54 0 1 1 25.52.45L33 7.91a1.54 1.54 0 0 1 0 2.18l-7.46 7.46a1.54 1.54 0 0 1-1.11.45z" />
        			</svg>
        			<span class="dc-feedback__prompt dc-feedback__prompt--answer">Show Answer (-70xp)</span>
        		</button>
        	</nav>
        	<div class="dc-feedback__body dc-feedback__body--answer is-shown">
        		<h6 class="dc-feedback__title">Incorrect submission</h6>
        		<p class="dc-feedback__text">Incorrect. <code>BETWEEN</code> does not just filter values.</p>
        	</div>
        </section>

    Icon Action

    <a href="#" class="ds-icon-action">
        	<span class="dc-icon dc-icon--size-18 dc-icon--grey-oslo dc-icon--hover-primary">
        		<svg class="dc-icon__svg">
        			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#notification" />
        		</svg>
        	</span>
        </a>

    Notifications Popover

    Popover for notifications.

    <section class="dc-notifications-popover">
        	<ol class="dc-notifications-popover__list">
        		<li class="dc-notifications-popover__item">
        			<div class="dc-edge-to-edge">
        				<div class="dc-edge-to-edge__item dc-notifications-popover__body">
        					<i class="dc-notifications-popover__icon"></i>
        					<div class="dc-notifications-popover__message">
        						<p class="dc-notifications-popover__text">Dennis invited you to a group.</p>
        						<small class="dc-notifications-popover__timestamp">about 1 hour ago</small>
        					</div>
        				</div>
        				<div class="dc-edge-to-edge__item">
        					<?xml version="1.0" encoding="utf-8"?>
        					<svg class="dc-notifications-popover__status" width="15" height="15" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
        						<path d="M896 352q-148 0-273 73t-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273-73-273-198-198-273-73zm768 544q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" />
        					</svg>
        				</div>
        			</div>
        		</li>
        		<li class="dc-notifications-popover__item">
        			<div class="dc-edge-to-edge">
        				<div class="dc-edge-to-edge__item dc-notifications-popover__body">
        					<i class="dc-notifications-popover__icon"></i>
        					<div class="dc-notifications-popover__message">
        						<p class="dc-notifications-popover__text">Your group admin has created a group assignment.</p>
        						<small class="dc-notifications-popover__timestamp">about 6 hours ago</small>
        					</div>
        				</div>
        				<div class="dc-edge-to-edge__item">
        					<?xml version="1.0" encoding="utf-8"?>
        					<svg class="dc-notifications-popover__status dc-notifications-popover__status--read" width="15" height="15" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
        						<path d="M896 352q-148 0-273 73t-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273-73-273-198-198-273-73zm768 544q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" />
        					</svg>
        				</div>
        			</div>
        		</li>
        		<li class="dc-notifications-popover__item">
        			<div class="dc-edge-to-edge">
        				<div class="dc-edge-to-edge__item dc-notifications-popover__body">
        					<i class="dc-notifications-popover__icon"></i>
        					<div class="dc-notifications-popover__message">
        						<p class="dc-notifications-popover__text dc-notifications-popover__text--promo">Take a look at our promo!</p>
        						<small class="dc-notifications-popover__timestamp">about 1 day ago</small>
        					</div>
        				</div>
        				<div class="dc-edge-to-edge__item">
        					<svg class="dc-notifications-popover__status dc-notifications-popover__status--promo" width="15" height="15" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
        						<path d="M896 352q-148 0-273 73t-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273-73-273-198-198-273-73zm768 544q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" />
        					</svg>
        				</div>
        			</div>
        		</li>
        	</ol>
        	<a class="dc-notifications-popover__link" href="#">See all notifications</a>
        </section>

    Onboarding

    Onboarding Welcome

    <div class="bg-darker">
        
        	<!-- Onboarding Welcome. The rest is only for context -->
        	<div class="dc-onboarding-welcome">
        		<div class="dc-onboarding-welcome__body">
        			<div>
        				<h2 class="u-spacing-0">Hi There,</h2>
        				<p class="dc-onboarding-welcome__description">Let us show you how to get the most out of your learning experience!</p>
        				<a class="dc-btn dc-btn--secondary" href="#">Get Started</a>
        			</div>
        			<img class="dc-onboarding-welcome__image" width="286" height="258" src="https://styleguide-assets.datacamp.com/images/learn/components/onboarding/onboarding-welcome-2de17ddd94.svg" alt="Man with briefcase looking at screen">
        		</div>
        		<a class="dc-onboarding-welcome__footer" href="#">Skip Tutorial</a>
        	</div>
        	<!-- Onboarding Welcome. The rest is only for context -->
        
        </div>

    Onboarding Tip

    <div class="bg-darker">
        
        	<!-- Onboarding Tip. The rest is only for context -->
        	<div class="dc-onboarding-tip">
        		<h4 class="dc-onboarding-tip__title">Collapse the side panel</h4>
        		<p class="u-spacing-t0">Click here to collapse/expand the exercise panel so you have more space for the code editor.</p>
        		<div class="dc-onboarding-cta">
        			<div class="dc-onboarding-tip__skip">
        				Done? <a class="yellow-link" href="#">Click here to skip</a>
        			</div>
        			<a class="dc-btn dc-btn--primary dc-onboarding-tip__btn" href="#">Got it!</a>
        		</div>
        	</div>
        	<!-- Onboarding Tip. The rest is only for context -->
        
        </div>

    Onboarding Tip Final

    <div class="bg-darker">
        
        	<!-- Onboarding Tip. The rest is only for context -->
        	<div class="dc-onboarding-tip">
        		<p class="u-spacing-t0">Click here to collapse/expand the exercise panel so you have more space for the code editor.</p>
        		<div class="dc-onboarding-cta">
        			<a class="dc-btn dc-btn--secondary dc-onboarding-tip__btn" href="#">Got it!</a>
        		</div>
        	</div>
        	<!-- Onboarding Tip. The rest is only for context -->
        
        
        </div>

    Panels

    Panel

    <section class="dc-panel">
        	<header class="dc-panel__header">
        
        		<div class="dc-edge-to-edge">
        			<div class="dc-edge">
        				<h5 class="dc-panel__title">
        					<span aria-hidden="true" class="dc-icon dc-icon--size-12 dc-icon--grey-dark dc-icon--flex dc-u-mr-8">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#checkmark_circle" />
        						</svg>
        					</span>
        					Exercise
        				</h5>
        			</div>
        
        			<div class="dc-edge">
        				<div class="control">
        					<i class="fa fa-lg fa-angle-left control__action"></i>
        					<span aria-hidden="true" class="dc-icon dc-icon--size-12 dc-icon--grey-dark dc-icon--flex">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_left" />
        						</svg>
        					</span>
        				</div>
        			</div>
        		</div>
        
        	</header>
        
        	<div class="dc-panel__body">
        
        		<h4>Calculate Total Winnings</h4>
        
        		<p>Now that you have the poker and roulette winnings nicely as named vectors, you can start doing some data analytical magic.</p>
        		<p>You want to find out the following type of information:</p>
        
        		<p>
        			How much has been your overall profit or loss per day of the week?
        			<br />
        			Have you lost money over the week in total?
        			<br />
        			Are you winning/losing money on poker or on roulette?
        			<br />
        			To get the answers, you have to do arithmetic calculations on vectors.
        		</p>
        
        		<p>It is important to know that if you sum two vectors in R, it takes the element-wise sum. For example, the following three statements are completely equivalent:</p>
        
        	</div>
        </section>

    Panel With Subpanel

    <section class="dc-panel">
        	<header class="dc-panel__header">
        
        		<div class="dc-edge-to-edge">
        			<div class="dc-edge">
        				<h5 class="dc-panel__title">
        					<span aria-hidden="true" class="dc-icon dc-icon--size-12 dc-icon--grey-dark dc-icon--flex dc-u-mr-8">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#checkmark_circle" />
        						</svg>
        					</span>
        					Exercise
        				</h5>
        			</div>
        
        			<div class="dc-edge">
        				<div class="control">
        					<i class="fa fa-lg fa-angle-left control__action"></i>
        					<span aria-hidden="true" class="dc-icon dc-icon--size-12 dc-icon--grey-dark dc-icon--flex">
        						<svg class="dc-icon__svg">
        							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_left" />
        						</svg>
        					</span>
        				</div>
        			</div>
        		</div>
        
        		<div class="dc-panel__body">
        
        			<h4>Calculate Total Winnings</h4>
        
        			<p>Now that you have the poker and roulette winnings nicely as named vectors, you can start doing some data analytical magic.</p>
        			<p>You want to find out the following type of information:</p>
        
        			<p>
        				How much has been your overall profit or loss per day of the week?
        				<br />
        				Have you lost money over the week in total?
        				<br />
        				Are you winning/losing money on poker or on roulette?
        				<br />
        				To get the answers, you have to do arithmetic calculations on vectors.
        			</p>
        
        			<p>It is important to know that if you sum two vectors in R, it takes the element-wise sum. For example, the following three statements are completely equivalent:</p>
        
        		</div>
        
        		<header class="dc-panel__subheader">
        			<h5 class="dc-panel__title">
        				<i aria-hidden="true" class="fa fa-check-circle-o u-spacing-r1"></i> Instructions
        			</h5>
        
        			<div class="tag tag--xp">100 XP</div>
        		</header>
        
        		<div class="dc-panel__body">
        
        			<ul>
        				<li>Instruction one</li>
        				<li>Instruction two</li>
        			</ul>
        
        			<!-- Feedback Component -->
        
        		</div>
        </section>

    Panel With Tabs

    <section class="dc-panel">
        	<header class="dc-panel__header">
        
        		<div class="dc-edge-to-edge">
        			<div class="dc-edge">
        				<div class="dc-nav-tabs">
        					<button class="dc-nav-tabs__item is-active">
        						Active
        					</button>
        					<button class="dc-nav-tabs__item">
        						Inactive
        					</button>
        				</div>
        			</div>
        
        			<div class="dc-edge">
        				<div class="control">
        					<i class="fa fa-lg fa-angle-left control__action"></i>
        				</div>
        			</div>
        		</div>
        
        	</header>
        
        	<div class="dc-panel__body">
        
        		<h4>Calculate Total Winnings</h4>
        
        		<p>Now that you have the poker and roulette winnings nicely as named vectors, you can start doing some data analytical magic.</p>
        		<p>You want to find out the following type of information:</p>
        
        		<p>
        			How much has been your overall profit or loss per day of the week?
        			<br />
        			Have you lost money over the week in total?
        			<br />
        			Are you winning/losing money on poker or on roulette?
        			<br />
        			To get the answers, you have to do arithmetic calculations on vectors.
        		</p>
        
        		<p>It is important to know that if you sum two vectors in R, it takes the element-wise sum. For example, the following three statements are completely equivalent:</p>
        
        	</div>
        </section>

    Progress Indicator

    Progress indicator for challenges and levels throughout a course.

    <ul class="dc-progress-indicator">
        	<li class="dc-progress-indicator__item">
        		<a class="dc-progress-indicator__bar popover-trigger popover-trigger--primary-dark" href="#" data-toggle="popover" title="" data-content="100% of Chapter 1" data-placement="top" data-trigger="hover">
        			<div class="dc-progress-indicator__fill" role="presentation" style="width: 100%"></div>
        		</a>
        	</li>
        
        	<li class="dc-progress-indicator__item">
        		<a class="dc-progress-indicator__bar popover-trigger popover-trigger--primary-dark" href="#" data-toggle="popover" title="" data-content="44% of Chapter 2" data-placement="top" data-trigger="hover">
        			<div class="dc-progress-indicator__fill" role="presentation" style="width: 44%"></div>
        		</a>
        	</li>
        
        	<li class="dc-progress-indicator__item">
        		<a class="dc-progress-indicator__bar popover-trigger popover-trigger--primary-dark" href="#" data-toggle="popover" title="" data-content="0% of Chapter 3" data-placement="top" data-trigger="hover">
        			<div class="dc-progress-indicator__fill" role="presentation" style="width: 0%"></div>
        		</a>
        	</li>
        </ul>