Basics

Important notes about this styleguide

This is a preliminar WIP of the new dashboard stylesheet, based on the naming conventions of suitcss and Medium’s CSS is actually pretty good.

General rules

All new elements added in this repository should have included a 'CDB-' namespace.
Don't create default styles for common elements (e.g. input { padding: 10px 0 }). It will make more difficult edit styles for the future custom elements and the !important use will grow.
Avoid creating new classes with only one attribute (e.g. .marginRight { margin-right: 10px } ). It is impossible to manage the amount of cases we would like to cover.

Table of contents

Components
JavaScript
Structure sample
Precompilers
Colors
Z-Index
Formatting
- Spacing
- Quotes
- Colors
Things to add to the guide

Components

Syntax: <ComponentName>[--modifierName|-descendentName]

ComponentName

The component's name must be written in camel case.

.MyComponent { /* … */ }

<article class="MyComponent">
  …
</article>

ComponentName--modifierName

A component modifier is a class that modifies the presentation of the base component in some form.

Modifier names must be written in camel case and be separated from the component name by two hyphens.
The class should be included in the HTML in addition to the base component class.

/* Core button */
.Btn { /* … */ }

/* Default button style */
.Btn--default { /* … */ }

<article class="Btn Btn--default">
  …
</article>

ComponentName-descendentName

A component descendent is a class that is attached to a descendent node of a component.
It's responsible for applying presentation directly to the descendent on behalf of a particular component.
Descendent names must be written in camel case.

<article class="Tweet">
  <header class="Tweet-header">
    <img class="Tweet-avatar" src="" alt="">
    …
  </header>
  <div class="Tweet-bodyText">
    …
  </div>
</article>

ComponentName.is-stateOfComponent

Use is-stateName to reflect changes to a component's state.

The state name must be camel case.
Never style these classes directly: they should always be used as an adjoining class.

This means that the same state names can be used in multiple contexts, but every component must define its own styles for the state (as they are scoped to the component).

Right:

.Tweet { /* … */ }
.Tweet.is-expanded { /* … */ }

<article class="Tweet is-expanded">
  …
</article>

Wrong:

.Tweet { /* … */ }
.Tweet.expanded { /* … */ }

<article class="Tweet expanded">
  …
</article>

We should always rely on the same terminology to express state of a component: i.e.: a common term for is-active, is-expanded, is-selected, is-highlighted, ...

JavaScript

Syntax: js-<targetName>

JavaScript-specific classes reduce the risk that changing the structure or theme of components will inadvertently affect any required JavaScript behaviour and complex functionality. It is not neccesarry to use them in every case, just think of them as a tool in your utility belt. If you are creating a class, which you dont intend to use for styling, but instead only as a selector in JavaScript, you should probably be adding the js- prefix. In practice this looks like this:

<a href="/login" class="Btn Btn-primary js-login"></a>

JavaScript-specific classes should not, under any circumstances, be styled.

A word on (Pre)compilers

Since we use Rails as a backend, we make use of Sprockets to make all the dirty work with stylesheets (and javascripts). Many of the stylesheets are constructed by simply writing require_directory —this is awesome, but it also kind of sucks.

Preferably we should use @import instead of require when possible. http://pivotallabs.com/structure-your-sass-files-with-import/

When using require we should list the required files in the order they must be applied, as an added control to avoid undesired behaviours.

Bad:

/*
*= require dashboard/header
*= require dashboard/table
*/

Worse:

/*
*= require_tree dashboard
*/

Good:

@import "dashboard/header";
@import "dashboard/tables";

Better:

@import
"dashboard/header",
"dashboard/tables";

Structure sample


.Btn {}

  .Btn--m {}

  .Btn--highlight {}

  .Btn--green {}

  .Btn.is-active {}

.Menu {}

  .Menu-item {}

  .Menu-link {}

.Header {}

  .Navbar {}

    .Navbar-header {}

      .Navbar-brand {}

      .Navbar-searchField {}

      .Navbar-searchButton {}

    .Navbar-menu {}

      .Navbar-menuItem {}

      .Navbar-menuLink {}

.Dashboard {}

  .Dashboard-header {}

    .Dashboard-avatar {}

    .Dashboard-title {}

    .Dashboard-menu {}

  .Dashboard-subHeader {}

    .Dashboard-subMenu {}

      .Dashboard-subMenuItem {}

      .Dashboard-subMenuLink {}


.Block {}

  .Block-thumbnail {}

  .Block-title {}

  .Block-description {}

  .Block-tags {}

  .Block-status {}

  .Block-footer {}

Colors

colors.scss

Syntax: $c<colorName>

Sample

