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/styleguideReleases 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>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>