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

Core

These are the base styles that should be in all Data Camp apps. The package currently contains SCSS files that are intended to be imported entirely and a `style-variables.js` that contains the Sass variables as a JS object.

Initial Setup

npm install @datacamp/styleguide

    Import the core file dc-core.scss from node_modules, then 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.

    Colors

    These are the official colors for DataCamp products. Each is available via a SCSS variable and is exported via JS variables. Hex values are present for a reference, please don't use them in code.

    Primary

    $dc-primary #3ac
    $dc-primary-dark #263e63
    $dc-primary-darker #14243e
    $dc-primary-darkest #0c1626
    $dc-primary-light #7ecce2
    $dc-primary-lighter #d5eaef
    $dc-primary-lightest #ebf4f7

    Secondary

    $dc-secondary #ffc844
    $dc-secondary-light #fbe28d

    Grey

    currentColor currentColor
    $dc-geyser #cfdce1
    $dc-grey-dark #3d4251
    $dc-grey-light #d1d3d8
    $dc-grey-lighter #e6eaeb
    $dc-grey-oslo #859094
    $dc-grey #4D5356
    $dc-raven #737a80
    $dc-porcelain #f0f4f5
    transparent transparent
    $dc-white-transparent rgba($dc-white, 0.2)
    $dc-white #fff

    Accents

    $dc-green #36d57d
    $dc-green-light #a5ecc5
    $dc-orange #ff9400
    $dc-orange-dark #ad662c
    $dc-purple #8468c4
    $dc-purple-dark #5d488c
    $dc-purple-light #a786f3
    $dc-red #fe5c5c
    $dc-red-light #ffb5b5

    Gradients

    Use these gradients as a background-image in your markup.

    $dc-gradient-primary 141deg, #2388b0, #3ac
    $dc-gradient-primary-dark 141deg, #20748d, #164d62
    $dc-gradient-primary-light 180deg, rgba(#fff, 0), rgba(#3ac, 0.075)
    $dc-gradient-secondary 0deg, #ffc844, #fcd86c
    $dc-gradient-red-light 180deg, rgba(#fff, 0), rgba(#fe5c5c, 0.075)
    $dc-gradient-chambray-cloudburst 268deg, #405f8f, #1c3050
    $dc-gradient-puertorico-deyork 32deg, #37bbab, #75c97e

    Bucket

    This is a common pattern throughout the apps, where media (usually an image) needs to be aligned with body content. We can use this markup within components to minimize repetition.

    <div class="dc-bucket">
	<div class="dc-bucket__media">
		<img src="http://placehold.it/200/ebf4f7/686f75" alt="" width="100">
	</div>
	<div class="dc-bucket__content">
		<p>Any Content can be used here. The default alignment is <code>flex-start</code> or "top".</p>
	</div>
</div>

    Buttons

    Primary

    DEPRECATED: This button color is no longer being used. Future designs will replace any that exist.

    <a href="#" class="dc-btn dc-btn--primary dc-btn--sm">Primary button</a>

<a href="#" class="dc-btn dc-btn--primary">Primary button</a>

<a href="#" class="dc-btn dc-btn--primary dc-btn--lg">Primary button</a>

    Primary Light

    Used as a supporting button, on <a>, <button>, or <input> elements.

    <a href="#" class="dc-btn dc-btn--primary-light dc-btn--sm">Primary light button</a>

<a href="#" class="dc-btn dc-btn--primary-light">Primary light button</a>

<a href="#" class="dc-btn dc-btn--primary-light dc-btn--lg">Primary light button</a>

    Secondary

    Used for the primary action on a page, on <a>, <button>, or <input> elements.

    <a href="#" class="dc-btn dc-btn--secondary dc-btn--sm">Secondary button</a>

<a href="#" class="dc-btn dc-btn--secondary">Secondary button</a>

<a href="#" class="dc-btn dc-btn--secondary  dc-btn--lg">Secondary button</a>

    Tertiary

    Used for success actions (for example creating/adding/success), on <a>, <button>, or <input> elements.

    <a href="#" class="dc-btn dc-btn--tertiary dc-btn--sm">Tertiary button</a>

<a href="#" class="dc-btn dc-btn--tertiary">Tertiary button</a>

<a href="#" class="dc-btn dc-btn--tertiary dc-btn--lg">Tertiary button</a>

    Green

    Use on <a>, <button>, or <input> elements.

    <a href="#" class="dc-btn dc-btn--green dc-btn--sm">Green button</a>

<a href="#" class="dc-btn dc-btn--green">Green button</a>

<a href="#" class="dc-btn dc-btn--green dc-btn--lg">Green button</a>

    Grey

    Use on <a>, <button>, or <input> elements.

    <a href="#" class="dc-btn dc-btn--grey dc-btn--sm">Grey button</a>

<a href="#" class="dc-btn dc-btn--grey">Grey button</a>

<a href="#" class="dc-btn dc-btn--grey dc-btn--lg">Grey button</a>

    Red

    Used for destructive actions (Example, delete confirmation dialog), actions where a user can not recover from, on <a>, <button>, or <input> elements.

    <a href="#" class="dc-btn dc-btn--red dc-btn--sm">Red button</a>

<a href="#" class="dc-btn dc-btn--red">Red button</a>

<a href="#" class="dc-btn dc-btn--red dc-btn--lg">Red button</a>

    Purple

    Use on <a>, <button>, or <input> elements.

    <a href="#" class="dc-btn dc-btn--purple dc-btn--sm">Purple button</a>

<a href="#" class="dc-btn dc-btn--purple">Purple button</a>

<a href="#" class="dc-btn dc-btn--purple dc-btn--lg">Purple button</a>

    Facebook

    DEPRECATED: Pending removal

    <a class="dc-btn dc-btn--facebook dc-btn--sm" href="#">
	<span class="dc-icon dc-icon--size-18 dc-icon--white dc-icon--flex dc-u-mr-8">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#facebook" />
		</svg>
	</span>
	Facebook
</a>

<a class="dc-btn dc-btn--facebook" href="#">
	<span class="dc-icon dc-icon--size-18 dc-icon--white dc-icon--flex dc-u-mr-8">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#facebook" />
		</svg>
	</span>
	Facebook
</a>

<a class="dc-btn dc-btn--facebook dc-btn--lg" href="#">
	<span class="dc-icon dc-icon--size-24 dc-icon--white dc-icon--flex dc-u-mr-16">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#facebook" />
		</svg>
	</span>
	Facebook
</a>

    Linkedin

    DEPRECATED: Pending removal

    <a class="dc-btn dc-btn--linkedin dc-btn--sm" href="#">
	<span class="dc-icon dc-icon--size-18 dc-icon--white dc-icon--flex dc-u-mr-8">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#linkedin" />
		</svg>
	</span>
	LinkedIn
</a>

<a class="dc-btn dc-btn--linkedin" href="#">
	<span class="dc-icon dc-icon--size-18 dc-icon--white dc-icon--flex dc-u-mr-8">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#linkedin" />
		</svg>
	</span>
	LinkedIn
</a>

<a class="dc-btn dc-btn--linkedin dc-btn--lg" href="#">
	<span class="dc-icon dc-icon--size-24 dc-icon--white dc-icon--flex dc-u-mr-16">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#linkedin" />
		</svg>
	</span>
	LinkedIn
</a>

    Google Plus

    DEPRECATED: Pending removal

    <a class="dc-btn dc-btn--google-plus dc-btn--sm" href="#">
	<span class="dc-icon dc-icon--size-18 dc-icon--white dc-icon--flex dc-u-mr-8">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#google_plus_square" />
		</svg>
	</span>
	Google+
</a>

<a class="dc-btn dc-btn--google-plus" href="#">
	<span class="dc-icon dc-icon--size-18 dc-icon--white dc-icon--flex dc-u-mr-8">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#google_plus_square" />
		</svg>
	</span>
	Google+
</a>

<a class="dc-btn dc-btn--google-plus dc-btn--lg" href="#">
	<span class="dc-icon dc-icon--size-24 dc-icon--white dc-icon--flex dc-u-mr-16">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#google_plus_square" />
		</svg>
	</span>
	Google+
</a>

    Button Shadowed

    Used for buttons that have a purpose othar than marketing. For example remove, archive, edit settings, actions. Should not be used for marketing call to actions.

    The .dc-btn--shadowed class adds shadow to a button, but does not a background. It is commonly use with dc-btn--white. If no color class is added, the button will take on the color of the element background.

    <a href="#" class="dc-btn dc-btn--shadowed dc-btn--sm">Submit Answer</a>

<a href="#" class="dc-btn dc-btn--shadowed">Submit Answer</a>

<a href="#" class="dc-btn dc-btn--shadowed dc-btn--lg">Submit Answer</a>

    Button White Shadowed

    The .dc-btn--shadowed class adds shadow to a button, but does not a background. It is commonly use with dc-btn--white. If no color class is added, the button will take on the color of the element background.

    <a href="#" class="dc-btn dc-btn--white dc-btn--shadowed dc-btn--sm">Submit Answer</a>

<a href="#" class="dc-btn dc-btn--white dc-btn--shadowed">Submit Answer</a>

<a href="#" class="dc-btn dc-btn--white dc-btn--shadowed dc-btn--lg">Submit Answer</a>

    Button White Shadowed Green

    The .dc-btn--white-green class adds green to the interactive styles.

    <a href="#" class="dc-btn dc-btn--white dc-btn--white-green dc-btn--shadowed dc-btn--sm">Submit Answer</a>

<a href="#" class="dc-btn dc-btn--white dc-btn--white-green dc-btn--shadowed">Submit Answer</a>

<a href="#" class="dc-btn dc-btn--white dc-btn--white-green dc-btn--shadowed dc-btn--lg">Submit Answer</a>

    Button White Shadowed Red

    The .dc-btn--white-red class adds red to the interactive styles.

    <a href="#" class="dc-btn dc-btn--white dc-btn--white-red dc-btn--shadowed dc-btn--sm">Submit Answer</a>

<a href="#" class="dc-btn dc-btn--white dc-btn--white-red dc-btn--shadowed">Submit Answer</a>

<a href="#" class="dc-btn dc-btn--white dc-btn--white-red dc-btn--shadowed dc-btn--lg">Submit Answer</a>

    Button White

    This dc-btn--white with no shadow. (Change the background color to see them)

    <a href="#" class="dc-btn dc-btn--white dc-btn--sm">Submit Answer</a>

<a href="#" class="dc-btn dc-btn--white">Submit Answer</a>

<a href="#" class="dc-btn dc-btn--white dc-btn--lg">Submit Answer</a>

    Squared

    Used for actions where the icon has a clear purpose and the action is not critical to the function of the feature/app. If it's not clear what the icon is for add a tooltip on hover.

    The .dc-btn--squared class adds explicit square height and width to buttons, they are mostly used with icons. You can combine any dc-btn-- color or size variant.

    <a href="#" class="dc-btn dc-btn--squared dc-btn--bordered dc-btn--sm"> <span class="dc-icon dc-icon--size-18 dc-icon--primary dc-icon--flex">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
		</svg>
	</span> </a>

<a href="#" class="dc-btn dc-btn--squared dc-btn--bordered"> <span class="dc-icon dc-icon--size-18 dc-icon--primary dc-icon--flex">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
		</svg>
	</span> </a>

<a href="#" class="dc-btn dc-btn--squared dc-btn--bordered dc-btn--lg"> <span class="dc-icon dc-icon--size-18 dc-icon--primary dc-icon--flex">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
		</svg>
	</span> </a>

<a href="#" class="dc-btn dc-btn--squared dc-btn--primary"> <span class="dc-icon dc-icon--size-18 dc-icon--white dc-icon--flex">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
		</svg>
	</span> </a>

<a href="#" class="dc-btn dc-btn--squared dc-btn--primary-light"> <span class="dc-icon dc-icon--size-18 dc-icon--white dc-icon--flex">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
		</svg>
	</span> </a>

<a href="#" class="dc-btn dc-btn--squared dc-btn--secondary"> <span class="dc-icon dc-icon--size-18 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_down" />
		</svg>
	</span> </a>

<a href="#" class="dc-btn dc-btn--squared dc-btn--tertiary"> <span class="dc-icon dc-icon--size-18 dc-icon--primary dc-icon--flex">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
		</svg>
	</span> </a>

<a href="#" class="dc-btn dc-btn--squared dc-btn--green"> <span class="dc-icon dc-icon--size-18 dc-icon--white dc-icon--flex">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
		</svg>
	</span> </a>

<a href="#" class="dc-btn dc-btn--squared dc-btn--grey"> <span class="dc-icon dc-icon--size-18 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_down" />
		</svg>
	</span> </a>

<a href="#" class="dc-btn dc-btn--squared dc-btn--red"> <span class="dc-icon dc-icon--size-18 dc-icon--white dc-icon--flex">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
		</svg>
	</span> </a>

<a href="#" class="dc-btn dc-btn--squared dc-btn--purple"> <span class="dc-icon dc-icon--size-18 dc-icon--white dc-icon--flex">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
		</svg>
	</span> </a>

    Button Bordered

    Used for links (read more) or less important actions.

    Expansion of the original dc-btn--tertiary, for bordered buttons of different colors. The default modifier has styles and there are options for additional modifiers. Only one modifier should be added to a button. For example, the LinkedIn button is dc-btn dc-btn--bordered-linkedin.

    class border hover example
    .dc-btn--bordered $dc-grey-lighter $dc-primary Bordered button
    .dc-btn--bordered-grey-light $dc-grey-light $dc-primary Bordered button
    .dc-btn--bordered-facebook $dc-primary $dc-secondary Facebook
    .dc-btn--bordered-google-plus $dc-primary $dc-secondary Google+
    .dc-btn--bordered-linkedin $dc-primary $dc-secondary LinkedIn 
    <a href="#" class="dc-btn dc-btn--bordered dct-btn--controls">
	Bordered
</a>

    Bordered Red

    <a href="#" class="dc-btn dc-btn--bordered-red dc-btn--sm">Error</a>

<a href="#" class="dc-btn dc-btn--bordered-red">Error</a>

<a href="#" class="dc-btn dc-btn--bordered-red dc-btn--lg">Error</a>

<a href="#" class="dc-btn dc-btn--bordered-red dc-btn--sm">
	<span class="dc-icon dc-icon--size-18 dc-icon--red dc-u-mr-8 dc-icon--flex">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#close" />
		</svg>
	</span> Error</a>

    Bordered Green

    <a href="#" class="dc-btn dc-btn--bordered-green dc-btn--sm">Submit Answer</a>

<a href="#" class="dc-btn dc-btn--bordered-green">Submit Answer</a>

<a href="#" class="dc-btn dc-btn--bordered-green dc-btn--lg">Submit Answer</a>

<a href="#" class="dc-btn dc-btn--bordered-green dc-btn--sm">
	<span class="dc-icon dc-icon--size-18 dc-icon--green dc-u-mr-8 dc-icon--flex">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#checkmark" />
		</svg>
	</span> Submit Answer</a>

    Button Inline

    The inline button is a "plain" button, often used with an icon.

    <a href="#" class="dc-btn dc-btn--inline dc-btn--sm">
	Submit Answer
	<span class="dc-icon dc-icon--size-18 dc-icon--primary dc-icon--flex dc-u-ml-8">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#archive" />
		</svg>
	</span>
</a>

<!-- Hack for spacing without adding unrelated classes to buttons-->
<br /><br />

<a href="#" class="dc-btn dc-btn--inline">
	Submit Answer
	<span class="dc-icon dc-icon--size-18 dc-icon--primary dc-icon--flex dc-u-ml-8">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#archive" />
		</svg>
	</span>
</a>

<!-- Hack for spacing without adding unrelated classes to buttons-->
<br />
<br />

<a href="#" class="dc-btn dc-btn--inline dc-btn--lg">
	Submit Answer
	<span class="dc-icon dc-icon--size-18 dc-icon--primary dc-icon--flex dc-u-ml-8">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#archive" />
		</svg>
	</span>
</a>

<!-- Hack for spacing without adding unrelated classes to buttons-->
<br />
<br />

<a href="#" class="dc-btn dc-btn--inline dc-btn--sm">
	<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#archive" />
		</svg>
	</span>
	Submit Answer
</a>

<!-- Hack for spacing without adding unrelated classes to buttons-->
<br />
<br />

<a href="#" class="dc-btn dc-btn--inline">
	<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#archive" />
		</svg>
	</span>
	Submit Answer
</a>

<!-- Hack for spacing without adding unrelated classes to buttons-->
<br />
<br />

<a href="#" class="dc-btn dc-btn--inline dc-btn--lg">
	<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#archive" />
		</svg>
	</span>
	Submit Answer
</a>

    Button Block

    Use the .dc-btn--block modifier to set a button to display: block. It should fill all of the available horizontal space in an element.

    <a href="#" class="dc-btn dc-btn--secondary dc-btn--block">Submit Answer</a>

    Button Small

    Use the .dc-btn--sm modifier for smaller buttons

    <a href="#" class="dc-btn dc-btn--grey dc-btn--sm">Submit Answer</a>

    Button Large

    Use the .dc-btn--lg modifier for larger buttons

    <a href="#" class="dc-btn dc-btn--grey dc-btn--lg">Submit Answer</a>

    Button Disabled

    Use the disabled attribute on a button. A fallback for a class of disabled is available for a, but it will only apply style. The functionality of the a would have to be disabled in another way.

    <button class="dc-btn dc-btn--secondary" disabled>Submit Answer</button>

    Multi Button

    <div class="dc-multi-btn">
	<a class="dc-multi-btn__item dc-multi-btn__text" href="">
		Button
	</a>
	<button class="dc-multi-btn__item dc-multi-btn__icon">
		<span class="dc-icon dc-icon--size-12">
			<svg class="dc-icon__svg">
				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
			</svg>
		</span>
	</button>
</div>

    Multi Button Secondary

    <!-- Small -->
<div class="dc-multi-btn dc-multi-btn--sm dc-multi-btn--secondary">
	<a class="dc-multi-btn__item dc-multi-btn__text" href="">
		Button
	</a>
	<button class="dc-multi-btn__item dc-multi-btn__icon">
		<span class="dc-icon dc-icon--size-12 dc-icon--grey-dark">
			<svg class="dc-icon__svg">
				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
			</svg>
		</span>
	</button>
</div>

<!-- Base -->
<div class="dc-multi-btn dc-multi-btn--secondary">
	<a class="dc-multi-btn__item dc-multi-btn__text" href="">
		Button
	</a>
	<button class="dc-multi-btn__item dc-multi-btn__icon">
		<span class="dc-icon dc-icon--size-18 dc-icon--grey-dark">
			<svg class="dc-icon__svg">
				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
			</svg>
		</span>
	</button>
</div>

<!-- Large -->
<div class="dc-multi-btn dc-multi-btn--lg dc-multi-btn--secondary">
	<a class="dc-multi-btn__item dc-multi-btn__text" href="">
		Button
	</a>
	<button class="dc-multi-btn__item dc-multi-btn__icon">
		<span class="dc-icon dc-icon--size-24 dc-icon--grey-dark">
			<svg class="dc-icon__svg">
				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
			</svg>
		</span>
	</button>
</div>

    Button Loading

    A loading icon can be added to a button and toggled by adding and removing the class dc-is-loading. It is recommended that the dc-btn__spinner element is added and removed from the dom to avoid a possible performance hit since the spinner animates indefinitely.

    <a href="#" class="dc-btn dc-btn--secondary dc-btn--sm dc-u-fx-fdc dc-is-loading">
	<div class="dc-btn__spinner"><span class="dc-icon dc-icon--size-18 dc-icon--grey-dark dc-icon--spinner">
			<svg class="dc-icon__svg">
				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#spinner" />
			</svg>
		</span></div>
	<div class="dc-btn__content">Loading button</div>
</a>

    Edge To Edge

    Edge To Edge

    When content needs to be aligned to the left and right edges of its container, use this markup pattern to contain the content.

    <div class="dc-edge-to-edge">
	<div class="dc-edge-to-edge__item">
		Any content that is left aligned
	</div>
	<div class="dc-edge-to-edge__item">
		Any content that is right aligned
	</div>
</div>

    Xs Edge To Edge

    Alignment will begin at the $dc-bp-xs breakpoint.

    <div class="dc-edge-to-edge@xs">
	<div class="dc-edge-to-edge__item">
		Stacked by default, left aligned at <code>$dc-bp-xs</code>
	</div>
	<div class="dc-edge-to-edge__item">
		Stacked by default, right aligned at <code>$dc-bp-xs</code>
	</div>
</div>

    Sm Edge To Edge

    Alignment will begin at the $dc-bp-sm breakpoint.

    <div class="dc-edge-to-edge@sm">
	<div class="dc-edge-to-edge__item">
		Stacked by default, left aligned at <code>$dc-bp-sm</code>
	</div>
	<div class="dc-edge-to-edge__item">
		Stacked by default, right aligned at <code>$dc-bp-sm</code>
	</div>
</div>

    Md Edge To Edge

    Alignment will begin at the $dc-bp-md breakpoint.

    <div class="dc-edge-to-edge@md">
	<div class="dc-edge-to-edge__item">
		Stacked by default, left aligned at <code>$dc-bp-md</code>
	</div>
	<div class="dc-edge-to-edge__item">
		Stacked by default, right aligned at <code>$dc-bp-md</code>
	</div>
</div>

    Lg Edge To Edge

    Alignment will begin at the $dc-bp-lg breakpoint.

    <div class="dc-edge-to-edge@lg">
	<div class="dc-edge-to-edge__item">
		Stacked by default, left aligned at <code>$dc-bp-lg</code>
	</div>
	<div class="dc-edge-to-edge__item">
		Stacked by default, right aligned at <code>$dc-bp-lg</code>
	</div>
</div>

    Forms

    Text Input

    <label class="dc-label">
	<span class="dc-label__number">1</span>
	First name
</label>
<input class="dc-input--text" type="text" placeholder="Placeholder text">

    Text Input Disabled

    The most reliable way to disable an element is the disabled attribute, but we also have a dc-is-disabled class as backup for when that cannot be done.

    The lock icon should use the icon solution within the app and should be hidden/shown based on the item's status. This will vary depending on the tech stack.

    <label class="dc-label">
	<span class="dc-label__number">1</span>
	First name
	<span class="dc-icon dc-icon--size-18 dc-icon--grey-oslo dc-icon--flex dc-u-ml-8">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#lock" />
		</svg>
	</span></label>
<input class="dc-input--text" type="text" placeholder="Placeholder text" disabled>

<!-- Hack for space -->
<br /><br />

<label class="dc-label">
	<span class="dc-label__number">1</span>
	First name
	<span class="dc-icon dc-icon--size-18 dc-icon--grey-oslo dc-icon--flex dc-u-ml-8">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#lock" />
		</svg>
	</span></label>
<input class="dc-input--text" type="text" placeholder="Placeholder text" value="Sample Text" disabled>

<!-- Hack for space -->
<br /><br />

<label class="dc-label">
	<span class="dc-label__number">1</span>
	First name
	<span class="dc-icon dc-icon--size-18 dc-icon--grey-oslo dc-icon--flex dc-u-ml-8">
		<svg class="dc-icon__svg">
			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#lock" />
		</svg>
	</span></label>
<input class="dc-input--text dc-is-disabled" type="text" placeholder="Placeholder text">

    Email Input

    <div class="dc-input-group">
	<span class="dc-input-group__icon">
		<span class="dc-icon dc-icon--size-18 dc-icon--white dc-icon--flex">
			<svg class="dc-icon__svg">
				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#mail" />
			</svg>
		</span>
	</span>
	<input class="dc-input-group__input dc-input--text" type="email" placeholder="Email address">
</div>

    Input Combo

    This is a replacement of dc-input-combo, allowing for custom caps to be added to each side of inputs.

    modifier result
    .dc-input-combo--start Aligns .dc-input-combo__cap to the start of the div
    .dc-input-combo--end Aligns .dc-input-combo__cap to the end of the div 
    <div class="dc-input-combo dc-input-combo--start">
	<div class="dc-input-combo__cap dc-u-fx-center">
		<!-- This content can be custom and modifieres of cap can be used for styling -->
		<span class="dc-icon dc-icon--size-24 dc-icon--primary dc-icon--flex">
			<svg class="dc-icon__svg">
				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#eye" />
			</svg>
		</span>
	</div>
	<input class="dc-input--text dc-input-combo__input" placeholder="Placeholder text" type="text">
</div>

<!-- Hack for spacing without adding unrelated classes -->
<br />
<br />

<div class="dc-input-combo dc-input-combo--end">
	<input class="dc-input--text dc-input-combo__input" placeholder="Placeholder text" type="text">
	<div class="dc-input-combo__cap dc-u-fx-center">
		<!-- This content can be custom and modifieres of cap can be used for styling -->
		<span class="dc-icon dc-icon--size-24 dc-icon--primary dc-icon--flex">
			<svg class="dc-icon__svg">
				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#eye" />
			</svg>
		</span>
	</div>
</div>

    Textarea

    <textarea class="dc-textarea" type="text" placeholder="DataCamp is awesome beacause..."></textarea>

    Textarea Disabled

    The most reliable way to disable an element is the disabled attribute, but we also have a dc-is-disabled class as backup for when that cannot be done.

    <textarea class="dc-textarea" type="text" placeholder="DataCamp is awesome beacause..." disabled></textarea>

<!-- Hack for space -->
<br /><br />

<textarea class="dc-textarea" type="text" placeholder="DataCamp is awesome beacause..." disabled>Sample text</textarea>

<!-- Hack for space -->
<br /><br />

<textarea class="dc-textarea dc-is-disabled" type="text" placeholder="DataCamp is awesome beacause..."></textarea>

    Select

    <div class="dc-select-container">
	<select class="dc-select">
		<option value="" selected>Select a country...</option>
		<option>Belgium</option>
		<option>USA</option>
		<option>France</option>
	</select>
</div>

    Checkbox

    Standalone checkbox, which has multiple modifiers.

    <label class="dc-input-checkbox">
	<input class="dc-input-checkbox__input" type="checkbox">
	<span class="dc-input-checkbox__indicator">
		<span class="dc-icon dc-input-checkbox__check">
			<svg class="dc-icon__svg">
				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#checkmark" />
			</svg>
		</span>
	</span>
</label>

    Checkbox With Error

    <div class="dc-has-error">
	<label class="dc-input-checkbox">
		<input class="dc-input-checkbox__input" type="checkbox">
		<span class="dc-input-checkbox__indicator">
			<span class="dc-icon dc-input-checkbox__check">
				<svg class="dc-icon__svg">
					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#checkmark" />
				</svg>
			</span>
		</span>
	</label>
</div>

    Checkbox With Label

    <label class="dc-input-checkbox ">
	<input class="dc-input-checkbox__input" type="checkbox">
	<span class="dc-input-checkbox__indicator u-fx-center">
		<span class="dc-icon dc-input-checkbox__check">
			<svg class="dc-icon__svg">
				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#checkmark" />
			</svg>
		</span>
	</span>
	<span class="dc-input-checkbox__text">Checkbox Label</span>
</label>

    Checkbox With Label Error

    <div class="dc-has-error">
	<label class="dc-input-checkbox">
		<input class="dc-input-checkbox__input" type="checkbox">
		<span class="dc-input-checkbox__indicator">
			<span class="dc-icon dc-input-checkbox__check">
				<svg class="dc-icon__svg">
					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#checkmark" />
				</svg>
			</span>
		</span>
		<span class="dc-input-checkbox__text">Checkbox Label</span>
	</label>
</div>

    Checkbox Modifiers

    <table>
	<thead>
		<th>Type</th>
		<th>Default</th>
		<th>Error</th>
		<th>Disabled</th>
	</thead>
	<tr>
		<td>
			Unchecked
		</td>
		<td>
			<label class="dc-input-checkbox">
				<input class="dc-input-checkbox__input" type="checkbox">
				<span class="dc-input-checkbox__indicator">
					<span class="dc-icon dc-input-checkbox__check">
						<svg class="dc-icon__svg">
							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#checkmark" />
						</svg>
					</span>
				</span>
			</label>
		</td>
		<td>
			<div class="dc-has-error">
				<label class="dc-input-checkbox">
					<input class="dc-input-checkbox__input" type="checkbox">
					<span class="dc-input-checkbox__indicator">
						<span class="dc-icon dc-input-checkbox__check">
							<svg class="dc-icon__svg">
								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#checkmark" />
							</svg>
						</span>
					</span>
				</label>
			</div>
		</td>
		<td>
			<label class="dc-input-checkbox">
				<input class="dc-input-checkbox__input" type="checkbox" disabled>
				<span class="dc-input-checkbox__indicator">
					<span class="dc-icon dc-input-checkbox__check">
						<svg class="dc-icon__svg">
							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#checkmark" />
						</svg>
					</span>
				</span>
			</label>
		</td>
		<td>
			<label class="dc-input-checkbox">
				<input class="dc-input-checkbox__input" type="checkbox" disabled checked>
				<span class="dc-input-checkbox__indicator">
					<span class="dc-icon dc-input-checkbox__check">
						<svg class="dc-icon__svg">
							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#checkmark" />
						</svg>
					</span>
				</span>
			</label>
		</td>
	</tr>
	<tr>
		<td>
			With Label
		</td>
		<td>
			<label class="dc-input-checkbox">
				<input class="dc-input-checkbox__input" type="checkbox">
				<span class="dc-input-checkbox__indicator u-fx-center">
					<span class="dc-icon dc-input-checkbox__check">
						<svg class="dc-icon__svg">
							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#checkmark" />
						</svg>
					</span>
				</span>
				<span class="dc-input-checkbox__text">
					Checkbox Label
				</span>
			</label>
		</td>
		<td>
			<div class="dc-has-error">
				<label class="dc-input-checkbox">
					<input class="dc-input-checkbox__input" type="checkbox">
					<span class="dc-input-checkbox__indicator u-fx-center">
						<span class="dc-icon dc-input-checkbox__check">
							<svg class="dc-icon__svg">
								<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#checkmark" />
							</svg>
						</span>
					</span>
					<span class="dc-input-checkbox__text">
						Checkbox Label
					</span>
				</label>
			</div>
		</td>
		<td>
			<label class="dc-input-checkbox">
				<input class="dc-input-checkbox__input" type="checkbox" disabled>
				<span class="dc-input-checkbox__indicator u-fx-center">
					<span class="dc-icon dc-input-checkbox__check">
						<svg class="dc-icon__svg">
							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#checkmark" />
						</svg>
					</span>
				</span>
				<span class="dc-input-checkbox__text">
					Checkbox Label
				</span>
			</label>
		</td>
		<td>
			<label class="dc-input-checkbox">
				<input class="dc-input-checkbox__input" type="checkbox" disabled checked>
				<span class="dc-input-checkbox__indicator u-fx-center">
					<span class="dc-icon dc-input-checkbox__check">
						<svg class="dc-icon__svg">
							<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#checkmark" />
						</svg>
					</span>
				</span>
				<span class="dc-input-checkbox__text">
					Checkbox Label
				</span>
			</label>
		</td>
	</tr>
</table>

    Radio

    <label class="dc-input-radio">
	<input class="dc-input-radio__input" id="radio1" name="radio" type="radio">
	<span class="dc-input-radio__indicator u-fx-center"></span>
</label>

<!-- Second radio is to show the toggling -->
<label class="dc-input-radio u-spacing-t1">
	<input class="dc-input-radio__input" id="radio2" name="radio" type="radio">
	<span class="dc-input-radio__indicator u-fx-center"></span>
</label>

    Radio Error

    <div class="dc-has-error">
	<label class="dc-input-radio">
		<input class="dc-input-radio__input" id="radio1" name="radio" type="radio">
		<span class="dc-input-radio__indicator u-fx-center"></span>
	</label>
</div>

<!-- Second radio is to show the toggling -->
<label class="dc-input-radio u-spacing-t1">
	<input class="dc-input-radio__input" id="radio2" name="radio" type="radio">
	<span class="dc-input-radio__indicator u-fx-center"></span>
</label>

    Radio With Label

    <label class="dc-input-radio">
	<input class="dc-input-radio__input" id="radio1" name="radio" type="radio">
	<span class="dc-input-radio__indicator"></span>
	<span class="dc-input-radio__text">Radio Label</span>
</label>

<!-- Second radio is to show the toggling -->
<label class="dc-input-radio u-spacing-t1">
	<input class="dc-input-radio__input" id="radio2" name="radio" type="radio">
	<span class="dc-input-radio__indicator"></span>
	<span class="dc-input-radio__text">Radio Label</span>
</label>

    Radio Modifiers

    <table style="vertical-align: middle;">
	<thead>
		<th>Type</th>
		<th>Default</th>
		<th>Error</th>
		<th>Disabled</th>
	</thead>
	<tr>
		<td>
			No Label
		</td>
		<td>
			<label class="dc-input-radio">
				<input class="dc-input-radio__input" id="radio1" name="radio-no-label" type="radio">
				<span class="dc-input-radio__indicator"></span>
			</label>
		</td>
		<td>
			<div class="dc-has-error">
				<label class="dc-input-radio">
					<input class="dc-input-radio__input" id="radio2" name="radio-no-label" type="radio">
					<span class="dc-input-radio__indicator"></span>
				</label>
			</div>
		</td>
		<td>
			<label class="dc-input-radio">
				<input class="dc-input-radio__input" id="radio3" name="radio-no-label" type="radio" disabled>
				<span class="dc-input-radio__indicator"></span>
			</label>
		</td>
		<td>
			<label class="dc-input-radio">
				<input class="dc-input-radio__input" id="radio4" name="radio-no-label-disabled" type="radio" disabled checked>
				<span class="dc-input-radio__indicator"></span>
			</label>
		</td>
	</tr>
	<tr>
		<td>
			With Label
		</td>
		<td>
			<label class="dc-input-radio">
				<input class="dc-input-radio__input" id="radio5" name="radio-label" type="radio">
				<span class="dc-input-radio__indicator"></span>
				<span class="dc-input-radio__text">
					Radio Label
				</span>
			</label>
		</td>
		<td>
			<div class="dc-has-error">
				<label class="dc-input-radio">
					<input class="dc-input-radio__input" id="radio6" name="radio-label" type="radio">
					<span class="dc-input-radio__indicator"></span>
					<span class="dc-input-radio__text">
						Radio Label
					</span>
				</label>
			</div>
		</td>
		<td>
			<label class="dc-input-radio">
				<input class="dc-input-radio__input" id="radio7" name="radio-label-disabled" type="radio" disabled>
				<span class="dc-input-radio__indicator"></span>
				<span class="dc-input-radio__text">
					Radio Label
				</span>
			</label>
		</td>
		<td>
			<label class="dc-input-radio">
				<input class="dc-input-radio__input" id="radio8" name="radio-label" type="radio" disabled checked>
				<span class="dc-input-radio__indicator"></span>
				<span class="dc-input-radio__text">
					Radio Label
				</span>
			</label>
		</td>
	</tr>
</table>

    Toggle Switch

    <div class="dc-toggle-switch">
	<span class="dc-toggle-switch__text">Lorem ipsum</span>
	<input class="dc-toggle-switch__input" type="checkbox" id="dc-toggle-switch__input">
	<label class="dc-toggle-switch__label" for="dc-toggle-switch__input"></label>
</div>

    Typography

    All

    Sample of using Lato font with a font weight (400) for body text and a bold font weight (700) for headings. New sizes and line heights applied.

    Variable / Class Font Size - px Font-Size - REM Line Height Multiplier Line Heigh - px Font Weight Letter Spacing
    $dc-font-size-micro 12px 0.75rem 1.5 18px 400 0
    $dc-font-size-small 14px 0.875rem 1.5 21px 400 0
    .dc-chapeau-title 14px 0.875rem 1.5 21px 700 2px
    $dc-font-size-base 16px 1rem 1.5 24px 400 0
    $dc-font-size-h6 16px 1rem 1.25 20px 700 0
    $dc-font-size-h5 18px 1.125rem 1.25 22.5px 700 0
    $dc-font-size-h4 20px 1.125rem 1.25 25px 700 0
    $dc-font-size-h3 24px 1.5rem 1.25 30px 700 0
    $dc-font-size-h2 32px 2rem 1.25 40px 700 0
    $dc-font-size-h1 40px 2.5rem 1.25 50px 700 0 
    <h3 class="dc-fs-h3">
	Course Description
</h3>

<p>
	In this introduction to R, you will master the basics of this beautiful open source language, including factors, lists and data frames. With the knowledge gained in this course, you will be ready to undertake your first very own data analysis. With over 2 million users worldwide R is rapidly becoming the leading programming language in statistics and data science. Every year, the number of R users grows by 40% and an increasing number of organizations are using it in their day-to-day activities. Leverage the power of R by completing this free R online course today!
</p>

    Font

    We use the Lato font with a light font weight (300) for body text and a bold font weight (700) for headings. You can find more information on specific element styles below.

    H1

    40px font-size / 50px line-height

    Use an <h1> or apply .dc-h1 to another element — add the .dc-u-color-white class on dark backgrounds.

    <h1>Heading 1 40px/50px</h1>
<div class="bg-dark">
	<!-- Div is only for context -->
	<h1 class="dc-u-color-white">Heading 1</h1>
	<!-- Div is only for context -->
</div>
<h5 class="dc-h1">H5 styled as Heading 1</h5>

    H2

    32px font-size / 40px line-height

    Use an <h2> or apply .dc-h2 to another element — add the .dc-u-color-white class on dark backgrounds.

    <h2>Heading 2</h2>
<div class="bg-dark">
	<!-- Div is only for context -->
	<h2 class="dc-u-color-white">Heading 2</h2>
	<!-- Div is only for context -->
</div>
<h5 class="dc-h2">H5 styled as Heading 2</h5>

    H3

    24px font-size / 30px line-height

    Use an <h3> or apply .dc-h3 to another element — add the .dc-u-color-white class on dark backgrounds.

    <h3>Heading 3</h3>
<div class="bg-dark">
	<!-- Div is only for context -->
	<h3 class="dc-u-color-white">Heading 3</h3>
	<!-- Div is only for context -->
</div>
<h5 class="dc-h3">H5 styled as Heading 3</h5>

    H4

    20px font-size / 25px line-height

    Use an <h4> or apply .dc-h4 to another element — add the .dc-u-color-white class on dark backgrounds.

    <h4>Heading 4</h4>
<div class="bg-dark">
	<!-- Div is only for context -->
	<h4 class="dc-u-color-white">Heading 4</h4>
	<!-- Div is only for context -->
</div>
<h5 class="dc-h4">H5 styled as Heading 4</h5>

    H5

    18px font-size / 22.5px line-height

    Use an <h5> or apply .dc-h2 to another element — add the .dc-u-color-white class on dark backgrounds.

    <h5>Heading 5</h5>
<div class="bg-dark">
	<!-- Div is only for context -->
	<h5 class="dc-u-color-white">Heading 5</h5>
	<!-- Div is only for context -->
</div>
<h1 class="dc-h5">H1 styled as Heading 5</h1>

    H6

    16px font-size / 20px line-height

    Use an <h6> or apply .dc-h6 to another element — add the .dc-u-color-white class on dark backgrounds.

    <h6>Heading 6</h6>
<div class="bg-dark">
	<!-- Div is only for context -->
	<h6 class="dc-u-color-white">Heading 6</h6>
	<!-- Div is only for context -->
</div>
<h1 class="dc-h6">H1 styled as Heading 6</h1>

    Chapeau Title

    14px font-size / 17.5px line-height / 2px letter-spacing

    Use an <hx> element and apply the .dc-chapeau-title class.

    <h3 class="dc-chapeau-title">Chapeau title</h3>

    Chapeau Title Secondary

    14px font-size / 17.5px line-height / 2px letter-spacing

    Use an <hx> element and apply the .dc-chapeau and .dc-chapeau--secondary classes.

    <!-- Div is only for context -->
<div class="bg-dark">

	<h3 class="dc-chapeau-title dc-chapeau-title--secondary">Chapeau title secondary</h3>

</div>
<!-- Div is only for context -->

    Default Text

    16px font-size / 24px line-height

    Default text (paragraphs etc.) — use a utility class of .dc-u-fs-base or the variable $dc-font-size-base.

    <p>Default text</p>

    Small Text

    14px font-size / 21px line-height

    Use a utility class of .dc-u-fs-small or the variable $dc-font-size-small.

    <p class="dc-u-fs-small">Small text</p>

    Micro Text

    12px font-size / 18px line-height

    Use a utility class of .dc-u-fs-micro or the variable $dc-font-size-micro.

    <p class="dc-u-fs-micro">Micro text</p>

    Hr Line

    <fieldset class="hr-line">
	<legend align="center">OR</legend>
</fieldset>