// Colors
// --------------------------------------------------
// Paragraphs
$cTypography-headers:           rgba(#333, 1);
$cTypography-paragraphs:        rgba(#666, 1);
$cTypography-secondary:         rgba(#999, 1);
$cTypography-help:              rgba(#CCC, 1);
$cTypography-headersOverBlack:  rgba(#FFF, 1);
$cTypography-link:              rgba(#0090D7, 1);
$cTypography-linkHover:         rgba(#62B4E3, 1);
$cTypography-linkSelected:      rgba(#333, 1);

// Structure
$cStructure-mainBkg:  rgba(#FFF, 1);
$cStructure-mainLine: rgba(#DDD, 1);
$cStructure-grayBkg:  rgba(#F9F9F9, 1);
$cStructure-softLine: rgba(#EEE, 1);

// Highlight
$cHighlight-main:     rgba(#0090D7, 1);
$cHighlight-positive: rgba(#8FB83F, 1);
$cHighlight-negative: rgba(#C74B43, 1);
$cHighlight-alert:    rgba(#C67B44, 1);

Don't use named colors, try to use meaningful names.

Z-Index

z-index.scss

// Z-Index Scale (private vars)
// --------------------------------------------------
@zIndex-1:   100;
@zIndex-2:   200;
@zIndex-3:   300;
@zIndex-4:   400;
@zIndex-5:   500;
@zIndex-6:   600;
@zIndex-7:   700;
@zIndex-8:   800;
@zIndex-9:   900;
@zIndex-10: 1000;

z-index file use

// Z-Index Applications
// --------------------------------------------------
@zIndex-1--screenForeground:        @zIndex-1;
@zIndex-1--followUpVisibility:      @zIndex-1;
@zIndex-1--prlWelcome:              @zIndex-1;
@zIndex-1--appImageDropdown:        @zIndex-1;
@zIndex-1--surfaceUnder:            @zIndex-1;
@zIndex-1--blockGroup:              @zIndex-1;

(…)

@zIndex-9--zoomOverlayTarget:       @zIndex-9;
@zIndex-9--navOverlayTouch:         @zIndex-9;
@zIndex-9--overlay:                 @zIndex-9;
@zIndex-9--dialog:                  @zIndex-9;
@zIndex-9--tooltip:                 @zIndex-9;

Formatting

From: https://gist.github.com/fat/a47b882eb5f84293c4ed

The following are some high level page formatting style rules.

Property: value

There should be a blank space between a property and a value:

Right:

.content-edit { background: red }

Wrong:

.content-edit {background:red}

If you have to define an only one property, leave blank spaces between brackets.

Spacing

CSS rules should be comma seperated but live on new lines:

Right:

.content,
.content-edit {
  …
}

Wrong:

.content, .content-edit {
  …
}

CSS blocks should be seperated by a single new line. not two. not 0.

Right:

.content {
  …
}
.content-edit {
  …
}

Wrong:

.content {
  …
}

.content-edit {
  …
}

Quotes

Quotes are optional in CSS and LESS. We use double quotes as it is visually clearer that the string is not a selector or a style property.

Right:

background-image: url("/img/you.jpg");
font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial;

Wrong:

background-image: url(/img/you.jpg);
font-family: Helvetica Neue Light, Helvetica Neue, Helvetica, Arial;

Colors

When implementing feature styles, you should only be using color variables provided by colors.css.scss.

When adding a color variable to colors.css.scss, using RGB and RGBA color units are preferred over hex, named, HSL, or HSLA values.

Right:

rgb(50, 50, 50);
rgba(50, 50, 50, 0.2);

Wrong:

#FFF;
#FFFFFF;
white;
hsl(120, 100%, 50%);
hsla(120, 100%, 50%, 1);

Things to add to the guide

Define a type scale (variables for font-sizes, weights, letter-spacing, line-heights, etc.).
.u- prefixed class name for single purpose utility classes like .u-underline, .u-capitalize, etc. (not sure about this one)
Don't use compass predefined functions, create a mixin in new mixins.css.scssfile.
No more clearfix or layout hacks, use flexbox:
- http://css-tricks.com/snippets/css/a-guide-to-flexbox/
- http://chriswrightdesign.com/experiments/flexbox-adventures/

CSSComb config

   "config": {

        // Whether to add a semicolon after the last value/mixin.
        "always-semicolon": true,

        // Set indent for code inside blocks, including media queries and nested rules.
        "block-indent": "  ",

        // Unify case of hexadecimal colors.
        "color-case": "lower",

        // Whether to expand hexadecimal colors or use shorthands.
        "color-shorthand": true,

        // Unify case of element selectors.
        "element-case": "lower",

        // Add/remove line break at EOF.
        "eof-newline": true,

        // Add/remove leading zero in dimensions.
        "leading-zero": false,

        // Unify quotes style.
        "quotes": "single",

        // Remove all rulesets that contain nothing but spaces.
        "remove-empty-rulesets": true,

        // Set space after `:` in declarations.
        "space-after-colon": " ",

        // Set space after combinator (for example, in selectors like `p > a`).
        "space-after-combinator": " ",

        // Set space after `{`.
        "space-after-opening-brace": "\n",

        // Set space after selector delimiter.
        "space-after-selector-delimiter": "\n",

        // Set space before `}`.
        "space-before-closing-brace": "\n",

        // Set space before `:` in declarations.
        "space-before-colon": "",

        // Set space before combinator (for example, in selectors like `p > a`).
        "space-before-combinator": " ",

        // Set space before `{`.
        "space-before-opening-brace": " ",

        // Set space before selector delimiter.
        "space-before-selector-delimiter": "",

        // Set space between declarations (i.e. `color: tomato`).
        "space-between-declarations": "\n",

        // Whether to trim trailing spaces.
        "strip-spaces": true,

        // Whether to remove units in zero-valued dimensions.
        "unitless-zero": true,

        // Whether to align prefixes in properties and values.
        "vendor-prefix-align": true,

        // Sort properties in particular order.
        "sort-order": [
            "position",
            "top",
            "right",
            "bottom",
            "left",
            "z-index",
            "display",
            "float",
            "width",
            "min-width",
            "max-width",
            "height",
            "min-height",
            "max-height",
            "-webkit-box-sizing",
            "-moz-box-sizing",
            "box-sizing",
            "-webkit-appearance",
            "-moz-appearance",
            "appearance",
            "padding",
            "padding-top",
            "padding-right",
            "padding-bottom",
            "padding-left",
            "margin",
            "margin-top",
            "margin-right",
            "margin-bottom",
            "margin-left",
            "overflow",
            "overflow-x",
            "overflow-y",
            "-webkit-overflow-scrolling",
            "-ms-overflow-x",
            "-ms-overflow-y",
            "-ms-overflow-style",
            "clip",
            "clear",
            "src",
            "font",
            "font-family",
            "font-size",
            "font-weight",
            "font-style",
            "font-variant",
            "font-size-adjust",
            "font-stretch",
            "font-effect",
            "font-emphasize",
            "font-emphasize-position",
            "font-emphasize-style",
            "font-smooth",
            "-webkit-hyphens",
            "-moz-hyphens",
            "hyphens",
            "line-height",
            "color",
            "text-align",
            "-webkit-text-align-last",
            "-moz-text-align-last",
            "-ms-text-align-last",
            "text-align-last",
            "text-emphasis",
            "text-emphasis-color",
            "text-emphasis-style",
            "text-emphasis-position",
            "text-decoration",
            "text-underline-position",
            "-webkit-text-decoration-style",
            "-moz-text-decoration-style",
            "text-decoration-style",
            "-moz-text-decoration-color",
            "text-decoration-color",
            "-moz-text-decoration-line",
            "text-decoration-line",
            "text-indent",
            "-ms-text-justify",
            "text-justify",
            "text-outline",
            "-ms-text-overflow",
            "text-overflow",
            "text-overflow-ellipsis",
            "text-overflow-mode",
            "text-shadow",
            "text-transform",
            "text-wrap",
            "-webkit-text-size-adjust",
            "-moz-text-size-adjust",
            "-ms-text-size-adjust",
            "text-size-adjust",
            "letter-spacing",
            "-ms-word-break",
            "word-break",
            "word-spacing",
            "-ms-word-wrap",
            "word-wrap",
            "-moz-tab-size",
            "-o-tab-size",
            "tab-size",
            "white-space",
            "vertical-align",
            "list-style",
            "list-style-position",
            "list-style-type",
            "list-style-image",
            "pointer-events",
            "-webkit-touch-action",
            "-ms-touch-action",
            "touch-action",
            "cursor",
            "visibility",
            "zoom",
            "flex-direction",
            "flex-order",
            "flex-pack",
            "flex-align",
            "table-layout",
            "empty-cells",
            "caption-side",
            "border-spacing",
            "border-collapse",
            "content",
            "quotes",
            "counter-reset",
            "counter-increment",
            "resize",
            "-webkit-user-select",
            "-moz-user-select",
            "-ms-user-select",
            "user-select",
            "nav-index",
            "nav-up",
            "nav-right",
            "nav-down",
            "nav-left",
            "background",
            "background-color",
            "background-image",
            "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
            "filter:progid:DXImageTransform.Microsoft.gradient",
            "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
            "filter",
            "background-repeat",
            "background-attachment",
            "background-position",
            "background-position-x",
            "-ms-background-position-x",
            "background-position-y",
            "-ms-background-position-y",
            "-webkit-background-clip",
            "-moz-background-clip",
            "background-clip",
            "background-origin",
            "-webkit-background-size",
            "-moz-background-size",
            "-o-background-size",
            "background-size",
            "border",
            "border-width",
            "border-style",
            "border-color",
            "border-top",
            "border-top-width",
            "border-top-style",
            "border-top-color",
            "border-right",
            "border-right-width",
            "border-right-style",
            "border-right-color",
            "border-bottom",
            "border-bottom-width",
            "border-bottom-style",
            "border-bottom-color",
            "border-left",
            "border-left-width",
            "border-left-style",
            "border-left-color",
            "-webkit-box-decoration-break",
            "box-decoration-break",
            "-webkit-border-radius",
            "-moz-border-radius",
            "border-radius",
            "-webkit-border-top-left-radius",
            "-moz-border-radius-topleft",
            "border-top-left-radius",
            "-webkit-border-top-right-radius",
            "-moz-border-radius-topright",
            "border-top-right-radius",
            "-webkit-border-bottom-right-radius",
            "-moz-border-radius-bottomright",
            "border-bottom-right-radius",
            "-webkit-border-bottom-left-radius",
            "-moz-border-radius-bottomleft",
            "border-bottom-left-radius",
            "-webkit-border-image",
            "-moz-border-image",
            "-o-border-image",
            "border-image",
            "-webkit-border-image-source",
            "-moz-border-image-source",
            "-o-border-image-source",
            "border-image-source",
            "-webkit-border-image-slice",
            "-moz-border-image-slice",
            "-o-border-image-slice",
            "border-image-slice",
            "-webkit-border-image-width",
            "-moz-border-image-width",
            "-o-border-image-width",
            "border-image-width",
            "-webkit-border-image-outset",
            "-moz-border-image-outset",
            "-o-border-image-outset",
            "border-image-outset",
            "-webkit-border-image-repeat",
            "-moz-border-image-repeat",
            "-o-border-image-repeat",
            "border-image-repeat",
            "outline",
            "outline-width",
            "outline-style",
            "outline-color",
            "outline-offset",
            "-webkit-box-shadow",
            "-moz-box-shadow",
            "box-shadow",
            "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
            "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
            "opacity",
            "-ms-interpolation-mode",
            "-webkit-transition",
            "-moz-transition",
            "-ms-transition",
            "-o-transition",
            "transition",
            "-webkit-transition-delay",
            "-moz-transition-delay",
            "-ms-transition-delay",
            "-o-transition-delay",
            "transition-delay",
            "-webkit-transition-timing-function",
            "-moz-transition-timing-function",
            "-ms-transition-timing-function",
            "-o-transition-timing-function",
            "transition-timing-function",
            "-webkit-transition-duration",
            "-moz-transition-duration",
            "-ms-transition-duration",
            "-o-transition-duration",
            "transition-duration",
            "-webkit-transition-property",
            "-moz-transition-property",
            "-ms-transition-property",
            "-o-transition-property",
            "transition-property",
            "-webkit-transform",
            "-moz-transform",
            "-ms-transform",
            "-o-transform",
            "transform",
            "-webkit-transform-origin",
            "-moz-transform-origin",
            "-ms-transform-origin",
            "-o-transform-origin",
            "transform-origin",
            "-webkit-animation",
            "-moz-animation",
            "-ms-animation",
            "-o-animation",
            "animation",
            "-webkit-animation-name",
            "-moz-animation-name",
            "-ms-animation-name",
            "-o-animation-name",
            "animation-name",
            "-webkit-animation-duration",
            "-moz-animation-duration",
            "-ms-animation-duration",
            "-o-animation-duration",
            "animation-duration",
            "-webkit-animation-play-state",
            "-moz-animation-play-state",
            "-ms-animation-play-state",
            "-o-animation-play-state",
            "animation-play-state",
            "-webkit-animation-timing-function",
            "-moz-animation-timing-function",
            "-ms-animation-timing-function",
            "-o-animation-timing-function",
            "animation-timing-function",
            "-webkit-animation-delay",
            "-moz-animation-delay",
            "-ms-animation-delay",
            "-o-animation-delay",
            "animation-delay",
            "-webkit-animation-iteration-count",
            "-moz-animation-iteration-count",
            "-ms-animation-iteration-count",
            "-o-animation-iteration-count",
            "animation-iteration-count",
            "-webkit-animation-direction",
            "-moz-animation-direction",
            "-ms-animation-direction",
            "-o-animation-direction",
            "animation-direction",
            "-webkit-text-orientation",
            "-moz-text-orientation",
            "-o-text-orientation",
            "text-orientation",
            "-ms-writing-mode",
            "text-rendering",
            "-webkit-font-smoothing",
            "-moz-osx-font-smoothing",
            "font-smoothing",
            "direction",
            "unicode-bidi"
        ]
    }

Avatars/List

<ul class="CDB-AvatarList">
  <li class="CDB-AvatarList-item">
    <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia">
  </li>
  <li class="CDB-AvatarList-item">
    <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia">
  </li>
  <li class="CDB-AvatarList-item">
    <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia">
  </li>
  <li class="CDB-AvatarList-itemMore">
    <button class="CDB-Text is-semibold CDB-Size-small u-secondaryTextColor">+ 16</button>
  </li>
</ul>

Boxes/Dropdown

<div class="CDB-Box-Modal">&#xA0;</div>

Boxes/Info Boxes

ABOUT PREVIEW MODE

He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear

CLOSE

ABOUT PREVIEW MODE

He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear

<div class="CDB-InfoBox">
  <h2 class="CDB-Text is-semibold CDB-Size-small u-bSpace--m">ABOUT PREVIEW MODE</h2>
  <p class="CDB-Text CDB-Size-medium u-bSpace--m">He&apos;s a queer man, Captain Ahab&#x2014;so some thinkbut a good one. Oh, thou&apos;lt like him well enough; no fear, no fear</p>
  <p class="CDB-Text is-semibold CDB-Size-small"><a href="#">CLOSE</a></p>
</div>
<br>
<br>
<br>
<div class="CDB-InfoBox is-alert">
  <h2 class="CDB-Text is-semibold CDB-Size-small u-bSpace--m">ABOUT PREVIEW MODE</h2>
  <p class="CDB-Text CDB-Size-medium u-bSpace--m">He&apos;s a queer man, Captain Ahab&#x2014;so some thinkbut a good one. Oh, thou&apos;lt like him well enough; no fear, no fear</p>
  <ul class="CDB-InfoBox-footer">
    <li class="CDB-InfoBox-footerItem">
      <p class="CDB-Text is-semibold CDB-Size-small"><a href="#">CLOSE</a></p>
    </li>
    <li class="CDB-InfoBox-footerItem CDB-InfoBox-footerItem--right">
      <button class="CDB-Button CDB-Button--secondary CDB-Button--small">
        <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
      </button>
    </li>
  </ul>
</div>

Boxes/Loader

Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows Query applied. Showing 2,561 rowsQuery applied. Showing 2,561 rows Query applied. Showing 2,561 rows

Finished importing populated_places_2
Geocoding populated_places_2 (28%)

Finished importing populated_places_2

Error in query. Data might be outdated

<div class="CDB-BoxLoader">
  <ul class="CDB-BoxLoader-inner">
    <li class="CDB-BoxLoader-item">
      <div class="CDB-Shape u-rSpace--m">
        <div class="CDB-Shape-CircleItem is-green is-medium">
          <div class="CDB-Shape-tick is-medium is-green"></div>
        </div>
      </div>
      <div class="CDB-BoxLoader-info">
        <p class="CDB-Text CDB-Size-medium">Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows Query applied. Showing 2,561 rowsQuery applied. Showing 2,561 rows Query applied. Showing 2,561 rows</p>
      </div>
      <div class="CDB-BoxLoader-actions">
        <div class="CDB-Shape">
          <div class="CDB-Shape-threePoints is-small is-blue">
            <div class="CDB-Shape-threePointsItem"></div>
            <div class="CDB-Shape-threePointsItem"></div>
            <div class="CDB-Shape-threePointsItem"></div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="CDB-BoxLoader">
  <ul class="CDB-BoxLoader-inner">
    <li class="CDB-BoxLoader-item">
      <div class="CDB-Shape u-rSpace--m">
        <div class="CDB-Shape-CircleItem is-green is-medium">
          <div class="CDB-Shape-tick is-medium is-green"></div>
        </div>
      </div>
      <div class="CDB-BoxLoader-info">
        <p class="CDB-Text CDB-Size-medium">Finished importing <a href="#">populated_places_2</a></p>
      </div>
    </li>
    <li class="CDB-BoxLoader-item is-working">
      <div class="CDB-LoaderIcon u-rSpace--m">
        <div class="CDB-LoaderIcon-item"></div>
      </div>
      <div class="CDB-BoxLoader-info">
        <p class="CDB-Text CDB-Size-medium">Geocoding populated_places_2 (28%)</p>
      </div>
      <div class="CDB-BoxLoader-actions">
        <div class="CDB-Shape">
          <div class="CDB-Shape-close is-blue is-large"></div>
        </div>
      </div>
    </li>
  </ul>
  <ul class="CDB-BoxLoader-inner">
    <li class="CDB-BoxLoader-item">
      <div class="CDB-Shape u-rSpace--m">
        <div class="CDB-Shape-CircleItem is-green is-medium">
          <div class="CDB-Shape-tick is-medium is-green"></div>
        </div>
      </div>
      <div class="CDB-BoxLoader-info">
        <p class="CDB-Text CDB-Size-medium">Finished importing <a href="#">populated_places_2</a></p>
      </div>
    </li>
  </ul>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="CDB-BoxLoader">
  <ul class="CDB-BoxLoader-inner">
    <li class="CDB-BoxLoader-item">
      <div class="CDB-Shape u-rSpace--m">
        <div class="CDB-Shape-CircleItem is-red">
          <div class="CDB-Shape-close is-medium is-red"></div>
        </div>
      </div>
      <div class="CDB-BoxLoader-info">
        <p class="CDB-Text CDB-Size-medium">Error in query. Data might be outdated</p>
      </div>
      <div class="CDB-BoxLoader-actions">
        <div class="CDB-Shape">
          <div class="CDB-Shape-threePoints is-small is-blue">
            <div class="CDB-Shape-threePointsItem"></div>
            <div class="CDB-Shape-threePointsItem"></div>
            <div class="CDB-Shape-threePointsItem"></div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

Buttons/Primary

Layout Component: [CDB-Button][CDB-Button--primary | CDB-Button--secondary]

<button class="CDB-Button CDB-Button--primary">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>

<button class="CDB-Button CDB-Button--primary is-disabled">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>

<button class="CDB-Button CDB-Button--primary CDB-Button--small">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>

<button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>

<button class="CDB-Button CDB-Button--primary CDB-Button--icon">
  <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
</button>

<br>
<br>
<br>

<div style="background: #2E3C43; padding: 20px;">
  <button class="CDB-Button CDB-Button--primary">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  </button>

  <button class="CDB-Button CDB-Button--primary is-disabled">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  </button>

  <button class="CDB-Button CDB-Button--primary CDB-Button--small">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
  </button>

  <button class="CDB-Button CDB-Button--primary CDB-Button--small is-disabled">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
  </button>

  <button class="CDB-Button CDB-Button--primary CDB-Button--icon">
    <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
  </button>

</div>

Buttons/Secondary

<button class="CDB-Button CDB-Button--secondary">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>

<button class="CDB-Button CDB-Button--secondary is-disabled">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
</button>

<button class="CDB-Button CDB-Button--secondary CDB-Button--small">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>

<button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
</button>

<br>
<br>
<br>

<div style="background: #2E3C43; padding: 20px;">
  <button class="CDB-Button CDB-Button--secondary">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  </button>

  <button class="CDB-Button CDB-Button--secondary is-disabled">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  </button>

  <button class="CDB-Button CDB-Button--secondary CDB-Button--small">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
  </button>

  <button class="CDB-Button CDB-Button--secondary CDB-Button--small is-disabled">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
  </button>
</div>

Carousel

<div>
  <ul class="CDB-Carousel">
    <li class="CDB-CarouselItem is-selected"></li>
    <li class="CDB-CarouselItem"></li>
    <li class="CDB-CarouselItem"></li>
    <li class="CDB-CarouselItem"></li>
    <li class="CDB-CarouselItem"></li>
  </ul>
</div>

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>

Forms/Checkbox

<div class="u-iBlock">
  <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bike" checked>
  <span class="u-iBlock CDB-Checkbox-face"></span>
</div>
<div class="u-iBlock">
  <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bus">
  <span class="u-iBlock CDB-Checkbox-face"></span>
</div>
<div class="u-iBlock">
  <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Car" disabled>
  <span class="u-iBlock CDB-Checkbox-face"></span>
</div>

Forms/Inputs

<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText has-error CDB-Text">
<input type="text" name="text" placeholder="DejaVu Sans" disabled class="CDB-InputText is-disabled CDB-Text">

Forms/Labels

True

False

Sport

Travel

RADIO

Sport
Travel

RADIO

<div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
  <input class="CDB-Radio" type="radio" name="veritas" value="01">
  <span class="u-iBlock CDB-Radio-face"></span>
  <label class="u-iBlock u-lSpace">True</label>
</div>
<div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
  <input class="CDB-Radio" type="radio" name="veritas" value="02" checked>
  <span class="u-iBlock CDB-Radio-face"></span>
  <label class="u-iBlock u-lSpace">False</label>
</div>

<br>
<br>
<br>

<div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
  <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
  <span class="u-iBlock CDB-Checkbox-face"></span>
  <label class="u-iBlock u-lSpace">Sport</label>
</div>
<label class="u-iblock CDB-Text CDB-Size-medium">
  <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
  <span class="u-iBlock CDB-Checkbox-face"></span>
  <label class="u-iBlock u-lSpace">Travel</label>
</label>

<br>
<br>
<br>

<fieldset>
  <p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
  <ul class="CDB-Text CDB-Size-medium u-iBlock">
    <li class="u-iBlock u-rSpace--xl">
      <div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
        <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
        <span class="u-iBlock CDB-Checkbox-face"></span>
        <label class="u-iBlock u-lSpace">Sport</label>
      </div>
    </li>
    <li class="u-iblock">
      <label class="u-iblock CDB-Text CDB-Size-medium">
        <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
        <span class="u-iBlock CDB-Checkbox-face"></span>
        <label class="u-iBlock u-lSpace">Travel</label>
      </label>
    </li>
  </ul>
</fieldset>
<fieldset class="u-tSpace-xl CDB-Text">
  <p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
  <div class="u-iBlock">
    <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
  </div>
</fieldset>

Forms/Radio

<div class="u-iBlock">
  <input class="CDB-Radio" type="radio" name="gender" value="01" checked>
  <span class="u-iBlock CDB-Radio-face"></span>
</div>
<div class="u-iBlock">
  <input class="CDB-Radio" type="radio" name="gender" value="02">
  <span class="u-iBlock CDB-Radio-face"></span>
</div>
<div class="u-iBlock">
  <input class="CDB-Radio" type="radio" name="gender" value="03" disabled>
  <span class="u-iBlock CDB-Radio-face"></span>
</div>

Forms/Selects

<div class="CDB-Select" style="height: 250px;">
  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text">
  <div class="CDB-Box-Modal CDB-SelectItem">
    <ul class="CDB-Text CDB-Size-medium">
      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Hide</a></li>
      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Rename</a></li>
      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Change source dataset&#x2026;</a></li>
      <li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Delete this layer&#x2026;</a></li>
    </ul>
  </div>
</div>

Forms/Sliders

<input type="range" min="100" max="500" step="50" value="300" class="CDB-Range">

Forms/Textareas

<textarea name="textarea" placeholder="DejaVu Sans" class="CDB-Textarea CDB-Text"></textarea>
<textarea name="textarea" placeholder="DejaVu Sans" class="CDB-Textarea has-error CDB-Text"></textarea>
<textarea name="textarea" placeholder="DejaVu Sans" class="CDB-Textarea is-disabled CDB-Text" disabled></textarea>

Forms/Toggle

TOOLS SQL

<div class="CDB-Text CDB-Size-small is-semibold u-rSpace--xl">
  <label class="u-iBlock">TOOLS</label>
  <input class="CDB-Toggle u-iBlock" type="checkbox" name="analysis">
  <span class="u-iBlock CDB-ToggleFace"></span>
  <label class="u-iBlock">SQL</label>
</div>

Headers

Name Map

Published 8 days ago

Stadiums Affected Stadiums Affected Stadiums AffectedStadiums Affected Stadiums Affected Stadiums Affected Stadiums Affected

populates_places

Basemap

Positron by CartoDB

populates_places

1

Type

Histogram

Distribution of a numeric variable in a range

<div class="CDB-HeaderInfo is-block">
  <div class="CDB-HeaderInfo-Title u-bSpace">
    <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Name Map</h2>
    <div class="CDB-HeaderInfo-Actions">
      <a href="#">
          <div class="CDB-Shape">
            <div class="CDB-Shape-threePoints is-blue is-small">
              <div class="CDB-Shape-threePointsItem"></div>
              <div class="CDB-Shape-threePointsItem"></div>
              <div class="CDB-Shape-threePointsItem"></div>
            </div>
          </div>
      </a>
    </div>
  </div>
  <ul class="CDB-HeaderInfo-List">
    <li class="CDB-HeaderInfo-ListItem">
      <button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock">
        PUBLIC
      </button>
    </li>
    <li class="CDB-HeaderInfo-ListItem">
      <ul class="CDB-AvatarList u-iBlock">
        <li class="CDB-AvatarList-item">
          <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia">
        </li>
        <li class="CDB-AvatarList-item">
          <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia">
        </li>
        <li class="CDB-AvatarList-item">
          <img src="/src/img/avatar-40x40.png" alt="User Name" class="CDB-AvatarList-itemMedia">
        </li>
        <li class="CDB-AvatarList-itemMore">
          <button class="CDB-Text is-semibold CDB-Size-small">+ 16</button>
        </li>
      </ul>
    </li>
    <li class="CDB-HeaderInfo-ListItem">
      <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-iBlock u-altTextColor">Published 8 days ago</p>
    </li>
  </ul>
</div>

<br>
<br>
<br>

<div class="CDB-HeaderInfo">
  <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
  </a>
  <div class="CDB-HeaderInfo-Inner">
    <div class="CDB-HeaderInfo-Title u-bSpace">
      <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Stadiums Affected Stadiums Affected Stadiums AffectedStadiums Affected Stadiums Affected Stadiums Affected Stadiums Affected </h2>
      <ul class="CDB-HeaderInfo-Actions">
        <li class="CDB-HeaderInfo-ActionsItem">
          <button class="CDB-Button CDB-Button--primary CDB-Button--icon">
            <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
          </button>
        </li>
        <li class="CDB-HeaderInfo-ActionsItem">
          <a href="#">
              <div class="CDB-Shape">
                <div class="CDB-Shape-threePoints is-blue is-small">
                  <div class="CDB-Shape-threePointsItem"></div>
                  <div class="CDB-Shape-threePointsItem"></div>
                  <div class="CDB-Shape-threePointsItem"></div>
                </div>
              </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="CDB-Shape u-iBlock">
      <ul class="CDB-Shape-Dataset is-small is-grey">
        <li class="CDB-Shape-DatasetItem"></li>
        <li class="CDB-Shape-DatasetItem"></li>
      </ul>
    </div>
    <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
  </div>
</div>

<br>
<br>
<br>

<div class="CDB-HeaderInfo">
  <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
  </a>
  <div class="CDB-HeaderInfo-Inner">
    <div class="CDB-HeaderInfo-Title u-bSpace">
      <h2 class="CDB-HeaderInfo-TitleText CDB-Text CDB-Size-huge is-light">Basemap</h2>
      <div class="CDB-HeaderInfo-Actions">
        <a href="#">
            <div class="CDB-Shape">
              <div class="CDB-Shape-threePoints is-blue is-small">
                <div class="CDB-Shape-threePointsItem"></div>
                <div class="CDB-Shape-threePointsItem"></div>
                <div class="CDB-Shape-threePointsItem"></div>
              </div>
            </div>
        </a>
      </div>
    </div>
    <p class="CDB-HeaderInfo-Text CDB-Text CDB-Size-medium u-altTextColor">Positron by CartoDB</p>
  </div>
</div>

<br>
<br>
<br>

<div class="CDB-HeaderInfo">
  <a href="#" class="u-rSpace--xl CDB-HeaderInfo-Back">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
  </a>
  <div class="CDB-HeaderInfo-Inner">
    <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text u-bSpace--m">
    <div class="CDB-Shape u-iBlock">
      <ul class="CDB-Shape-Dataset is-small is-grey">
        <li class="CDB-Shape-DatasetItem"></li>
        <li class="CDB-Shape-DatasetItem"></li>
      </ul>
    </div>
    <p class="CDB-Text CDB-Size-medium u-iBlock"><a href="#" class="u-iBlock">populates_places</a></p>
  </div>
</div>

<br>
<br>
<br>

<div class="CDB-HeaderInfo">
  <div class="CDB-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>

  <div class="CDB-HeaderInfo-Inner CDB-Text">
    <div class="CDB-HeaderInfo-Title u-bSpace--m">
      <h2 class="CDB-Text CDB-HeaderInfo-TitleText CDB-Size-large">Type</h2>

      <div class="CDB-HeaderInfo-Actions">
        <a href="#">
          <div class="CDB-Shape">
            <div class="CDB-ArrowToogle is-blue is-small is-down"></div>
          </div>
        </a>
      </div>
    </div>

    <p class="CDB-Text u-upperCase CDB-FontSize-small u-altTextColor u-bSpace--m">Histogram</p>
    <p class="CDB-Text CDB-Size-medium u-altTextColor">Distribution of a numeric variable in a range</p>
  </div>
</div>

<br>
<br>
<br>

Lists/Lists Decorations

<div class="CDB-Box-Modal">&#xA0;</div>

Loader/circle

<div style="padding: 20px;">
  <div class="CDB-LoaderIcon">
    <div class="CDB-LoaderIcon-item"></div>
  </div>
</div>

<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-LoaderIcon is-grey">
    <div class="CDB-LoaderIcon-item is-grey"></div>
  </div>
</div>

Loader/principal

This is the generic loader for widgets, maps, components, ...

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

Menu/Editor

<div class="CDB-MenuEditor">
  <div class="CDB-MenuEditor-logo">
    <i class="CDB-IconFont CDB-IconFont-cartoFante u-actionTextColor"></i>
  </div>
  <nav>
    <ul class="CDB-MenuEditor-navigation">
      <li class="CDB-MenuEditor-navigationItem is-selected">
        <a href="#" class="CDB-MenuEditor-navigationLink">
          <i class="CDB-IconFont CDB-IconFont-edition CDB-MenuEditor-navigationIcon"></i>
        </a>
      </li>
      <li class="CDB-MenuEditor-navigationItem">
        <a href="#" class="CDB-MenuEditor-navigationLink">
          <i class="CDB-IconFont CDB-IconFont-view CDB-MenuEditor-navigationIcon"></i>
        </a>
      </li>
      <li class="CDB-MenuEditor-navigationItem">
        <a href="#" class="CDB-MenuEditor-navigationLink">
          <i class="CDB-IconFont CDB-IconFont-odyssey CDB-MenuEditor-navigationIcon"></i>
        </a>
      </li>
      <li class="CDB-MenuEditor-navigationItem">
        <a href="#" class="CDB-MenuEditor-navigationLink">
          <i class="CDB-IconFont CDB-IconFont-settings CDB-MenuEditor-navigationIcon"></i>
        </a>
      </li>
    </ul>
  </nav>
  <a href="http://piensaenpixel.cartodb.com" class="CDB-MenuEditor-avatar">
    <img src="https://s3.amazonaws.com/com.cartodb.users-assets.production/production/piensaenpixel/assets/20150507074635Captura%20de%20pantalla%202015-05-07%20a%20la%28s%29%2009.46.28.png" class="CDB-MenuEditor-avatarImage">
  </a>
</div>

Menu/Navigation

<nav class="CDB-NavMenu">
  <ul class="CDB-NavMenu-Inner CDB-Text is-semibold CDB-Size-medium">
    <li class="CDB-NavMenu-Item">
      <button class="CDB-NavMenu-Link">DATA</button>
    </li>
    <li class="CDB-NavMenu-Item">
      <button class="CDB-NavMenu-Link">STYLE</button>
    </li>
    <li class="CDB-NavMenu-Item is-selected">
      <button class="CDB-NavMenu-Link">POP-UP</button>
      <ul class="CDB-NavSubmenu CDB-Size-small">
        <li class="CDB-NavSubmenu-Item is-selected">
          <button class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status u-hintTextColor">NONE</span></button>
        </li>
        <li class="CDB-NavSubmenu-Item">
          <button class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status u-hintTextColor">NONE</span></button>
        </li>
      </ul>
    </li>
    <li class="CDB-NavMenu-Item">
      <button class="CDB-NavMenu-Link">LEGEND</button>
    </li>
  </ul>
  <div style="position: absolute; right: 0; top: 0; height: 24px; width: 46px; background: red;">
    <!-- ready for a button -->
  </div>
</nav>

<br><br>
<br><br>

<div style="background: #2E3C43; height: 100px; padding: 20px;">
  <nav class="CDB-NavMenu is-dark">
    <ul class="CDB-NavMenu-Inner CDB-Text is-semibold CDB-Size-medium">
      <li class="CDB-NavMenu-Item CDB-Text">
        <button class="CDB-NavMenu-Link">DATA</button>
      </li>
      <li class="CDB-NavMenu-Item">
        <button class="CDB-NavMenu-Link">STYLE</button>
      </li>
      <li class="CDB-NavMenu-item is-selected">
        <button class="CDB-NavMenu-Link">POP-UP</button>
        <ul class="CDB-NavSubmenu CDB-Size-small">
          <li class="CDB-NavSubmenu-Item is-selected">
            <button class="CDB-NavSubmenu-Link">CLICK <span class="CDB-NavSubmenu-Status">NONE</span></button>
          </li>
          <li class="CDB-NavSubmenu-Item">
            <button class="CDB-NavSubmenu-Link">HOVER <span class="CDB-NavSubmenu-Status">NONE</span></button>
          </li>
        </ul>
      </li>
      <li class="CDB-NavMenu-Item">
        <button class="CDB-NavMenu-Link">LEGEND</button>
      </li>
    </ul>
  </nav>
</div>

<br><br>
<br><br>

Shapes/Add

Description

16px

12px

<h2>16px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-add"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-add is-blue"></div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-add is-white"></div>
  </div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-add is-small"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-add is-blue is-small"></div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-add is-white is-small"></div>
  </div>
</div>

Shapes/Arrow

Description

<div style="padding: 20px;">
  <div class="CDB-Shape-Arrow"></div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape-Arrow is-blue"></div>
</div>
<div style="padding: 20px; background: #2E3C43">
  <div class="CDB-Shape-Arrow is-white"></div>
</div>

Shapes/Check circle

Description

16px

12px

<h2>16px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-CircleItem">
      <div class="CDB-Shape-tick is-medium"></div>
    </div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-CircleItem is-blue">
      <div class="CDB-Shape-tick is-medium is-blue"></div>
    </div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-CircleItem is-white">
      <div class="CDB-Shape-tick is-medium is-white"></div>
    </div>
  </div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-CircleItem is-small">
      <div class="CDB-Shape-tick is-small"></div>
    </div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-CircleItem is-blue is-small">
      <div class="CDB-Shape-tick is-small is-blue"></div>
    </div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-CircleItem is-white is-small">
      <div class="CDB-Shape-tick is-small is-white"></div>
    </div>
  </div>
</div>

Shapes/Close

Description

16px

12px

<h2>16px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-close is-huge"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-close is-blue is-huge"></div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-close is-white is-huge"></div>
  </div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-close is-large"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-close is-blue is-large"></div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-close is-white is-large"></div>
  </div>
</div>

Shapes/Dash

Description

16px

12px

<h2>16px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-dash"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-dash is-blue"></div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-dash is-white"></div>
  </div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-dash is-small"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-dash is-blue is-small"></div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-dash is-white is-small"></div>
  </div>
</div>

Shapes/Dataset

Description

16px

12px

<h2>16px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <ul class="CDB-Shape-Dataset">
      <li class="CDB-Shape-DatasetItem"></li>
      <li class="CDB-Shape-DatasetItem"></li>
    </ul>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <ul class="CDB-Shape-Dataset is-blue">
      <li class="CDB-Shape-DatasetItem"></li>
      <li class="CDB-Shape-DatasetItem"></li>
    </ul>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <ul class="CDB-Shape-Dataset is-grey">
      <li class="CDB-Shape-DatasetItem"></li>
      <li class="CDB-Shape-DatasetItem"></li>
    </ul>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <ul class="CDB-Shape-Dataset is-white">
      <li class="CDB-Shape-DatasetItem"></li>
      <li class="CDB-Shape-DatasetItem"></li>
    </ul>
  </div>
</div>
<br>
<br>
<br>
<br>

<h2>12px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <ul class="CDB-Shape-Dataset is-small">
      <li class="CDB-Shape-DatasetItem"></li>
      <li class="CDB-Shape-DatasetItem"></li>
    </ul>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <ul class="CDB-Shape-Dataset is-small is-blue">
      <li class="CDB-Shape-DatasetItem"></li>
      <li class="CDB-Shape-DatasetItem"></li>
    </ul>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <ul class="CDB-Shape-Dataset is-small is-grey">
      <li class="CDB-Shape-DatasetItem"></li>
      <li class="CDB-Shape-DatasetItem"></li>
    </ul>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <ul class="CDB-Shape-Dataset is-small is-white">
      <li class="CDB-Shape-DatasetItem"></li>
      <li class="CDB-Shape-DatasetItem"></li>
    </ul>
  </div>
</div>

Shapes/Dots

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/Error circle

Description

16px

12px

<h2>16px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-CircleItem">
      <div class="CDB-Shape-close is-medium"></div>
    </div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-CircleItem is-blue">
      <div class="CDB-Shape-close is-medium is-blue"></div>
    </div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-CircleItem is-white">
      <div class="CDB-Shape-close is-medium is-white"></div>
    </div>
  </div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-CircleItem is-small">
      <div class="CDB-Shape-close is-small"></div>
    </div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-CircleItem is-blue is-small">
      <div class="CDB-Shape-close is-small is-blue"></div>
    </div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-CircleItem is-white is-small">
      <div class="CDB-Shape-close is-small is-white"></div>
    </div>
  </div>
</div>

Shapes/Hamburguer

Description

<div style="padding: 20px">
  <div class="CDB-Shape-hamburguer">
    <div class="CDB-Shape-hamburguerItem"></div>
    <div class="CDB-Shape-hamburguerItem"></div>
    <div class="CDB-Shape-hamburguerItem"></div>
  </div>
</div>

<div style="padding: 20px;">
  <div class="CDB-Shape-hamburguer is-blue">
    <div class="CDB-Shape-hamburguerItem"></div>
    <div class="CDB-Shape-hamburguerItem"></div>
    <div class="CDB-Shape-hamburguerItem"></div>
  </div>
</div>

<div style="background: #2E3C43; padding: 20px;">
  <div class="CDB-Shape-hamburguer is-white">
    <div class="CDB-Shape-hamburguerItem"></div>
    <div class="CDB-Shape-hamburguerItem"></div>
    <div class="CDB-Shape-hamburguerItem"></div>
  </div>
</div>

Shapes/Magnify

Description

16px

12px

<h2>16px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-magnify"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-magnify is-blue"></div>
  </div>
</div>
<div style="background: #2E3C43; padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-magnify is-white"></div>
  </div>
</div>
<br>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-magnify is-small"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-magnify is-blue is-small"></div>
  </div>
</div>
<div style="background: #2E3C43; padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-magnify is-white is-small"></div>
  </div>
</div>

Shapes/Move

Description

16px

12px

<h2>16px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-Move">
      <div class="CDB-Shape-MoveItem is-first"></div>
      <div class="CDB-Shape-MoveItem is-second"></div>
      <div class="CDB-Shape-MoveItem is-third"></div>
    </div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-Move">
      <div class="CDB-Shape-MoveItem is-blue is-first"></div>
      <div class="CDB-Shape-MoveItem is-blue is-second"></div>
      <div class="CDB-Shape-MoveItem is-blue is-third"></div>
    </div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-Move">
      <div class="CDB-Shape-MoveItem is-white is-first"></div>
      <div class="CDB-Shape-MoveItem is-white is-second"></div>
      <div class="CDB-Shape-MoveItem is-white is-third"></div>
    </div>
  </div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-Move is-small">
      <div class="CDB-Shape-MoveItem is-first"></div>
      <div class="CDB-Shape-MoveItem is-second"></div>
      <div class="CDB-Shape-MoveItem is-third"></div>
    </div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-Move is-small">
      <div class="CDB-Shape-MoveItem is-blue is-first"></div>
      <div class="CDB-Shape-MoveItem is-blue is-second"></div>
      <div class="CDB-Shape-MoveItem is-blue is-third"></div>
    </div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-Move is-small">
      <div class="CDB-Shape-MoveItem is-white is-first"></div>
      <div class="CDB-Shape-MoveItem is-white is-second"></div>
      <div class="CDB-Shape-MoveItem is-white is-third"></div>
    </div>
  </div>
</div>

Shapes/Three Points

Description

24px

16px

12px

<h2>24px</h2>
<div style="padding: 20px;">
  <button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-threePoints is-horizontal is-medium">
      <div class="CDB-Shape-threePointsItem is-round"></div>
      <div class="CDB-Shape-threePointsItem is-round"></div>
      <div class="CDB-Shape-threePointsItem is-round"></div>
    </div>
  </button>
</div>
<div style="padding: 20px;">
  <button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-threePoints is-horizontal is-blue is-medium">
      <div class="CDB-Shape-threePointsItem is-round"></div>
      <div class="CDB-Shape-threePointsItem is-round"></div>
      <div class="CDB-Shape-threePointsItem is-round"></div>
    </div>
  </button>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <button class="CDB-Shape CDB-Shape--medium" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-threePoints is-horizontal is-white is-medium">
      <div class="CDB-Shape-threePointsItem is-round"></div>
      <div class="CDB-Shape-threePointsItem is-round"></div>
      <div class="CDB-Shape-threePointsItem is-round"></div>
    </div>
  </button>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2>16px</h2>
<div style="padding: 20px;">
  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-threePoints">
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
    </div>
  </button>
</div>
<div style="padding: 20px;">
  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-threePoints is-blue">
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
    </div>
  </button>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-threePoints is-white">
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
    </div>
  </button>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-threePoints">
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
    </div>
  </button>
</div>
<div style="padding: 20px;">
  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-Shape-threePoints is-blue is-small">
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
    </div>
  </button>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <button class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-Shape-threePoints is-white is-small">
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
      <div class="CDB-Shape-threePointsItem"></div>
    </div>
  </button>
</div>

Shapes/Toogle Arrows

Description

16px

12px

16px

12px

<h2>16px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-ArrowToogle"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-ArrowToogle is-blue"></div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-ArrowToogle is-white"></div>
  </div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-ArrowToogle is-small"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-ArrowToogle is-blue is-small"></div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-ArrowToogle is-white is-small"></div>
  </div>
</div>
<br>
<br>
<br>
<br>
<h2>16px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-ArrowToogle is-down"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-ArrowToogle is-blue is-down"></div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-ArrowToogle is-white is-down"></div>
  </div>
</div>
<br>
<br>
<br>
<br>
<h2>12px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-ArrowToogle is-small is-down"></div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
    <div class="CDB-ArrowToogle is-blue is-small is-down"></div>
  </div>
</div>
<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
    <div class="CDB-ArrowToogle is-white is-small is-down"></div>
  </div>
</div>

Typography

Open Sans 26/34 Regular

Open Sans 26/34 Light

Open Sans 16/22 Regular

Open Sans 12/16 Semibold

Open Sans 12/16 Semibold Uppercase

Open Sans 12/16 Regular

Open Sans 10/14 Semibold

Open Sans 10/14 Regular

<p class="CDB-Text CDB-Size-huge">Open Sans 26/34 Regular</p>
<p class="CDB-Text CDB-Size-huge is-light">Open Sans 26/34 Light</p>
<p class="CDB-Text CDB-Size-large">Open Sans 16/22 Regular</p>
<p class="CDB-Text is-semibold CDB-Size-medium">Open Sans 12/16 Semibold</p>
<p class="CDB-Text is-semibold u-upperCase CDB-Size-medium">Open Sans 12/16 Semibold Uppercase</p>
<p class="CDB-Text CDB-Size-medium u-secondaryTextColor">Open Sans 12/16 Regular</p>
<p class="CDB-Text CDB-Size-medium u-altTextColor">Open Sans 12/16 Regular</p>
<p class="CDB-Text CDB-Size-medium u-hintTextColor">Open Sans 12/16 Regular</p>
<p class="CDB-Text is-semibold CDB-Size-small">Open Sans 10/14 Semibold</p>
<p class="CDB-Text CDB-Size-small">Open Sans 10/14 Regular</p>

Typography/Icon font

All available icons in CartoDB.

clock

stats

heartEmpty

heartFill

alert

rows

check

dribbble

twitter

caretDown

lightbulb

explore

drop

edition

view

odyssey

settings

wizard

info

fork

facebook

folder

dropbox

cloud

step

addDocument

arrowNext

arrowPrev

close

cartoFante

lock

cartoDB

lens

closeLimits

defaultUser

cockroach

floppy

trash

wifi

unlock

unlockWithEllipsis

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

rArrowLight

share

linkedin

calendarBlank

creativeCommons

bubble

bars

arrowMenuLight

tieFighter

ray

markup

table

airlock

pin

attache

download

group

dashboard

spinner

mapsearch

rArrow

<div class="box">
    <i class="CDB-IconFont CDB-IconFont-clock Size-large"></i>
    <h4 class="Text Size-small">clock</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-stats Size-large"></i>
    <h4 class="Text Size-small">stats</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-heartEmpty Size-large"></i>
    <h4 class="Text Size-small">heartEmpty</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-heartFill Size-large"></i>
    <h4 class="Text Size-small">heartFill</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-alert Size-large"></i>
    <h4 class="Text Size-small">alert</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-rows Size-large"></i>
    <h4 class="Text Size-small">rows</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-check Size-large"></i>
    <h4 class="Text Size-small">check</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-dribbble Size-large"></i>
    <h4 class="Text Size-small">dribbble</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-twitter Size-large"></i>
    <h4 class="Text Size-small">twitter</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-caretDown Size-large"></i>
    <h4 class="Text Size-small">caretDown</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-lightbulb Size-large"></i>
    <h4 class="Text Size-small">lightbulb</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-explore Size-large"></i>
    <h4 class="Text Size-small">explore</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-drop Size-large"></i>
    <h4 class="Text Size-small">drop</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-edition Size-large"></i>
    <h4 class="Text Size-small">edition</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-view Size-large"></i>
    <h4 class="Text Size-small">view</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-odyssey Size-large"></i>
    <h4 class="Text Size-small">odyssey</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-settings Size-large"></i>
    <h4 class="Text Size-small">settings</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-wizard Size-large"></i>
    <h4 class="Text Size-small">wizard</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-info Size-large"></i>
    <h4 class="Text Size-small">info</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-fork Size-large"></i>
    <h4 class="Text Size-small">fork</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-facebook Size-large"></i>
    <h4 class="Text Size-small">facebook</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-folder Size-large"></i>
    <h4 class="Text Size-small">folder</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-dropbox Size-large"></i>
    <h4 class="Text Size-small">dropbox</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-cloud Size-large"></i>
    <h4 class="Text Size-small">cloud</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-step Size-large"></i>
    <h4 class="Text Size-small">step</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-addDocument Size-large"></i>
    <h4 class="Text Size-small">addDocument</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-arrowNext Size-large"></i>
    <h4 class="Text Size-small">arrowNext</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
    <h4 class="Text Size-small">arrowPrev</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-close Size-large"></i>
    <h4 class="Text Size-small">close</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-cartoFante Size-large"></i>
    <h4 class="Text Size-small">cartoFante</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-lock Size-large"></i>
    <h4 class="Text Size-small">lock</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-cartoDB Size-large"></i>
    <h4 class="Text Size-small">cartoDB</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-lens Size-large"></i>
    <h4 class="Text Size-small">lens</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-closeLimits Size-large"></i>
    <h4 class="Text Size-small">closeLimits</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-defaultUser Size-large"></i>
    <h4 class="Text Size-small">defaultUser</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-cockroach Size-large"></i>
    <h4 class="Text Size-small">cockroach</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-floppy Size-large"></i>
    <h4 class="Text Size-small">floppy</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-trash Size-large"></i>
    <h4 class="Text Size-small">trash</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-wifi Size-large"></i>
    <h4 class="Text Size-small">wifi</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-unlock Size-large"></i>
    <h4 class="Text Size-small">unlock</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-unlockWithEllipsis Size-large"></i>
    <h4 class="Text Size-small">unlockWithEllipsis</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-gift Size-large"></i>
    <h4 class="Text Size-small">gift</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-people Size-large"></i>
    <h4 class="Text Size-small">people</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-play Size-large"></i>
    <h4 class="Text Size-small">play</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-add Size-large"></i>
    <h4 class="Text Size-small">add</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-map Size-large"></i>
    <h4 class="Text Size-small">map</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-anchor Size-large"></i>
    <h4 class="Text Size-small">anchor</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-key Size-large"></i>
    <h4 class="Text Size-small">key</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-calendar Size-large"></i>
    <h4 class="Text Size-small">calendar</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-document Size-large"></i>
    <h4 class="Text Size-small">document</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-eye Size-large"></i>
    <h4 class="Text Size-small">eye</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-marker Size-large"></i>
    <h4 class="Text Size-small">marker</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-progressBar Size-large"></i>
    <h4 class="Text Size-small">progressBar</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-book Size-large"></i>
    <h4 class="Text Size-small">book</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-notes Size-large"></i>
    <h4 class="Text Size-small">notes</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-rectangles Size-large"></i>
    <h4 class="Text Size-small">rectangles</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-mountain Size-large"></i>
    <h4 class="Text Size-small">mountain</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-points Size-large"></i>
    <h4 class="Text Size-small">points</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-snake Size-large"></i>
    <h4 class="Text Size-small">snake</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-boss Size-large"></i>
    <h4 class="Text Size-small">boss</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-rocket Size-large"></i>
    <h4 class="Text Size-small">rocket</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-barometer Size-large"></i>
    <h4 class="Text Size-small">barometer</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-dollar Size-large"></i>
    <h4 class="Text Size-small">dollar</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-email Size-large"></i>
    <h4 class="Text Size-small">email</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-label Size-large"></i>
    <h4 class="Text Size-small">label</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-outside Size-large"></i>
    <h4 class="Text Size-small">outside</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-jigsaw Size-large"></i>
    <h4 class="Text Size-small">jigsaw</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-tools Size-large"></i>
    <h4 class="Text Size-small">tools</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-question Size-large"></i>
    <h4 class="Text Size-small">question</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-layerStack Size-large"></i>
    <h4 class="Text Size-small">layerStack</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-alarm Size-large"></i>
    <h4 class="Text Size-small">alarm</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-cloudDownArrow Size-large"></i>
    <h4 class="Text Size-small">cloudDownArrow</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-pencil Size-large"></i>
    <h4 class="Text Size-small">pencil</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-fountainPen Size-large"></i>
    <h4 class="Text Size-small">fountainPen</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-emptyDoc Size-large"></i>
    <h4 class="Text Size-small">emptyDoc</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-mergeArrow Size-large"></i>
    <h4 class="Text Size-small">mergeArrow</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-mergeColumns Size-large"></i>
    <h4 class="Text Size-small">mergeColumns</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-mergeSpatial Size-large"></i>
    <h4 class="Text Size-small">mergeSpatial</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-globe Size-large"></i>
    <h4 class="Text Size-small">globe</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-chevronDown Size-large"></i>
    <h4 class="Text Size-small">chevronDown</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-streets Size-large"></i>
    <h4 class="Text Size-small">streets</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-keys Size-large"></i>
    <h4 class="Text Size-small">keys</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-facebookSquare Size-large"></i>
    <h4 class="Text Size-small">facebookSquare</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-fullscreen Size-large"></i>
    <h4 class="Text Size-small">fullscreen</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-rArrowLight Size-large"></i>
    <h4 class="Text Size-small">rArrowLight</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-share Size-large"></i>
    <h4 class="Text Size-small">share</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-linkedin Size-large"></i>
    <h4 class="Text Size-small">linkedin</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-calendarBlank Size-large"></i>
    <h4 class="Text Size-small">calendarBlank</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-creativeCommons Size-large"></i>
    <h4 class="Text Size-small">creativeCommons</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-bubble Size-large"></i>
    <h4 class="Text Size-small">bubble</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-bars Size-large"></i>
    <h4 class="Text Size-small">bars</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-arrowMenuLight Size-large"></i>
    <h4 class="Text Size-small">arrowMenuLight</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-tieFighter Size-large"></i>
    <h4 class="Text Size-small">tieFighter</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-ray Size-large"></i>
    <h4 class="Text Size-small">ray</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-markup Size-large"></i>
    <h4 class="Text Size-small">markup</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-table Size-large"></i>
    <h4 class="Text Size-small">table</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-airlock Size-large"></i>
    <h4 class="Text Size-small">airlock</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-pin Size-large"></i>
    <h4 class="Text Size-small">pin</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-attache Size-large"></i>
    <h4 class="Text Size-small">attache</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-download Size-large"></i>
    <h4 class="Text Size-small">download</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-group Size-large"></i>
    <h4 class="Text Size-small">group</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-dashboard Size-large"></i>
    <h4 class="Text Size-small">dashboard</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-spinner Size-large"></i>
    <h4 class="Text Size-small">spinner</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-mapsearch Size-large"></i>
    <h4 class="Text Size-small">mapsearch</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-rArrow Size-large"></i>
    <h4 class="Text Size-small">rArrow</h4>
  </div>