Colors/line

<div class="box Color-Blue"></div>
<div class="box Color-HoverLine"></div>
<div class="box Color-MainLine"></div>
<div class="box Color-SecondaryLine"></div>

Colors/other

<div class="box Color-Higlight"></div>
<div class="box Color-Alert"></div>
<div class="box Color-Public"></div>
<div class="box Color-Link"></div>
<div class="box Color-Password"></div>
<div class="box Color-Error"></div>

Colors/structure

<div class="box Color-MainDark"></div>
<div class="box Color-SecondaryDark"></div>
<div class="box Color-Blue"></div>
<div class="box Color-White"></div>
<div class="box Color-SecondaryBackground"></div>
<div class="box Color-ThirdBackground"></div>

Colors/typography

<div class="box Color-MainDark"></div>
<div class="box Color-Type02"></div>
<div class="box Color-Type03"></div>
<div class="box Color-Type04"></div>
<div class="box Color-White"></div>
<div class="box Color-Blue"></div>

Icon font

Clock

Stats

Heart--empty

Heart--fill

Alert

Rows

Check

Dribbble

Twitter

Wizard

Info

Fork

Facebook

Folder

Dropbox

Cloud

Step

AddDocument

ArrowNext

ArrowPrev

Close

CartoFante

Lock

CartoDB

Lens

CloseLimits

DefaultUser

Cockroach

Floppy

Trash

Wifi

Unlock

Unlock--withEllipsis

Gift

People

Play

Add

Map

Anchor

Key

Calendar

Document

Eye

Marker

ProgressBar

Book

Notes

Rectangles

Mountain

Points

Snake

Boss

Rocket

Barometer

Dollar

Email

Label

Outside

Jigsaw

Tools

Question

LayerStack

Alarm

CloudDownArrow

Pencil

FountainPen

EmptyDoc

MergeArrow

MergeColumns

MergeSpatial

Globe

ChevronDown

Streets

Keys

FacebookSquare

Fullscreen

Rarrow

Share

Linkedin

CalendarBlank

CreativeCommons

Bubble

Bars

ArrowMenu

TieFighter

Ray

Markup

Table

Airlock

Pin

Attache

Download

<h4>Clock</h4>
<i class="IconFont IconFont-Clock"></i>

<h4>Stats</h4>
<i class="IconFont IconFont-Stats"></i>

<h4>Heart--empty</h4>
<i class="IconFont IconFont-Heart--empty"></i>

<h4>Heart--fill</h4>
<i class="IconFont IconFont-Heart--fill"></i>

<h4>Alert</h4>
<i class="IconFont IconFont-Alert"></i>

<h4>Rows</h4>
<i class="IconFont IconFont-Rows"></i>

<h4>Check</h4>
<i class="IconFont IconFont-Check"></i>

<h4>Dribbble</h4>
<i class="IconFont IconFont-Dribbble"></i>

<h4>Twitter</h4>
<i class="IconFont IconFont-Twitter"></i>

<h4>Wizard</h4>
<i class="IconFont IconFont-Wizard"></i>

<h4>Info</h4>
<i class="IconFont IconFont-Info"></i>

<h4>Fork</h4>
<i class="IconFont IconFont-Fork"></i>

<h4>Facebook</h4>
<i class="IconFont IconFont-Facebook"></i>

<h4>Folder</h4>
<i class="IconFont IconFont-Folder"></i>

<h4>Dropbox</h4>
<i class="IconFont IconFont-Dropbox"></i>

<h4>Cloud</h4>
<i class="IconFont IconFont-Cloud"></i>

<h4>Step</h4>
<i class="IconFont IconFont-Step"></i>

<h4>AddDocument</h4>
<i class="IconFont IconFont-AddDocument"></i>

<h4>ArrowNext</h4>
<i class="IconFont IconFont-ArrowNext"></i>

<h4>ArrowPrev</h4>
<i class="IconFont IconFont-ArrowPrev"></i>

