<div class="box Color-Blue"></div>
<div class="box Color-HoverLine"></div>
<div class="box Color-MainLine"></div>
<div class="box Color-SecondaryLine"></div>
<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>
<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>
<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>
<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>
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>
Description
<div></div>
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>
Description
<div></div>
Description
<div></div>
Description
<div></div>
Description
<div></div>
Open Sans 26/34 Regular
Open Sans 16/22 Regular
Open Sans 12/16 Semibold
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>
Colors/line