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="dc-edge-to-edge@sm 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>