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

Core Components

These are components that are common among at least 2 apps. If you need an icon or a card, it should come from the Core Components. To avoid unnecessary CSS in all apps, these are opt-in. Each item is an individual import, with the file name(s) in the notes area.

Initial Setup

npm install @datacamp/styleguide

    Import each necessary component by name or import the dc-core-components.scss if the app is using all of the components.

    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.

    Badges

    Custom Track

    The custom track badge is a combination of utility classes and dynamic values, based on customer choices. There is a color value and a name value, which are used to set the fill of the badge and the icon. The fill of the use element with the class of badge-custom-track__color can be set dynamically or the class can be used to override the default fill. To set the size of the badge, change the dc-u-wh-128 to one of the available widths.

    <div class="dc-u-fx-center dc-u-pos-relative dc-u-wh-128">
    	<svg class="dc-u-stretch" viewBox="0 0 232 241" xmlns="http://www.w3.org/2000/svg" width="100%">
    		<defs>
    			<path d="M114 .361c30.864 0 64.371 11.924 100.52 35.77A30 30 0 0 1 228 61.175v104.241a30 30 0 0 1-12.438 24.323c-42.736 30.857-76.59 46.286-101.562 46.286-24.972 0-58.826-15.429-101.562-46.286A30 30 0 0 1 0 165.415V61.174a30 30 0 0 1 13.48-25.042C49.63 12.285 83.136.362 114 .362z" id="a" />
    			<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="c">
    				<stop stop-color="#FFF" stop-opacity=".2" offset="0%" />
    				<stop stop-opacity=".1" offset="100%" />
    			</linearGradient>
    			<path d="M114 .361c30.864 0 64.371 11.924 100.52 35.77A30 30 0 0 1 228 61.175v104.241a30 30 0 0 1-12.438 24.323c-42.736 30.857-76.59 46.286-101.562 46.286-24.972 0-58.826-15.429-101.562-46.286A30 30 0 0 1 0 165.415V61.174a30 30 0 0 1 13.48-25.042C49.63 12.285 83.136.362 114 .362z" id="d" />
    			<linearGradient x1="91.147%" y1="15.351%" x2="64.651%" y2="59.021%" id="f">
    				<stop offset="0%" />
    				<stop stop-opacity="0" offset="100%" />
    			</linearGradient>
    			<linearGradient x1="32.002%" y1="5.632%" x2="50%" y2="27.114%" id="g">
    				<stop offset="0%" />
    				<stop stop-opacity="0" offset="100%" />
    			</linearGradient>
    			<path d="M114 .361c30.864 0 64.371 11.924 100.52 35.77A30 30 0 0 1 228 61.175v104.241a30 30 0 0 1-12.438 24.323c-42.736 30.857-76.59 46.286-101.562 46.286-24.972 0-58.826-15.429-101.562-46.286A30 30 0 0 1 0 165.415V61.174a30 30 0 0 1 13.48-25.042C49.63 12.285 83.136.362 114 .362z" id="h" />
    			<linearGradient x1="50%" y1="0%" x2="50%" y2="97.676%" id="j">
    				<stop stop-color="#DBF0FF" offset="0%" />
    				<stop stop-color="#A8C8DA" offset="100%" />
    			</linearGradient>
    		</defs>
    		<g fill="none" fill-rule="evenodd">
    			<g transform="translate(2 2)">
    				<mask id="b" fill="#fff">
    					<use xlink:href="#a" />
    				</mask>
    				<!-- Custom Color -->
    				<use class="badge-custom-track__color" fill="#868A8D" xlink:href="#a" />
    				<g mask="url(#b)" fill="url(#c)" fill-rule="nonzero">
    					<path d="M-55.89 154.878L65.11-54.7l214.775 124-121 209.578z" />
    				</g>
    			</g>
    			<g transform="translate(2 2)">
    				<mask id="e" fill="#fff">
    					<use xlink:href="#d" />
    				</mask>
    				<g fill-rule="nonzero" opacity=".024" mask="url(#e)">
    					<path d="M135.5 63.173c41.205 0 86.371-21.058 135.5-63.173v238.88a30 30 0 0 1-12.331 24.244c-51.955 37.863-93.011 56.795-123.169 56.795s-71.214-18.932-123.169-56.795A30 30 0 0 1 0 238.879V0c49.129 42.115 94.295 63.173 135.5 63.173z" fill="url(#f)" transform="translate(-50 56)" />
    					<path d="M214 30c56.636 0 118.447 17.912 185.432 53.737A20 20 0 0 1 410 101.374v148.831a30 30 0 0 1-15.289 26.146c-76.36 42.964-136.596 64.446-180.711 64.446-44.115 0-104.352-21.482-180.711-64.446A30 30 0 0 1 18 250.205V101.374a20 20 0 0 1 10.568-17.637C95.553 47.912 157.364 30 214 30z" fill="url(#g)" transform="translate(-50 56)" />
    				</g>
    			</g>
    			<g transform="translate(2 2)">
    				<mask id="i" fill="#fff">
    					<use xlink:href="#h" />
    				</mask>
    				<path d="M114 163c32.83 0 68.598 13.258 107.303 39.773a20 20 0 0 1 8.697 16.5v111.946a30 30 0 0 1-12.426 24.314c-43.594 31.51-78.12 47.264-103.574 47.264-25.455 0-59.98-15.755-103.574-47.264A30 30 0 0 1-2 331.219V219.273a20 20 0 0 1 8.697-16.5C45.402 176.258 81.17 163 114 163z" fill="#000" fill-rule="nonzero" opacity=".077" mask="url(#i)" />
    			</g>
    			<path d="M115 .361c31.08 0 64.77 11.989 101.07 35.936A31 31 0 0 1 230 62.174v104.241a31 31 0 0 1-12.853 25.133c-42.891 30.97-76.914 46.476-102.147 46.476-25.233 0-59.256-15.505-102.147-46.476A31 31 0 0 1 0 166.415V62.174a31 31 0 0 1 13.93-25.877C50.23 12.35 83.92.361 115 .361z" stroke="url(#j)" stroke-width="2" transform="translate(1 1)" />
    			<path d="M116 5.361c-30.217 0-63.174 11.728-98.868 35.275A27 27 0 0 0 5 63.174v104.241a27 27 0 0 0 11.194 21.89c42.269 30.52 75.617 45.72 99.806 45.72 24.189 0 57.537-15.2 99.806-45.72A27 27 0 0 0 227 167.416V63.174a27 27 0 0 0-12.132-22.538C179.174 17.089 146.217 5.36 116 5.36z" stroke="#FFF" stroke-width="6" />
    		</g>
    	</svg>
    	<span class="dc-icon dc-icon--size-18 dc-icon--white dc-u-h-50pc dc-u-w-50pc dc-u-pos-relative">
    		<svg class="dc-icon__svg">
    			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#datacamp" />
    		</svg>
    	</span>
    </div>

    Cards

    Card

    The base card, with minimal padding, used for small UI components. It can be used on most HTML elements.

    Abstract: Cards

    Import all card styles: @import {local path to the package}/core-components/scss/card;

    <div class="dc-card">
    	Small UI
    </div>

    Card Shapes

    Modified .dc-card with alternative square or circle shape.

    Rounded Square: We use this card for everything within our application, we never user straight corners. Circle: Used for empty states, Help tooltips.

    Import all card styles: @import {local path to the package}/core-components/scss/card;

    <div class="dc-card dc-card--square dc-u-mb-32">
    	Square
    </div>
    
    <div class="dc-card dc-card--circle dc-u-fx dc-u-fx-aic dc-u-fx-jcc dc-u-h-80 dc-u-w-80">
    	Circle
    </div>

    Card Content

    Modified .dc-card with increased padding, used for areas with content. It can be used on most HTML elements, but it most likely a container element, like div, article, section, etc.

    Import all card styles: @import {local path to the package}/core-components/scss/card;

    <div class="dc-card dc-card--content">
    	Card with content
    </div>

    Card Border

    Modified .dc-card with a border rather than a shadow. We use this component on white backgrounds because the shadow doesn't work on bright backgrounds.

    Import all card styles: @import {local path to the package}/core-components/scss/card;

    <div class="dc-card dc-card--bordered ">
    	Card with border
    </div>

    Card Shadow

    Used for components on backgrounds other than white. Modified .dc-card with alternative shadow effects:

    • .dc-card--shadowed-sm
    • .dc-card--shadowed-lg
    • .dc-card--shadowed-xl

    Import all card styles: @import {local path to the package}/core-components/scss/card;

    <div class="dc-card dc-card--shadowed-sm dc-u-mb-32">
    	Card with small shadow modifier
    </div>
    
    <div class="dc-card dc-card--shadowed-lg dc-u-mb-32">
    	Card with large shadow modifier
    </div>
    
    <div class="dc-card dc-card--shadowed-xl">
    	Card with extra large shadow modifier
    </div>

    Card Sectioned

    Modified .dc-card with optional sections:

    • .dc-card__header
    • .dc-card__body
    • .dc-card__footer

    Import all card styles: @import {local path to the package}/core-components/scss/card;

    <div class="dc-card dc-card--sectioned ">
    	<div class="dc-card__header">
    		Header
    	</div>
    	<div class="dc-card__body">
    		Body
    	</div>
    	<div class="dc-card__footer">
    		Footer
    	</div>
    </div>

    Card Sectioned Content

    <div class="dc-card dc-card--sectioned dc-card--content">
    	<div class="dc-card__header">
    		Header
    	</div>
    	<div class="dc-card__body">
    		Body
    	</div>
    	<div class="dc-card__footer">
    		Footer
    	</div>
    </div>

    Card Sectioned Bordered

    Add the modifier class .dc-card--sectioned and .dc-card--bordered to the .dc-card root div.

    Import all card styles: @import {local path to the package}/core-components/scss/card;

    <div class="dc-card dc-card--sectioned dc-card--bordered">
    	<div class="dc-card__header">
    		Header
    	</div>
    	<div class="dc-card__body">
    		Body
    	</div>
    	<div class="dc-card__footer">
    		Footer
    	</div>
    </div>

    Card Sectioned Content Bordered

    Add the modifier classes .dc-card--sectioned, .dc-card--content and .dc-card--bordered to the .dc-card root div.

    Import all card styles: @import {local path to the package}/core-components/scss/card;

    <div class="dc-card dc-card--sectioned dc-card--content dc-card--bordered">
    	<div class="dc-card__header">
    		Header
    	</div>
    	<div class="dc-card__body">
    		Body
    	</div>
    	<div class="dc-card__footer">
    		Footer
    	</div>
    </div>

    Card Interactive

    Modified .dc-card with a subtle hover effect.

    Import all card styles: @import {local path to the package}/core-components/scss/card;

    <div class="dc-card dc-card--content dc-card--interactive dc-u-mb-32">
    	Card with a hover effect
    </div>
    
    <div class="dc-card dc-card--content dc-card--bordered dc-card--interactive dc-u-mb-32">
    	Card with border and a hover effect
    </div>
    
    <div class="dc-card dc-card--content dc-card--shadowed-sm dc-card--interactive dc-u-mb-32">
    	Card with a small shadow and a hover effect
    </div>
    
    <div class="dc-card dc-card--content dc-card--shadowed-lg dc-card--interactive dc-u-mb-32">
    	Card with a large shadow and a hover effect
    </div>
    
    <div class="dc-card dc-card--content dc-card--shadowed-xl dc-card--interactive">
    	Card with an extra large shadow and a hover effect
    </div>

    Card Custom

    Modified .dc-card, where .dc-card--custom is used to reset padding to 0. Utility classes or named classes and be used to match the spacing to the designs.

    Import all card styles: @import {local path to the package}/core-components/scss/card;

    <div class="dc-card dc-card--custom dc-u-p-16 dc-u-p-48@lg">
    	Card with custom spacing. This one uses utility classes to have 16px padding on small viewports and 48px on large screens.
    </div>

    Circles

    Circle

    This is base CSS to round an element and set a fixed size to it. Content and styles are added with utility classes.

    <!-- Example with shadow -->
    <div class="
      dc-circle dc-circle--56
      dc-u-bgc-white
      dc-u-bs-lg
      dc-u-color-primary
      dc-u-fw-bold
      dc-u-fx-center">
    	2
    </div>

    Collapse Toggle

    Collapse

    Collapse toggle has directional and positional modifiers. The directional modifiers control which cardinal direction the half circle will point. The direction of the arrow icon is not effected by the modifier classes and is controled by the xlink:href as normal. The positional modifiers control what side the collapse toggle will attach itself to.

    Directional modifiers: dc-collapse--east, dc-collapse--west, dc-collapse--north, dc-collapse--south.

    Positional modifiers: dc-collapse--position-left, dc-collapse--position-right, dc-collapse--position-top, dc-collapse--position-bottom.

    <div class="dc-collapse dc-collapse--east dc-collapse--position-left">
    	<span class="dc-icon dc-icon--size-12 dc-icon--grey-oslo dc-icon--flex">
    		<svg class="dc-icon__svg">
    			<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_right" />
    		</svg>
    	</span>
    </div>

    Collapse Options

    This example shows all the directional and position possiblities for the collapse toggle.

    <div class="dc-u-bs-border dc-u-pos-relative dc-u-h-128 dc-u-w-128">
    	<div class="dc-collapse dc-collapse--east dc-collapse--position-left">
    		<span class="dc-icon dc-icon--size-12 dc-icon--grey-oslo dc-icon--flex">
    			<svg class="dc-icon__svg">
    				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_right" />
    			</svg>
    		</span>
    	</div>
    	<div class="dc-collapse dc-collapse--west dc-collapse--position-left">
    		<span class="dc-icon dc-icon--size-12 dc-icon--grey-oslo dc-icon--flex">
    			<svg class="dc-icon__svg">
    				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_left" />
    			</svg>
    		</span>
    	</div>
    	<div class="dc-collapse dc-collapse--east dc-collapse--position-right">
    		<span class="dc-icon dc-icon--size-12 dc-icon--grey-oslo dc-icon--flex">
    			<svg class="dc-icon__svg">
    				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_right" />
    			</svg>
    		</span>
    	</div>
    	<div class="dc-collapse dc-collapse--west dc-collapse--position-right">
    		<span class="dc-icon dc-icon--size-12 dc-icon--grey-oslo dc-icon--flex">
    			<svg class="dc-icon__svg">
    				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_left" />
    			</svg>
    		</span>
    	</div>
    	<div class="dc-collapse dc-collapse--north dc-collapse--position-top">
    		<span class="dc-icon dc-icon--size-12 dc-icon--grey-oslo dc-icon--flex">
    			<svg class="dc-icon__svg">
    				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_up" />
    			</svg>
    		</span>
    	</div>
    	<div class="dc-collapse dc-collapse--south dc-collapse--position-top">
    		<span class="dc-icon dc-icon--size-12 dc-icon--grey-oslo dc-icon--flex">
    			<svg class="dc-icon__svg">
    				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
    			</svg>
    		</span>
    	</div>
    	<div class="dc-collapse dc-collapse--north dc-collapse--position-bottom">
    		<span class="dc-icon dc-icon--size-12 dc-icon--grey-oslo dc-icon--flex">
    			<svg class="dc-icon__svg">
    				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_up" />
    			</svg>
    		</span>
    	</div>
    	<div class="dc-collapse dc-collapse--south dc-collapse--position-bottom">
    		<span class="dc-icon dc-icon--size-12 dc-icon--grey-oslo dc-icon--flex">
    			<svg class="dc-icon__svg">
    				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#arrow_down" />
    			</svg>
    		</span>
    	</div>
    </div>

    Count Indicator

    Indicator

    <div class="dc-count-indicator dc-count-indicator--red">
    	5
    </div>

    Button With Indicator

    <a href="#" class="dc-btn dc-btn--white dc-btn--shadowed 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#chat" />
    		</svg>
    	</span> Reported Issues
    	<div class="dc-count-indicator dc-count-indicator--red dc-count-indicator--right">
    		5
    	</div>
    </a>
    
    <a href="#" class="dc-btn dc-btn--white dc-btn--shadowed 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#chat" />
    		</svg>
    	</span> Reported Issues
    	<div class="dc-count-indicator dc-count-indicator--red dc-count-indicator--right">
    		99+
    	</div>
    </a>

    Flash Banners

    Dependency

    Flash banners are used for giving feedback when users perform an action. For example submit a form, the flash banner indicates if the action was successful.

    They have a small dependency, in that JS is required to allow them to be closed. The default implementation also has a jQuery dependency.

    Import all flash banner styles: @import {local path to the package}/core-components/scss/flash;

    Source File
    core-components/js/flash.js
    Alternative

    As an alternative, there is example code that can be implemented.

    $(document).ready(function () {
      $('.dc-flash').click(function(event){
        $(this).hide();
      });
    });

    Notice

    Used for warnings that require your attention but doesn't break the flow.

    <div class="dc-flash-wrapper">
    	<div class="dc-flash dc-flash--notice">
    		<div class="dc-flash__content">
    			<strong>Stay tuned!</strong> Visit <a href="#">this page in the meantime</a>.
    		</div>
    		<div class="dc-flash__close">
    			<span class="dc-icon dc-icon--size-12 dc-icon--white dc-icon--flex">
    				<svg class="dc-icon__svg">
    					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#close" />
    				</svg>
    			</span>
    		</div>
    	</div>
    </div>

    Success

    Used for success messages.

    <div class="dc-flash-wrapper">
    	<div class="dc-flash dc-flash--success">
    		<div class="dc-flash__content">
    			<strong>Well done!</strong> You successfully read this important <a href="#">alert message</a>.
    		</div>
    		<div class="dc-flash__close">
    			<span class="dc-icon dc-icon--size-12 dc-icon--white dc-icon--flex">
    				<svg class="dc-icon__svg">
    					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#close" />
    				</svg>
    			</span>
    		</div>
    	</div>
    </div>

    Error

    Used for error messages.

    <div class="dc-flash-wrapper">
    	<div class="dc-flash dc-flash--error">
    		<div class="dc-flash__content">
    			<strong>Oh snap!</strong> Change a <a href="#">few things</a> up and try submitting again.
    		</div>
    		<div class="dc-flash__close">
    			<span class="dc-icon dc-icon--size-12 dc-icon--white dc-icon--flex">
    				<svg class="dc-icon__svg">
    					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#close" />
    				</svg>
    			</span>
    		</div>
    	</div>
    </div>

    Multiple Messages

    <div class="dc-flash-wrapper">
    	<div class="dc-flash dc-flash--success">
    		<div class="dc-flash__content">
    			<strong>Well done!</strong> You successfully read this important <a href="#">alert message</a>.
    		</div>
    		<div class="dc-flash__close">
    			<span class="dc-icon dc-icon--size-12 dc-icon--white dc-icon--flex">
    				<svg class="dc-icon__svg">
    					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#close" />
    				</svg>
    			</span>
    		</div>
    	</div>
    	<div class="dc-flash dc-flash--notice">
    		<div class="dc-flash__content">
    			<strong>Stay tuned!</strong> Visit <a href="#">this page in the meantime</a>.
    		</div>
    		<div class="dc-flash__close">
    			<span class="dc-icon dc-icon--size-12 dc-icon--white dc-icon--flex">
    				<svg class="dc-icon__svg">
    					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#close" />
    				</svg>
    			</span>
    		</div>
    	</div>
    	<div class="dc-flash dc-flash--success">
    		<div class="dc-flash__content">
    			Upload successfully completed
    		</div>
    		<div class="dc-flash__cta">
    			<button class="dc-btn dc-btn--bordered-white">Copy Link</button>
    		</div>
    		<div class="dc-flash__close">
    			<span class="dc-icon dc-icon--size-12 dc-icon--white dc-icon--flex">
    				<svg class="dc-icon__svg">
    					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#close" />
    				</svg>
    			</span>
    		</div>
    	</div>
    	<div class="dc-flash dc-flash--error">
    		<div class="dc-flash__content">
    			<strong>Oh snap!</strong> Change a <a href="#">few things</a> up and try submitting again.
    		</div>
    		<div class="dc-flash__close">
    			<span class="dc-icon dc-icon--size-12 dc-icon--white dc-icon--flex">
    				<svg class="dc-icon__svg">
    					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#close" />
    				</svg>
    			</span>
    		</div>
    	</div>
    	<div class="dc-flash dc-flash--error">
    		<div class="dc-flash__content">
    			<strong>Oh snap!</strong> This is what happens when your flash banner is really long. All this information is really important.
    		</div>
    		<div class="dc-flash__cta">
    			<button class="dc-btn dc-btn--bordered-white">Copy Link</button>
    		</div>
    		<div class="dc-flash__close">
    			<span class="dc-icon dc-icon--size-12 dc-icon--white dc-icon--flex">
    				<svg class="dc-icon__svg">
    					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#close" />
    				</svg>
    			</span>
    		</div>
    	</div>
    </div>

    Headers

    Header Angled Sm

    Angled header, using multiple backgrounds. The left height of the logo accent is ~170px and the angled accent is ~490px.

    <header class="dc-header-angled dc-header-angled--sm">
    
    	<!-- Hack to display, not needed in production -->
    	<div class="dc-u-p-128">&nbsp;</div>
    
    </header>

    Header Angled Xs

    Angled header, using multiple backgrounds. The left height of the logo accent is ~120px and the angled accent is ~420px.

    <header class="dc-header-angled dc-header-angled--xs">
    
    	<!-- Hack to display, not needed in production -->
    	<div class="dc-u-p-128">&nbsp;</div>
    
    </header>

    Header Angled

    Angled header, using multiple backgrounds. The left height of the logo accent is ~170px and the angled accent is ~630px.

    <header class="dc-header-angled">
    
    	<!-- Hack to display, not needed in production -->
    	<div class="dc-u-p-128">&nbsp;</div>
    
    </header>

    Headstones

    Headstone

    The default dc-headstone is 64x64 and it shifts itself up half it's height (32px). For it to break out of a container, any padding has to be cleared from the element. If the dc-u-fx-center utility is used on the dc-headstone element, it's content will be vertically centered inside and outside of the container element.

    A dc-card is used as an example, but is not necessary.

    <div class="dc-card dc-u-pt-0">
    	<div class="dc-headstone dc-u-fx-center">
    		<span class="dc-icon dc-icon--size-64 dc-icon--primary">
    			<svg class="dc-icon__svg">
    				<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#lock" />
    			</svg>
    		</span>
    	</div>
    </div>

    Icons

    The size modifier is a mandatory class. View all icons ↓

    Other options:

    • .dc-icon--{color} class to adjust the icon's color. When no color is provided, the icon will default to currentColor.
    • .dc-icon--hover-{color} class to adjust the icon's hover color.
    • .dc-icon--active-{color}.is-active class to set the icon's active state.
    • .dc-icon--flex class to set the icon's top value to 0. For situations when the parent container has display: flex and align-items: center.

    Import icon styles: @import {local path to the package}/core-components/scss/icon;

    Dependency: Icons require HTML insertion of the symbols.svg file. Please ask in #engineering-frontend for setup examples, based on the experience of other products.

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

    Image File Uploader

    Place the preview image inside the .dc-img-uploader__image-wrapper div and give it(the image) the .dc-img-uploader__image class name.

    Import image file uploader: @import {local path to the package}/core-components/scss/image-file-uploader;

    <div class="dc-img-uploader">
    	<div class="dc-img-uploader__image-wrapper"></div>
    	<div class="dc-img-uploader__body">
    		<input class="dc-img-uploader__input js-img-uploader-input" id="dc-img-uploader__input" accept=".png, .jpeg, .jpg" type="file">
    		<label class="dc-img-uploader__label" for="dc-img-uploader__input">Upload new picture</label>
    		<button class="dc-btn dc-btn--primary dc-img-uploader__btn js-img-uploader-btn">Upload new picture</button>
    		<strong class="dc-img-uploader__name js-img-uploader-name"></strong>
    	</div>
    </div>

    Popovers

    Popover

    We use the Bootstrap Popover and this is the default. The button element and classes can vary.

    The placement and trigger type are options set by the data attributes:

    • data-placement={top|right|bottom|left}
    • data-trigger={focus|hover}

    Import all popover styles: @import {local path to the package}/core-components/scss/popover;

    Dependencies: tooltip.js, popover.js

    <button type="button" class="dc-btn dc-btn--primary-light popover-trigger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-placement="top" data-trigger="focus">Popover on top</button>
    
    <button type="button" class="dc-btn dc-btn--primary-light popover-trigger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-placement="right" data-trigger="focus">Popover on right</button>
    
    <button type="button" class="dc-btn dc-btn--primary-light popover-trigger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-placement="bottom" data-trigger="focus">Popover on bottom</button>
    
    <button type="button" class="dc-btn dc-btn--primary-light popover-trigger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-placement="left" data-trigger="focus">Popover on left</button>

    Popover Primary

    Add the .popover-trigger--primary for this style.

    <button type="button" class="dc-btn dc-btn--primary-light popover-trigger popover-trigger--primary" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-placement="top" data-trigger="focus">Popover on top</button>

    Popover Primary Dark

    Add the .popover-trigger--primary-dark for this style.

    <button type="button" class="dc-btn dc-btn--primary-light popover-trigger popover-trigger--primary-dark" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-placement="top" data-trigger="focus">Popover on top</button>

    Progress Bars

    Progress Bar

    Used for XP for example, where the unit is not always percentages. Fill is controlled by an inline width style.

    Import all progress bar styles: @import {local path to the package}/core-components/scss/progress-bar;

    <div class="dc-progress-bar">
    	<div class="dc-progress-bar__bar">
    		<span class="dc-progress-bar__fill" style="width: 0%;"></span>
    	</div>
    </div>
    
    <!-- Extra examples to show style -->
    <!-- u-spacing-t3 is not part of the component by default -->
    <div class="dc-progress-bar">
    	<div class="dc-progress-bar__bar">
    		<span class="dc-progress-bar__fill" style="width: 75%;"></span>
    	</div>
    </div>

    Progress Bar Completed

    Fill is controlled by an inline width style. The completed version requires a conditional modifier class: .dc-progress-bar--completed.

    Import all progress bar styles: @import {local path to the package}/core-components/scss/progress-bar;

    <div class="dc-progress-bar dc-progress-bar--completed">
    	<div class="dc-progress-bar__bar">
    		<span class="dc-progress-bar__fill" style="width: 100%;">100%</span>
    	</div>
    </div>

    Progress Bar Inner Text

    To show the progress percentage, output text in .progress-bar__fill.

    <div class="dc-progress-bar">
    	<div class="dc-progress-bar__bar">
    		<span class="dc-progress-bar__fill" style="width: 0%">
    			<!-- We hide the percentage if below 3% -->
    		</span>
    	</div>
    </div>
    
    <!-- Extra examples to show style -->
    <!-- u-spacing-t3 is not part of the component by default -->
    <div class="dc-progress-bar">
    	<div class="dc-progress-bar__bar">
    		<span class="dc-progress-bar__fill" style="width: 75%;">75%</span>
    	</div>
    </div>

    Progress Bar Inner Text Completed

    To show the progress percentage, output text in .progress-bar__fill. The completed version requires a conditional modifier class: .dc-progress-bar--completed.

    <div class="dc-progress-bar dc-progress-bar--completed">
    	<div class="dc-progress-bar__bar">
    		<span class="dc-progress-bar__fill" style="width: 75%;">75%</span>
    	</div>
    </div>

    Progress Bar Light

    For use on non-white backgrounds, add the .progress-bar--light modifier class.

    <div class="bg-primary-extra-light">
    	<!-- Div is only for dark context -->
    
    	<div class="dc-progress-bar dc-progress-bar--light">
    		<div class="dc-progress-bar__bar">
    			<span class="dc-progress-bar__fill" style="width: 0%;"></span>
    		</div>
    	</div>
    
    	<!-- Extra examples to show style -->
    	<!-- u-spacing-t3 is not part of the component by default -->
    	<div class="dc-progress-bar dc-progress-bar--light u-spacing-t3">
    		<div class="dc-progress-bar__bar">
    			<span class="dc-progress-bar__fill" style="width: 75%;"></span>
    		</div>
    	</div>
    
    	<div class="dc-progress-bar dc-progress-bar--light">
    		<div class="dc-progress-bar__bar">
    			<span class="dc-progress-bar__fill" style="width: 75%;">75%</span>
    		</div>
    	</div>
    
    	<div class="dc-progress-bar dc-progress-bar--light dc-progress-bar--completed">
    		<div class="dc-progress-bar__bar">
    			<span class="dc-progress-bar__fill" style="width: 100%;">100%</span>
    		</div>
    	</div>
    
    	<!-- Div is only for dark context -->
    </div>

    Progress Bar Small

    Used when there is not much space to use the big progress. For the small bar, add the .dc-progress-bar--small modifier.

    Import all progress bar styles: @import {local path to the package}/core-components/scss/progress-bar;

    <div class="dc-progress-bar dc-progress-bar--small">
    	<div class="dc-progress-bar__bar">
    		<span class="dc-progress-bar__fill" style="width: 0%;"></span>
    	</div>
    </div>
    
    <!-- Extra examples to show style -->
    <!-- u-spacing-t3 is not part of the component by default -->
    <div class="dc-progress-bar dc-progress-bar--small">
    	<div class="dc-progress-bar__bar">
    		<span class="dc-progress-bar__fill" style="width: 75%;"></span>
    	</div>
    </div>

    Progress Bar Small Text

    Used for annotating the percentage progress. To display text, an additional span with the value is needed. This should only be displayed if the value is 3% or more.

    Modifiers of the progress bar are available to control the color of the text and the fill. These were added for password verification.


    modifier color result
    .dc-progress--red $dc-red
    Weak
    .dc-progress--orange $dc-orange
    Weak
    .dc-progress--green $dc-green
    Weak

    Import all progress bar styles: @import {local path to the package}/core-components/scss/progress-bar;

    <div class="dc-progress-bar dc-progress-bar--small">
    	<span class="dc-progress-bar__text">75%</span>
    	<div class="dc-progress-bar__bar">
    		<span class="dc-progress-bar__fill" style="width: 75%;"></span>
    	</div>
    </div>

    Range Slider

    Range Slider Video

    <div class="dc-range-slider dc-range-slider--video">
    	<div class="dc-range-slider__fill"></div>
    	<div class="dc-range-slider__handle"></div>
    </div>

    Range Slider Slide

    <div class="dc-range-slider dc-range-slider--slide">
    	<div class="dc-range-slider__fill"></div>
    	<div class="dc-range-slider__handle"></div>
    </div>

    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>

    Tabbed Nav

    <ul class="dc-tabbed-nav">
    	<li class="dc-tabbed-nav__item">
    		<a class="dc-tabbed-nav__link" href="#">Admin</a>
    	</li>
    	<li class="dc-tabbed-nav__item">
    		<a class="dc-tabbed-nav__link is-active" href="#">Billing</a>
    	</li>
    	<li class="dc-tabbed-nav__item">
    		<a class="dc-tabbed-nav__link" href="#">Invoice settings</a>
    	</li>
    	<li class="dc-tabbed-nav__item">
    		<a class="dc-tabbed-nav__link" href="#">Integrations</a>
    	</li>
    	<li class="dc-tabbed-nav__item">
    		<a class="dc-tabbed-nav__link" href="#">Invite links</a>
    	</li>
    	<li class="dc-tabbed-nav__item">
    		<a class="dc-tabbed-nav__link" href="#">Remove members</a>
    	</li>
    	<li class="dc-tabbed-nav__item">
    		<a class="dc-tabbed-nav__link" href="#">Privacy</a>
    	</li>
    </ul>

    Tables

    Table

    <table class="dc-table">
    	<thead class="dc-table__thead">
    		<tr>
    			<th role="columnheader" aria-disabled="true" class="dc-table__th  ">
    				<label class="dc-input-checkbox" for="checkbox-label-1">
    					<input id="checkbox-label-1" 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>
    				</label>
    			</th>
    			<th role="columnheader" aria-sort="none" class="dc-table__th" colspan="2">
    				File Name
    			</th>
    			<th role="columnheader" aria-sort="none" class="dc-table__th">
    				Uploaded At
    			</th>
    			<th role="columnheader" aria-sort="none" class="dc-table__th">
    				File Type
    			</th>
    			<th role="columnheader" aria-sort="none" class="dc-table__th">
    				File Size
    			</th>
    			<th role="columnheader" aria-disabled="true" class="dc-table__th"></th>
    			<th role="columnheader" aria-disabled="true" class="dc-table__th"></th>
    		</tr>
    	</thead>
    	<tbody class="dc-table__tbody">
    		<tr class="dc-table__tr">
    			<td class="dc-table__td">
    				<label class="dc-input-checkbox" for="checkbox-label-2">
    					<input id="checkbox-label-2" 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>
    				</label>
    			</td>
    			<td class="dc-table__td dc-table__td--avatar">
    				<img height="28" width="28" src="https://styleguide-assets.datacamp.com/images/core/components/image-file-uploader/placeholder-cbaf724d5e.svg">
    			</td>
    			<td class="dc-table__td">[email protected]</td>
    			<td class="dc-table__td">22/01/2018 at 09:12 am</td>
    			<td class="dc-table__td">Image</td>
    			<td class="dc-table__td">72 kB</td>
    			<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    				<svg class="dc-icon--primary" width="18" height="18">
    					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
    				</svg>
    			</td>
    			<td class="dc-table__td">
    				<button class="dc-btn dc-btn--tertiary dc-btn--sm">Copy Link</button>
    			</td>
    		</tr>
    		<tr class="dc-table__tr">
    			<td class="dc-table__td">
    				<label class="dc-input-checkbox" for="checkbox-label-3">
    					<input id="checkbox-label-3" 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>
    				</label>
    			</td>
    			<td class="dc-table__td dc-table__td--avatar">
    				<img height="28" width="28" src="https://styleguide-assets.datacamp.com/images/core/components/image-file-uploader/placeholder-cbaf724d5e.svg">
    			</td>
    			<td class="dc-table__td">[email protected]</td>
    			<td class="dc-table__td">22/01/2018 at 09:12 am</td>
    			<td class="dc-table__td">Image</td>
    			<td class="dc-table__td">72 kB</td>
    			<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    				<svg class="dc-icon--primary" width="18" height="18">
    					<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
    				</svg>
    			</td>
    			<td class="dc-table__td">
    				<button class="dc-btn dc-btn--tertiary dc-btn--sm">Copy Link</button>
    			</td>
    		</tr>
    	</tbody>
    	<tfoot></tfoot>
    </table>

    Table Bordered

    <div class="dc-table-wrapper dc-table-wrapper--bordered">
    	<table class="dc-table dc-table--white">
    		<thead class="dc-table__thead">
    			<tr>
    				<th role="columnheader" aria-disabled="true" class="dc-table__th dc-table__td--shrink dc-table__td--icon">
    					<label class="dc-input-checkbox" for="checkbox-label-1">
    						<input id="checkbox-label-1" 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>
    					</label>
    				</th>
    				<th role="columnheader" aria-sort="none" class="dc-table__th" colspan="2">
    					File Name
    				</th>
    				<th role="columnheader" aria-sort="none" class="dc-table__th">
    					Uploaded At
    				</th>
    				<th role="columnheader" aria-sort="none" class="dc-table__th">
    					File Type
    				</th>
    				<th role="columnheader" aria-sort="none" class="dc-table__th">
    					File Size
    				</th>
    				<th role="columnheader" aria-disabled="true" class="dc-table__th"></th>
    				<th role="columnheader" aria-disabled="true" class="dc-table__th"></th>
    			</tr>
    		</thead>
    		<tbody class="dc-table__tbody">
    			<tr class="dc-table__tr">
    				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    					<label class="dc-input-checkbox" for="checkbox-label-2">
    						<input id="checkbox-label-2" 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>
    					</label>
    				</td>
    				<td class="dc-table__td dc-table__td--avatar">
    					<img height="28" width="28" src="https://styleguide-assets.datacamp.com/images/core/components/image-file-uploader/placeholder-cbaf724d5e.svg">
    				</td>
    				<td class="dc-table__td">[email protected]</td>
    				<td class="dc-table__td">22/01/2018 at 09:12 am</td>
    				<td class="dc-table__td">Image</td>
    				<td class="dc-table__td">72 kB</td>
    				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    					<svg class="dc-icon--primary" width="18" height="18">
    						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
    					</svg>
    				</td>
    				<td class="dc-table__td">
    					<button class="dc-btn dc-btn--tertiary dc-btn--sm">Copy Link</button>
    				</td>
    			</tr>
    			<tr class="dc-table__tr">
    				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    					<label class="dc-input-checkbox" for="checkbox-label-3">
    						<input id="checkbox-label-3" 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>
    					</label>
    				</td>
    				<td class="dc-table__td dc-table__td--avatar">
    					<img height="28" width="28" src="https://styleguide-assets.datacamp.com/images/core/components/image-file-uploader/placeholder-cbaf724d5e.svg">
    				</td>
    				<td class="dc-table__td">[email protected]</td>
    				<td class="dc-table__td">22/01/2018 at 09:12 am</td>
    				<td class="dc-table__td">Image</td>
    				<td class="dc-table__td">72 kB</td>
    				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    					<svg class="dc-icon--primary" width="18" height="18">
    						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
    					</svg>
    				</td>
    				<td class="dc-table__td">
    					<button class="dc-btn dc-btn--tertiary dc-btn--sm">Copy Link</button>
    				</td>
    			</tr>
    		</tbody>
    		<tfoot></tfoot>
    	</table>
    </div>

    Table Bordered Rows

    <div class="dc-table-wrapper dc-table-wrapper--bordered">
    	<table class="dc-table dc-table--white dc-table--bordered">
    		<thead class="dc-table__thead">
    			<tr>
    				<th role="columnheader" aria-disabled="true" class="dc-table__th dc-table__td--shrink dc-table__td--icon">
    					<label class="dc-input-checkbox" for="checkbox-label-1">
    						<input id="checkbox-label-1" 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>
    					</label>
    				</th>
    				<th role="columnheader" aria-sort="none" class="dc-table__th" colspan="2">
    					File Name
    				</th>
    				<th role="columnheader" aria-sort="none" class="dc-table__th">
    					Uploaded At
    				</th>
    				<th role="columnheader" aria-sort="none" class="dc-table__th">
    					File Type
    				</th>
    				<th role="columnheader" aria-sort="none" class="dc-table__th">
    					File Size
    				</th>
    				<th role="columnheader" aria-disabled="true" class="dc-table__th"></th>
    				<th role="columnheader" aria-disabled="true" class="dc-table__th"></th>
    			</tr>
    		</thead>
    		<tbody class="dc-table__tbody">
    			<tr class="dc-table__tr">
    				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    					<label class="dc-input-checkbox" for="checkbox-label-2">
    						<input id="checkbox-label-2" 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>
    					</label>
    				</td>
    				<td class="dc-table__td dc-table__td--avatar">
    					<img height="28" width="28" src="https://styleguide-assets.datacamp.com/images/core/components/image-file-uploader/placeholder-cbaf724d5e.svg">
    				</td>
    				<td class="dc-table__td">[email protected]</td>
    				<td class="dc-table__td">22/01/2018 at 09:12 am</td>
    				<td class="dc-table__td">Image</td>
    				<td class="dc-table__td">72 kB</td>
    				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    					<svg class="dc-icon--primary" width="18" height="18">
    						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
    					</svg>
    				</td>
    				<td class="dc-table__td">
    					<button class="dc-btn dc-btn--tertiary dc-btn--sm">Copy Link</button>
    				</td>
    			</tr>
    			<tr class="dc-table__tr">
    				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    					<label class="dc-input-checkbox" for="checkbox-label-3">
    						<input id="checkbox-label-3" 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>
    					</label>
    				</td>
    				<td class="dc-table__td dc-table__td--avatar">
    					<img height="28" width="28" src="https://styleguide-assets.datacamp.com/images/core/components/image-file-uploader/placeholder-cbaf724d5e.svg">
    				</td>
    				<td class="dc-table__td">[email protected]</td>
    				<td class="dc-table__td">22/01/2018 at 09:12 am</td>
    				<td class="dc-table__td">Image</td>
    				<td class="dc-table__td">72 kB</td>
    				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    					<svg class="dc-icon--primary" width="18" height="18">
    						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
    					</svg>
    				</td>
    				<td class="dc-table__td">
    					<button class="dc-btn dc-btn--tertiary dc-btn--sm">Copy Link</button>
    				</td>
    			</tr>
    			<tr class="dc-table__tr">
    				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    					<label class="dc-input-checkbox" for="checkbox-label-4">
    						<input id="checkbox-label-4" 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>
    					</label>
    				</td>
    				<td class="dc-table__td dc-table__td--avatar">
    					<img height="28" width="28" src="https://styleguide-assets.datacamp.com/images/core/components/image-file-uploader/placeholder-cbaf724d5e.svg">
    				</td>
    				<td class="dc-table__td">[email protected]</td>
    				<td class="dc-table__td">22/01/2018 at 09:12 am</td>
    				<td class="dc-table__td">Image</td>
    				<td class="dc-table__td">72 kB</td>
    				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    					<svg class="dc-icon--primary" width="18" height="18">
    						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
    					</svg>
    				</td>
    				<td class="dc-table__td">
    					<button class="dc-btn dc-btn--tertiary dc-btn--sm">Copy Link</button>
    				</td>
    			</tr>
    			<tr class="dc-table__tr">
    				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    					<label class="dc-input-checkbox" for="checkbox-label-5">
    						<input id="checkbox-label-5" 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>
    					</label>
    				</td>
    				<td class="dc-table__td dc-table__td--avatar">
    					<img height="28" width="28" src="https://styleguide-assets.datacamp.com/images/core/components/image-file-uploader/placeholder-cbaf724d5e.svg">
    				</td>
    				<td class="dc-table__td">[email protected]</td>
    				<td class="dc-table__td">22/01/2018 at 09:12 am</td>
    				<td class="dc-table__td">Image</td>
    				<td class="dc-table__td">72 kB</td>
    				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    					<svg class="dc-icon--primary" width="18" height="18">
    						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
    					</svg>
    				</td>
    				<td class="dc-table__td">
    					<button class="dc-btn dc-btn--tertiary dc-btn--sm">Copy Link</button>
    				</td>
    			</tr>
    		</tbody>
    		<tfoot></tfoot>
    	</table>
    </div>

    Table Headless

    <div class="dc-table-wrapper">
    	<table class="dc-table dc-table--headless">
    		<thead class="dc-table__thead">
    			<tr>
    				<th role="columnheader" aria-disabled="true" class="dc-table__th dc-table__td--shrink dc-table__td--icon">
    					<label class="dc-input-checkbox" for="checkbox-label-1">
    						<input id="checkbox-label-1" 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>
    					</label>
    				</th>
    				<th role="columnheader" aria-sort="none" class="dc-table__th" colspan="2">
    					File Name
    				</th>
    				<th role="columnheader" aria-sort="none" class="dc-table__th">
    					Uploaded At
    				</th>
    				<th role="columnheader" aria-sort="none" class="dc-table__th">
    					File Type
    				</th>
    				<th role="columnheader" aria-sort="none" class="dc-table__th">
    					File Size
    				</th>
    				<th role="columnheader" aria-disabled="true" class="dc-table__th"></th>
    				<th role="columnheader" aria-disabled="true" class="dc-table__th"></th>
    			</tr>
    		</thead>
    		<tbody class="dc-table__tbody">
    			<tr class="dc-table__tr">
    				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    					<label class="dc-input-checkbox" for="checkbox-label-2">
    						<input id="checkbox-label-2" 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>
    					</label>
    				</td>
    				<td class="dc-table__td dc-table__td--avatar">
    					<img height="28" width="28" src="https://styleguide-assets.datacamp.com/images/core/components/image-file-uploader/placeholder-cbaf724d5e.svg">
    				</td>
    				<td class="dc-table__td">[email protected]</td>
    				<td class="dc-table__td">22/01/2018 at 09:12 am</td>
    				<td class="dc-table__td">Image</td>
    				<td class="dc-table__td">72 kB</td>
    				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    					<svg class="dc-icon--primary" width="18" height="18">
    						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
    					</svg>
    				</td>
    				<td class="dc-table__td">
    					<button class="dc-btn dc-btn--tertiary dc-btn--sm">Copy Link</button>
    				</td>
    			</tr>
    			<tr class="dc-table__tr">
    				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    					<label class="dc-input-checkbox" for="checkbox-label-3">
    						<input id="checkbox-label-3" 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>
    					</label>
    				</td>
    				<td class="dc-table__td dc-table__td--avatar">
    					<img height="28" width="28" src="https://styleguide-assets.datacamp.com/images/core/components/image-file-uploader/placeholder-cbaf724d5e.svg">
    				</td>
    				<td class="dc-table__td">[email protected]</td>
    				<td class="dc-table__td">22/01/2018 at 09:12 am</td>
    				<td class="dc-table__td">Image</td>
    				<td class="dc-table__td">72 kB</td>
    				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    					<svg class="dc-icon--primary" width="18" height="18">
    						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
    					</svg>
    				</td>
    				<td class="dc-table__td">
    					<button class="dc-btn dc-btn--tertiary dc-btn--sm">Copy Link</button>
    				</td>
    			</tr>
    			<tr class="dc-table__tr">
    				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    					<label class="dc-input-checkbox" for="checkbox-label-4">
    						<input id="checkbox-label-4" 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>
    					</label>
    				</td>
    				<td class="dc-table__td dc-table__td--avatar">
    					<img height="28" width="28" src="https://styleguide-assets.datacamp.com/images/core/components/image-file-uploader/placeholder-cbaf724d5e.svg">
    				</td>
    				<td class="dc-table__td">[email protected]</td>
    				<td class="dc-table__td">22/01/2018 at 09:12 am</td>
    				<td class="dc-table__td">Image</td>
    				<td class="dc-table__td">72 kB</td>
    				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    					<svg class="dc-icon--primary" width="18" height="18">
    						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
    					</svg>
    				</td>
    				<td class="dc-table__td">
    					<button class="dc-btn dc-btn--tertiary dc-btn--sm">Copy Link</button>
    				</td>
    			</tr>
    			<tr class="dc-table__tr">
    				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    					<label class="dc-input-checkbox" for="checkbox-label-5">
    						<input id="checkbox-label-5" 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>
    					</label>
    				</td>
    				<td class="dc-table__td dc-table__td--avatar">
    					<img height="28" width="28" src="https://styleguide-assets.datacamp.com/images/core/components/image-file-uploader/placeholder-cbaf724d5e.svg">
    				</td>
    				<td class="dc-table__td">[email protected]</td>
    				<td class="dc-table__td">22/01/2018 at 09:12 am</td>
    				<td class="dc-table__td">Image</td>
    				<td class="dc-table__td">72 kB</td>
    				<td class="dc-table__td dc-table__td--shrink dc-table__td--icon">
    					<svg class="dc-icon--primary" width="18" height="18">
    						<use xlink:href="/assets/toolkit/images/core-components/icons/svg/symbols.svg#download" />
    					</svg>
    				</td>
    				<td class="dc-table__td">
    					<button class="dc-btn dc-btn--tertiary dc-btn--sm">Copy Link</button>
    				</td>
    			</tr>
    		</tbody>
    		<tfoot></tfoot>
    	</table>
    </div>

    Tabs

    Each of your tabs requires a unique id on the page. Add this id as the href to each tab hyperlink to toggle their visibility.

    A tab bar can have an optional action link which will be aligned to the right.

    Import all tabs styles: @import {local path to the package}/core-components/scss/tabs;

    <div class="minimal-tabs-bar">
    	<ul class="minimal-tabs list-unstyled" role="tablist">
    		<li class="minimal-tab active">
    			<a class="minimal-tab__link" href="#in-progress" aria-controls="in-progress" role="tab" data-toggle="tab" data-text="Courses in Progress (2)">Courses in Progress (2)</a>
    		</li>
    		<li class="minimal-tab">
    			<a class="minimal-tab__link" href="#completed" aria-controls="completed" role="tab" data-toggle="tab" data-text="Completed (4)">Completed (4)</a>
    		</li>
    	</ul>
    	<a class="minimal-tabs__action" href="#">
    		<img class="minimal-tabs__action-icon" src="https://cdn.datacamp.com/main-app/assets/icons/explore-courses-library-icon-898485ab5575f7b3809b188d7f97820a122ccc72171191badf81c72d3e0b74a6.svg" alt="Explore courses library icon">
    		Explore Course Library
    	</a>
    </div>
    
    <div class="minimal-tab-pane tab-pane pt-md active" role="tabpanel" id="in-progress">
    	<p>In progress tab content</p>
    </div>
    
    <div class="minimal-tab-pane tab-pane pt-md" role="tabpanel" id="completed">
    	<p>Completed tab content</p>
    </div>

    Tags

    Tag

    A tag can be either a span or a hyperlink.

    Import all tag styles: @import {local path to the package}/core-components/scss/tag;

    <span class="dc-tag">This is a span tag</span>
    <a class="dc-tag dc-tag--link">This is a link tag</a>

    Tag Xp

    Use this modifier for tags showing xp values.

    <div class="bg-dark">
    	<!-- Div is only for context -->
    
    	<span class="tag tag--xp">100 XP</span>
    
    	<!-- Div is only for context -->
    </div>

    Tag Hue

    Rounded tag, with varied background colors. Modifiers are a combination of reusable and app-specific states.

    preview default modifier utility class
    Green
    		 .dc-tag--green .dc-u-bgc-green
    Primary Light
    		 .dc-tag--primary-light .dc-u-bgc-primary-light
    Secondary
    		 .dc-tag--secondary .dc-u-bgc-secondary
    Red
    		 .dc-tag--red .dc-u-bgc-red 
    <div class="dc-tag dc-tag--hue dc-tag--green">
    	Tag Hue
    </div>
    
    <div class="dc-tag dc-tag--hue dc-u-bgc-red">
    	Tag Hue
    </div>

    Tag Rounded Corners

    This is an example of a tag with our standard border radius utility added dc-u-brad-all.

    <div class="dc-tag dc-tag--hue dc-u-bgc-orange dc-u-brad-all">
    	Tag Hue
    </div>

    All Icons

    12: add
    18: add
    24: add
    12: apple
    18: apple
    24: apple
    12: archive
    18: archive
    24: archive
    12: arrow_2_down
    18: arrow_2_down
    24: arrow_2_down
    12: arrow_2_left
    18: arrow_2_left
    24: arrow_2_left
    12: arrow_2_right
    18: arrow_2_right
    24: arrow_2_right
    12: arrow_2_up
    18: arrow_2_up
    24: arrow_2_up
    12: arrow_down
    18: arrow_down
    24: arrow_down
    12: arrow_left
    18: arrow_left
    24: arrow_left
    12: arrow_right
    18: arrow_right
    24: arrow_right
    12: arrow_up
    18: arrow_up
    24: arrow_up
    12: assignment
    18: assignment
    24: assignment
    12: attachment
    18: attachment
    24: attachment
    12: attention
    18: attention
    24: attention
    12: audio
    18: audio
    24: audio
    12: bars
    18: bars
    24: bars
    12: book
    18: book
    24: book
    12: building
    18: building
    24: building
    12: bullet
    18: bullet
    24: bullet
    12: calendar
    18: calendar
    24: calendar
    12: chat
    18: chat
    24: chat
    12: checkmark
    18: checkmark
    24: checkmark
    12: circle-stroke
    18: circle-stroke
    24: circle-stroke
    12: circle
    18: circle
    24: circle
    12: checkmark_circle
    18: checkmark_circle
    24: checkmark_circle
    12: clock
    18: clock
    24: clock
    12: close
    18: close
    24: close
    12: code-brackets
    18: code-brackets
    24: code-brackets
    12: command
    18: command
    24: command
    12: company
    18: company
    24: company
    12: compass
    18: compass
    24: compass
    12: copy
    18: copy
    24: copy
    12: course
    18: course
    24: course
    12: custom_track
    18: custom_track
    24: custom_track
    12: credit_card
    18: credit_card
    24: credit_card
    12: currency
    18: currency
    24: currency
    12: dashboard
    18: dashboard
    24: dashboard
    12: database
    18: database
    24: database
    12: datacamp
    18: datacamp
    24: datacamp
    12: dc-icon-academic
    18: dc-icon-academic
    24: dc-icon-academic
    12: dc-icon-datacamp-filled
    18: dc-icon-datacamp-filled
    24: dc-icon-datacamp-filled
    12: dc-icon-enterprise
    18: dc-icon-enterprise
    24: dc-icon-enterprise
    12: dc-icon-professional
    18: dc-icon-professional
    24: dc-icon-professional
    12: download
    18: download
    24: download
    12: education
    18: education
    24: education
    12: error
    18: error
    24: error
    12: exercise
    18: exercise
    24: exercise
    12: expand
    18: expand
    24: expand
    12: eye
    18: eye
    24: eye
    12: facebook
    18: facebook
    24: facebook
    12: facebook_square
    18: facebook_square
    24: facebook_square
    12: filter
    18: filter
    24: filter
    12: flagpole
    18: flagpole
    24: flagpole
    12: github
    18: github
    24: github
    12: globe
    18: globe
    24: globe
    12: google_play
    18: google_play
    24: google_play
    12: google_plus_square
    18: google_plus_square
    24: google_plus_square
    12: group
    18: group
    24: group
    12: hint
    18: hint
    24: hint
    12: home
    18: home
    24: home
    12: incorrect
    18: incorrect
    24: incorrect
    12: info
    18: info
    24: info
    12: info_2
    18: info_2
    24: info_2
    12: lab
    18: lab
    24: lab
    12: learn
    18: learn
    24: learn
    12: library
    18: library
    24: library
    12: lightbulb
    18: lightbulb
    24: lightbulb
    12: link
    18: link
    24: link
    12: linkedin
    18: linkedin
    24: linkedin
    12: linkedin_square
    18: linkedin_square
    24: linkedin_square
    12: location
    18: location
    24: location
    12: lock
    18: lock
    24: lock
    12: mail
    18: mail
    24: mail
    12: markdown
    18: markdown
    24: markdown
    12: math
    18: math
    24: math
    12: micro
    18: micro
    24: micro
    12: dc-icon-mobile-phone
    18: dc-icon-mobile-phone
    24: dc-icon-mobile-phone
    12: more
    18: more
    24: more
    12: multiple-choice
    18: multiple-choice
    24: multiple-choice
    12: news
    18: news
    24: news
    12: notification
    18: notification
    24: notification
    12: paypal_logo
    18: paypal_logo
    24: paypal_logo
    12: pdf
    18: pdf
    24: pdf
    12: phone
    18: phone
    24: phone
    12: play
    18: play
    24: play
    12: project
    18: project
    24: project
    12: python
    18: python
    24: python
    12: r
    18: r
    24: r
    12: redo
    18: redo
    24: redo
    12: reply
    18: reply
    24: reply
    12: reporting
    18: reporting
    24: reporting
    12: rss
    18: rss
    24: rss
    12: search
    18: search
    24: search
    12: settings
    18: settings
    24: settings
    12: slack
    18: slack
    24: slack
    12: slide-final
    18: slide-final
    24: slide-final
    12: slide-full
    18: slide-full
    24: slide-full
    12: slide-title
    18: slide-title
    24: slide-title
    12: slide-two-col
    18: slide-two-col
    24: slide-two-col
    12: slide-two-row-two-col
    18: slide-two-row-two-col
    24: slide-two-row-two-col
    12: slide-two-rows-wide
    18: slide-two-rows-wide
    24: slide-two-rows-wide
    12: slide-two-rows
    18: slide-two-rows
    24: slide-two-rows
    12: sparkles
    18: sparkles
    24: sparkles
    12: spinner
    18: spinner
    24: spinner
    12: star
    18: star
    24: star
    12: stats
    18: stats
    24: stats
    12: stopwatch
    18: stopwatch
    24: stopwatch
    12: tab
    18: tab
    24: tab
    12: tag
    18: tag
    24: tag
    12: team
    18: team
    24: team
    12: theme-toggle
    18: theme-toggle
    24: theme-toggle
    12: trash
    18: trash
    24: trash
    12: trophy
    18: trophy
    24: trophy
    12: twitter
    18: twitter
    24: twitter
    12: upload
    18: upload
    24: upload
    12: user
    18: user
    24: user
    12: user_2
    18: user_2
    24: user_2
    12: video-slides
    18: video-slides
    24: video-slides
    12: video
    18: video
    24: video
    12: video-forward
    18: video-forward
    24: video-forward
    12: video-next-slide
    18: video-next-slide
    24: video-next-slide
    12: video-pause
    18: video-pause
    24: video-pause
    12: video-play
    18: video-play
    24: video-play
    12: video-prev-slide
    18: video-prev-slide
    24: video-prev-slide
    12: video-reverse
    18: video-reverse
    24: video-reverse
    12: video-trim-begin
    18: video-trim-begin
    24: video-trim-begin
    12: video-trim-end
    18: video-trim-end
    24: video-trim-end
    12: write
    18: write
    24: write
    12: xp
    18: xp
    24: xp
    12: youtube
    18: youtube
    24: youtube
    12: youtube_logo
    18: youtube_logo
    24: youtube_logo