<h4>Close</h4>
<i class="IconFont IconFont-Close"></i>

<h4>CartoFante</h4>
<i class="IconFont IconFont-CartoFante"></i>

<h4>Lock</h4>
<i class="IconFont IconFont-Lock"></i>

<h4>CartoDB</h4>
<i class="IconFont IconFont-CartoDB"></i>

<h4>Lens</h4>
<i class="IconFont IconFont-Lens"></i>

<h4>CloseLimits</h4>
<i class="IconFont IconFont-CloseLimits"></i>

<h4>DefaultUser</h4>
<i class="IconFont IconFont-DefaultUser"></i>

<h4>Cockroach</h4>
<i class="IconFont IconFont-Cockroach"></i>

<h4>Floppy</h4>
<i class="IconFont IconFont-Floppy"></i>

<h4>Trash</h4>
<i class="IconFont IconFont-Trash"></i>

<h4>Wifi</h4>
<i class="IconFont IconFont-Wifi"></i>

<h4>Unlock</h4>
<i class="IconFont IconFont-Unlock"></i>

<h4>Unlock--withEllipsis</h4>
<i class="IconFont IconFont-Unlock--withEllipsis"></i>

<h4>Gift</h4>
<i class="IconFont IconFont-Gift"></i>

<h4>People</h4>
<i class="IconFont IconFont-People"></i>

<h4>Play</h4>
<i class="IconFont IconFont-Play"></i>

<h4>Add</h4>
<i class="IconFont IconFont-Add"></i>

<h4>Map</h4>
<i class="IconFont IconFont-Map"></i>

<h4>Anchor</h4>
<i class="IconFont IconFont-Anchor"></i>

<h4>Key</h4>
<i class="IconFont IconFont-Key"></i>

<h4>Calendar</h4>
<i class="IconFont IconFont-Calendar"></i>

<h4>Document</h4>
<i class="IconFont IconFont-Document"></i>

<h4>Eye</h4>
<i class="IconFont IconFont-Eye"></i>

<h4>Marker</h4>
<i class="IconFont IconFont-Marker"></i>

<h4>ProgressBar</h4>
<i class="IconFont IconFont-ProgressBar"></i>

<h4>Book</h4>
<i class="IconFont IconFont-Book"></i>

<h4>Notes</h4>
<i class="IconFont IconFont-Notes"></i>

<h4>Rectangles</h4>
<i class="IconFont IconFont-Rectangles"></i>

<h4>Mountain</h4>
<i class="IconFont IconFont-Mountain"></i>

<h4>Points</h4>
<i class="IconFont IconFont-Points"></i>

<h4>Snake</h4>
<i class="IconFont IconFont-Snake"></i>

<h4>Boss</h4>
<i class="IconFont IconFont-Boss"></i>

<h4>Rocket</h4>
<i class="IconFont IconFont-Rocket"></i>

<h4>Barometer</h4>
<i class="IconFont IconFont-Barometer"></i>

<h4>Dollar</h4>
<i class="IconFont IconFont-Dollar"></i>

<h4>Email</h4>
<i class="IconFont IconFont-Email"></i>

<h4>Label</h4>
<i class="IconFont IconFont-Label"></i>

<h4>Outside</h4>
<i class="IconFont IconFont-Outside"></i>

<h4>Jigsaw</h4>
<i class="IconFont IconFont-Jigsaw"></i>

<h4>Tools</h4>
<i class="IconFont IconFont-Tools"></i>

<h4>Question</h4>
<i class="IconFont IconFont-Question"></i>

<h4>LayerStack</h4>
<i class="IconFont IconFont-LayerStack"></i>

<h4>Alarm</h4>
<i class="IconFont IconFont-Alarm"></i>

<h4>CloudDownArrow</h4>
<i class="IconFont IconFont-CloudDownArrow"></i>

<h4>Pencil</h4>
<i class="IconFont IconFont-Pencil"></i>

<h4>FountainPen</h4>
<i class="IconFont IconFont-FountainPen"></i>

<h4>EmptyDoc</h4>
<i class="IconFont IconFont-EmptyDoc"></i>

<h4>MergeArrow</h4>
<i class="IconFont IconFont-MergeArrow"></i>

<h4>MergeColumns</h4>
<i class="IconFont IconFont-MergeColumns"></i>

<h4>MergeSpatial</h4>
<i class="IconFont IconFont-MergeSpatial"></i>

<h4>Globe</h4>
<i class="IconFont IconFont-Globe"></i>

<h4>ChevronDown</h4>
<i class="IconFont IconFont-ChevronDown"></i>

<h4>Streets</h4>
<i class="IconFont IconFont-Streets"></i>

<h4>Keys</h4>
<i class="IconFont IconFont-Keys"></i>

<h4>FacebookSquare</h4>
<i class="IconFont IconFont-FacebookSquare"></i>

<h4>Fullscreen</h4>
<i class="IconFont IconFont-Fullscreen"></i>

<h4>Rarrow</h4>
<i class="IconFont IconFont-Rarrow"></i>

<h4>Share</h4>
<i class="IconFont IconFont-Share"></i>

<h4>Linkedin</h4>
<i class="IconFont IconFont-Linkedin"></i>

<h4>CalendarBlank</h4>
<i class="IconFont IconFont-CalendarBlank"></i>

<h4>CreativeCommons</h4>
<i class="IconFont IconFont-CreativeCommons"></i>

<h4>Bubble</h4>
<i class="IconFont IconFont-Bubble"></i>

<h4>Bars</h4>
<i class="IconFont IconFont-Bars"></i>

<h4>ArrowMenu</h4>
<i class="IconFont IconFont-ArrowMenu"></i>

<h4>TieFighter</h4>
<i class="IconFont IconFont-TieFighter"></i>

<h4>Ray</h4>
<i class="IconFont IconFont-Ray"></i>

<h4>Markup</h4>
<i class="IconFont IconFont-Markup"></i>

<h4>Table</h4>
<i class="IconFont IconFont-Table"></i>

<h4>Airlock</h4>
<i class="IconFont IconFont-Airlock"></i>

<h4>Pin</h4>
<i class="IconFont IconFont-Pin"></i>

<h4>Attache</h4>
<i class="IconFont IconFont-Attache"></i>

<h4>Download</h4>
<i class="IconFont IconFont-Download"></i>

Loader

This is the generic loader for widgets, maps, components, ... There is only one state 'is-visible', in order to make it visible.

<div class="CDB-Loader is-visible"></div>

Shapes/arrow

Description

<div></div>

Shapes/dot

You may resize and change the colors of the icons with the glyph--classes. Available sizes and colors listed:

<button class="CDB-Shape-dot CDB-Widget-dot--navigation is-selected" data-page="3"></button>
<button class="CDB-Shape-dot CDB-Widget-dot--navigation" data-page="3"></button>

Shapes/hamburguer

Description

<div></div>

Shapes/lens

Description

<div></div>

Shapes/magnify

Description

<div></div>

Shapes/threePoints

Description

<div></div>

Typography

Open Sans 26/34 Regular

Open Sans 16/22 Regular

Open Sans 12/16 Semibold

Open Sans 10/14 Semibold

Open Sans 10/14 Regular

<p class="Text Size-huge">Open Sans 26/34 Regular</p>
<p class="Text Size-large">Open Sans 16/22 Regular</p>
<p class="Text is-semibold Size-medium">Open Sans 12/16 Semibold</p>
<p class="Text Size-medium">Open Sans 12/16 Semibold</p>
<p class="Text is-semibold Size-small">Open Sans 10/14 Semibold</p>
<p class="Text Size-small">Open Sans 10/14 Regular</p>