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.

Avatars/List

  • User Name
  • User Name
  • User Name 
<ul class="CDB-AvatarList">
  <li class="CDB-AvatarList-item">
    <img src="https://www.drupal.org/files/issues/default-avatar.png" alt="User Name" class="CDB-AvatarList-itemMedia">
  </li>
  <li class="CDB-AvatarList-item">
    <img src="https://www.drupal.org/files/issues/default-avatar.png" alt="User Name" class="CDB-AvatarList-itemMedia">
  </li>
  <li class="CDB-AvatarList-item">
    <img src="https://www.drupal.org/files/issues/default-avatar.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>

Buttons/Primary

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










<button class="CDB-Button CDB-Button--loading CDB-Button--primary CDB-Button--big">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  <div class="CDB-Button-loader CDB-LoaderIcon is-white">
    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
    </svg>
  </div>
</button>

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


<button class="CDB-Button CDB-Button--loading CDB-Button--primary">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
  <div class="CDB-Button-loader CDB-LoaderIcon is-white">
    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
    </svg>
  </div>
</button>

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

<button class="CDB-Button CDB-Button--loading CDB-Button--primary CDB-Button--small">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
  <div class="CDB-Button-loader CDB-LoaderIcon CDB-LoaderIcon--small is-white">
    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
    </svg>
  </div>
</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>

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

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


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

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

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

<button class="CDB-Button CDB-Button--alert 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--alert CDB-Button--icon">
  <i class="CDB-IconFont CDB-IconFont-ray CDB-Size-small"></i>
</button>


<br>
<br>
<br>

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

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


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

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

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

<button class="CDB-Button CDB-Button--error 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--error 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 CDB-Button--big">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  </button>

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

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

  <button class="CDB-Button CDB-Button--primary 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--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--loading CDB-Button--secondary CDB-Button--big">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
    </svg>
  </div>
</button>


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


<button class="CDB-Button CDB-Button--loading CDB-Button--secondary">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
    </svg>
  </div>
</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--loading CDB-Button--secondary CDB-Button--small">
  <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
  <div class="CDB-Button-loader CDB-LoaderIcon CDB-LoaderIcon--small is-blue">
    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
    </svg>
  </div>
</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--loading CDB-Button--secondary CDB-Button--big">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
    <div class="CDB-Button-loader CDB-LoaderIcon is-blue">
      <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
        <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
      </svg>
    </div>
  </button>

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

  <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--loading CDB-Button--secondary CDB-Button--white">
    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium">SAVE</span>
    <div class="CDB-Button-loader CDB-LoaderIcon is-white">
      <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
        <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
      </svg>
    </div>
  </button>

  <button class="CDB-Button CDB-Button--secondary CDB-Button--white is-disabled">
    <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>

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 style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-MainDark"></div>
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-SecondaryDark"></div>
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-Blue"></div>
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-White"></div>
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" class="box Color-SecondaryBackground"></div>
<div style="display: inline-block; width: 120px; height: 64px; margin: 0 24px 24px 0;" 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="vehicle2" value="Car" disabled>
  <span class="u-iBlock CDB-Checkbox-face"></span>
</div>

Forms/Dropdowns

  • selected
  • active
  • disabled
  • disabled












<div class="CDB-DropdownContainer">
  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText CDB-Text">
  <div class="CDB-Dropdown CDB-Box-Modal">
    <ul class="CDB-Dropdown-calculations CDB-Text is-semibold">
      <li class="CDB-Dropdown-calculationsElement">
        <input class="CDB-Radio" type="radio" name="calculation" value="01" checked>
        <span class="u-iBlock CDB-Radio-face"></span>
        <label class="u-iBlock u-lSpace">COUNT</label>
      </li>
      <li class="CDB-Dropdown-calculationsElement">
        <input class="CDB-Radio" type="radio" name="calculation" value="02">
        <span class="u-iBlock CDB-Radio-face"></span>
        <label class="u-iBlock u-lSpace">SUM</label>
      </li>
      <li class="CDB-Dropdown-calculationsElement">
        <input class="CDB-Radio" type="radio" name="calculation" value="03">
        <span class="u-iBlock CDB-Radio-face"></span>
        <label class="u-iBlock u-lSpace">AVG</label>
      </li>
      <li class="CDB-Dropdown-calculationsElement">
        <input class="CDB-Radio" type="radio" name="calculation" value="04">
        <span class="u-iBlock CDB-Radio-face"></span>
        <label class="u-iBlock u-lSpace">MAX</label>
      </li>
      <li class="CDB-Dropdown-calculationsElement">
        <input class="CDB-Radio" type="radio" name="calculation" value="05">
        <span class="u-iBlock CDB-Radio-face"></span>
        <label class="u-iBlock u-lSpace">MIN</label>
      </li>
    </ul>

    <ul class="CDB-Dropdown-options CDB-Text CDB-Size-medium">
      <li class="CDB-Dropdown-optionsElement is-selected" title="selected">selected</li>
      <li class="CDB-Dropdown-optionsElement" title="active">active</li>
      <li class="CDB-Dropdown-optionsElement is-disabled" title="disabled">disabled</li>
      <li class="CDB-Dropdown-optionsElement is-disabled" title="disabled">disabled</li>
    </ul>
  </div>
</div>


  <div class="CDB-Box-Modal">
    <div class="CDB-Box-ModalHeader">
      <nav class="CDB-NavMenu">
        <ul class="CDB-NavMenu-Inner CDB-NavMenu-Inner--no-margin CDB-NavMenu-Inner--is-dropdown CDB-Text is-semibold CDB-Size-medium">
          <li class="CDB-NavMenu-Item">
            <button class="CDB-NavMenu-Link">SOLID</button>
          </li>
          <li class="CDB-NavMenu-Item is-selected">
            <button class="CDB-NavMenu-Link">BY VALUE</button>
          </li>
        </ul>
      </nav>
      <div class="CDB-Box-ModalHeaderItem">
        <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputTextPlain CDB-Text">
        <button class="u-lSpace--xl">
          <div class="CDB-Shape">
            <div class="CDB-Shape-magnify is-blue is-small"></div>
          </div>
        </button>
      </div>
    </div>
    <br>
    <br>
    <br>
    <br>
  </div>

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

  <div class="CDB-Box-Modal">
    <div class="CDB-Box-modalHeader">
      <nav class="CDB-NavMenu">
        <ul class="CDB-NavMenu-Inner CDB-NavMenu-inner--no-margin CDB-NavMenu-inner--is-dropdown CDB-Text is-semibold CDB-Size-medium">
          <li class="CDB-NavMenu-Item">
            <button class="CDB-NavMenu-Link">SOLID</button>
          </li>
          <li class="CDB-NavMenu-Item is-selected">
            <button class="CDB-NavMenu-Link">BY VALUE</button>
          </li>
        </ul>
      </nav>
      <div class="CDB-Box-modalHeaderItem">
        <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputTextPlain CDB-Text">
        <button class="u-lSpace--xl">
          <div class="CDB-Shape">
            <div class="CDB-Shape-close is-blue is-large"></div>
          </div>
        </button>
      </div>
    </div>
    <br>
    <br>
    <br>
    <br>
  </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







RADIO

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>

<div class="CDB-Fieldset">
  <p class="CDB-Legend CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
  <ul class="CDB-Size-medium CDB-Text CDB-Fieldset-block">
    <li class="u-rSpace--xl u-iblock">
      <div class="u-iblock CDB-Size-medium">
        <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-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>
</div>
<div class="u-tSpace-xl CDB-Text CDB-Fieldset">
  <p class="CDB-Legend CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
</div>

<br>
<br>
<br>

<div class="CDB-Text CDB-Fieldset">
  <p class="CDB-Legend CDB-Legend--big u-ellipsis CDB-Text is-semibold CDB-Size-small u-rSpace--m">
    <input class="CDB-Checkbox" type="checkbox" name="field" value="Sport">
    <span class="u-iBlock CDB-Checkbox-face u-rSpace--m"></span>
    <label class="CDB-Text is-semibold CDB-Size-small u-rSpace--m">SPORT</label>
  </p>
  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
</div>

<div class="u-tSpace-xl CDB-Text CDB-Fieldset">
  <p class="CDB-Legend CDB-Legend--big u-ellipsis CDB-Text is-semibold CDB-Size-small u-rSpace--m">
    <input class="CDB-Checkbox" type="checkbox" name="field" value="Travel">
    <span class="u-iBlock CDB-Checkbox-face u-rSpace--m"></span>
    <label class="CDB-Text is-semibold CDB-Size-small u-rSpace--m">TRAVEL</label>
  </p>
  <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
</div>

Forms/Option input








<div class="CDB-OptionInput is-active CDB-Text">
  <ul class="CDB-OptionInput-container">
    <li class="CDB-OptionInput-item is-active">
      <button type="button" class="CDB-OptionInput-content">8px</button>
    </li>

    <li class="CDB-OptionInput-item">
      <button type="button" class="CDB-OptionInput-content">solid</button>
    </li>

    <li class="CDB-OptionInput-item">
      <button type="button" class="CDB-ColorBarContainer CDB-OptionInput-content">
        <span class="CDB-ColorBar" style="background-color: #207EBA;"></span>
      </button>
    </li>
  </ul>
</div>

<br>

<div class="CDB-OptionInput is-active CDB-Text">
  <ul class="CDB-OptionInput-container">
    <li class="CDB-OptionInput-item">
      <button type="button" class="CDB-OptionInput-content">8...12</button>
    </li>

    <li class="CDB-OptionInput-item is-active">
      <button type="button" class="CDB-ColorBarContainer CDB-OptionInput-content">
        <span class="CDB-ColorBar" style="background-color: #FFFFC0;"></span>
      </button>
    </li>
  </ul>
</div>

<br>

<div class="CDB-OptionInput is-active CDB-Text">
  <ul class="CDB-OptionInput-container">
    <li class="CDB-OptionInput-item">
      <button type="button" class="CDB-OptionInput-content">8...12</button>
    </li>
    <li class="CDB-OptionInput-item">
      <button type="button" class="CDB-OptionInput-content">solid</button>
    </li>

    <li class="CDB-OptionInput-item is-active">
      <button type="button" class="CDB-ColorBarContainer CDB-OptionInput-content">
        <span class="CDB-ColorBar" style="background-color: #FFFFC0;"></span>
      </button>
    </li>
  </ul>
</div>

<br>

<button type="button" class="CDB-OptionInput">
  <div class="CDB-OptionInput-container">
    <span class="CDB-ColorBar CDB-ColorBar-gradient" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></span>
  </div>
</button>

<br>
<br>

<button type="button" class="CDB-OptionInput">
  <div class="CDB-OptionInput-container">
    <ul class="CDB-ColorBarContainer">
      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #9DE0AD;"></li>
      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #50E3C2;"></li>
      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #FFFFC0;"></li>
      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #7ED321;"></li>
      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #BD10E0;"></li>
      <li class="CDB-ColorBar CDB-ColorBar--spaceSmall" style="background-color: #F15743;"></li>
    </ul>
  </div>
</button>

<br>
<br>

<button type="button" class="CDB-OptionInput">
  <div class="CDB-OptionInput-container">
    <ul class="CDB-ColorBarContainer">
      <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #9DE0AD;"></li>
      <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #50E3C2;"></li>
      <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #FFFFC0;"></li>
      <li class="CDB-ColorBar CDB-ColorBar--spaceless" style="background-color: #7ED321;"></li>
    </ul>
  </div>
</button>

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




DejaVu Sans
DejaVu Sans

DejaVu Sans

null

46,594

<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>

<br>
<br>
<br>


<div class="CDB-Select" style="height: 250px;">
  <div class="CDB-InputText CDB-Text">DejaVu Sans</div>
  <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>

<div class="CDB-InputText CDB-Text is-cursor is-disabled">DejaVu Sans</div>
<br>
<div class="CDB-InputText CDB-Text is-cursor is-empty">DejaVu Sans</div>
<br>
<div class="CDB-InputText CDB-Text is-cursor is-null">null</div>
<br>
<div class="CDB-InputText CDB-Text is-cursor is-number">46,594</div>
<br>
<select name="select" class="CDB-SelectFake CDB-Text">
  <option value="value1" selected>Choose an option</option>
  <option value="value2">Hide</option>
  <option value="value3">Rename</option>
  <option value="value4">Change source dataset&#x2026;</option>
  <option value="value5">Delete this layer&#x2026;</option>
</select>

Forms/TabsForms

<div class="CDB-TabsForms u-iBlock">
  <ul class="CDB-TabsForms-inner">
    <li class="CDB-TabsForms-item">
      <button class="CDB-TabsForms-button">
        <div class="CDB-Shape">
          <ul class="CDB-Shape-paragraph is-left">
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
            </li>
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
            </li>
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
            </li>
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
            </li>
          </ul>
        </div>
      </button>
    </li>
    <li class="CDB-TabsForms-item">
      <button class="CDB-TabsForms-button">
        <div class="CDB-Shape">
          <ul class="CDB-Shape-paragraph is-center">
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
            </li>
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
            </li>
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
            </li>
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
            </li>
          </ul>
        </div>
      </button>
    </li>
    <li class="CDB-TabsForms-item">
      <button class="CDB-TabsForms-button">
        <div class="CDB-Shape">
          <ul class="CDB-Shape-paragraph is-right is-active">
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
            </li>
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
            </li>
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
            </li>
            <li class="CDB-Shape-paragraphItem">
              <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
            </li>
          </ul>
        </div>
      </button>
    </li>
  </ul>
</div>

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


<div class="Toggle">
  <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>
</div>

<br>

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

Headers

Name Map
    • User Name
    • User Name
    • User Name

  • 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">
  <button class="u-rSpace--xl CDB-HeaderInfo-back">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
  </button>
  <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">
  <button class="u-rSpace--xl CDB-HeaderInfo-back">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
  </button>
  <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">
  <button class="u-rSpace--xl CDB-HeaderInfo-back">
    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
  </button>
  <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>

Info Tooltip

627K Transactions

627K Transactions

627K Transactions

627K Transactions

627K Transactions

627K Transactions

627K Transactions

627K Transactions

<div style="position: relative; height: 100px;">
  <div class="CDB-InfoTooltip CDB-InfoTooltip--up is-black">
    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
  </div>
</div>

<div style="position: relative; height: 100px;">
  <div class="CDB-InfoTooltip CDB-InfoTooltip--up is-error">
    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
  </div>
</div>

<div style="position: relative; height: 100px;">
  <div class="CDB-InfoTooltip CDB-InfoTooltip--down is-black">
    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
  </div>
</div>

<div style="position: relative; height: 100px;">
  <div class="CDB-InfoTooltip CDB-InfoTooltip--down is-error">
    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
  </div>
</div>

<div style="position: relative; height: 100px;">
  <div class="CDB-InfoTooltip CDB-InfoTooltip--left is-black">
    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
  </div>
</div>

<div style="position: relative; height: 100px;">
  <div class="CDB-InfoTooltip CDB-InfoTooltip--left is-error">
    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
  </div>
</div>


<div style="position: relative; height: 100px;">
  <div class="CDB-InfoTooltip CDB-InfoTooltip--right is-black">
    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
  </div>
</div>

<div style="position: relative; height: 100px;">
  <div class="CDB-InfoTooltip CDB-InfoTooltip--right is-error">
    <p class="CDB-Text CDB-Size-medium CDB-InfoTooltip-text">627K Transactions</p>
  </div>
</div>

Layer selector and letters

b0 
<span class="CDB-SelectorLayer-letter CDB-Text CDB-Size-small u-whiteTextColor u-rSpace u-upperCase" style="background-color: #E65176">b0</span>

Lists/Lists Decorations

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

Loader/circle

<div style="padding: 20px;">
  <div class="CDB-LoaderIcon is-blue">
    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
    </svg>
  </div>

  <div class="CDB-LoaderIcon is-dark">
    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
    </svg>
  </div>
  <div class="CDB-LoaderIcon CDB-LoaderIcon--big is-dark">
    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
    </svg>
  </div>
</div>

<div style="padding: 20px; background: #F9F9F9;">
  <div class="CDB-LoaderIcon is-dark">
    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
    </svg>
  </div>
  <div class="CDB-LoaderIcon CDB-LoaderIcon--big is-dark">
    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
    </svg>
  </div>
</div>

<div style="padding: 20px; background: #2E3C43;">
  <div class="CDB-LoaderIcon">
    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
    </svg>
  </div>
  <div class="CDB-LoaderIcon CDB-LoaderIcon--big">
    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
    </svg>
  </div>
</div>

<div style="padding: 20px; background: #E27D61;">
  <div class="CDB-LoaderIcon">
    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
    </svg>
  </div>
  <div class="CDB-LoaderIcon CDB-LoaderIcon--big">
    <svg class="CDB-LoaderIcon-spinner" viewbox="0 0 50 50">
      <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"/>
    </svg>
  </div>
</div>

Loader/principal

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

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

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-rectsHandle">
      <div class="CDB-Shape-rectsHandleItem is-first"></div>
      <div class="CDB-Shape-rectsHandleItem is-second"></div>
      <div class="CDB-Shape-rectsHandleItem 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-rectsHandle">
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-first"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-second"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue 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-rectsHandle">
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-first"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-second"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey 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-rectsHandle">
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-first"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-second"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--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-rectsHandle is-small">
      <div class="CDB-Shape-rectsHandleItem is-first"></div>
      <div class="CDB-Shape-rectsHandleItem is-second"></div>
      <div class="CDB-Shape-rectsHandleItem 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-rectsHandle is-small">
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-first"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-second"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--blue is-third"></div>
    </div>
  </div>
</div>
<div style="padding: 20px;">
  <div class="CDB-Shape">
    <div class="CDB-Shape-rectsHandle is-small">
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-first"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-second"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey 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-rectsHandle is-small">
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-first"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-second"></div>
      <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--white is-third"></div>
    </div>
  </div>
</div>

Shapes/Paragrapgh

Description

16px











<h2>16px</h2>
<br>
<br>
<div class="CDB-Shape">
  <ul class="CDB-Shape-paragraph is-right">
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
    </li>
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
    </li>
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
    </li>
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
    </li>
  </ul>
</div>
<br>
<br>
<br>
<br>
<div class="CDB-Shape">
  <ul class="CDB-Shape-paragraph is-center">
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
    </li>
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
    </li>
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
    </li>
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
    </li>
  </ul>
</div>
<br>
<br>
<br>
<br>
<div class="CDB-Shape">
  <ul class="CDB-Shape-paragraph is-active">
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--01"></span>
    </li>
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--02"></span>
    </li>
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--03"></span>
    </li>
    <li class="CDB-Shape-paragraphItem">
      <span class="CDB-Shape-paragraphBar CDB-Shape-paragraphBar--04"></span>
    </li>
  </ul>
</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>

Shapes/Type

Description

8px



<h2>8px</h2>
<div style="padding: 20px;">
  <div class="CDB-Shape CDB-Shape--small">
    <div class="CDB-Type CDB-Type--point">
      <div class="CDB-Type-circle CDB-Type-circle--02"></div>
      <div class="CDB-Type-circle CDB-Type-circle--03"></div>
      <div class="CDB-Type-circle CDB-Type-circle--04"></div>
    </div>
  </div>
</div>
<br>
<div style="padding: 20px;">
  <div class="CDB-Shape CDB-Shape--small">
    <div class="CDB-Type CDB-Type--line">
      <div class="CDB-Type-circle CDB-Type-circle--02"></div>
      <div class="CDB-Type-circle CDB-Type-circle--03"></div>
    </div>
  </div>
</div>
<br>
<div style="padding: 20px;">
  <div class="CDB-Shape CDB-Shape--small">
    <div class="CDB-Type CDB-Type--polygon">
      <div class="CDB-Type-circle CDB-Type-circle--01"></div>
      <div class="CDB-Type-circle CDB-Type-circle--02"></div>
      <div class="CDB-Type-circle CDB-Type-circle--03"></div>
      <div class="CDB-Type-circle CDB-Type-circle--04"></div>
    </div>
  </div>
</div>

Tags/Data Type

<ul class="CDB-ListTag">
  <li class="CDB-ListTag-item">
    <button class="CDB-Tag CDB-Tag--opaque CDB-Text CDB-Size-small u-altTextColor">
      Number
    </button>
  </li>
  <li class="CDB-ListTag-item">
    <button class="CDB-Tag CDB-Tag--opaque CDB-Text CDB-Size-small u-altTextColor">
      Text
    </button>
  </li>
  <li class="CDB-ListTag-item">
    <button class="CDB-Tag CDB-Tag--opaque CDB-Text CDB-Size-small u-altTextColor">
      String
    </button>
  </li>
</ul>

Tags/Metadata

<ul class="CDB-ListTag CDB-Text CDB-Size-medium u-secondaryTextColor">
  <li class="CDB-ListTag-item">
    <button class="CDB-Tag CDB-Tag--withLink">
      trees
      <div class="CDB-Shape u-lSpace">
        <div class="CDB-Shape-close is-blue is-large"></div>
      </div>
    </button>
  </li>
  <li class="CDB-ListTag-item">
    <button class="CDB-Tag CDB-Tag--withLink">
      table_merge
      <div class="CDB-Shape u-lSpace">
        <div class="CDB-Shape-close is-blue is-large"></div>
      </div>
    </button>
  </li>
  <li class="CDB-ListTag-item">
    <button class="CDB-Tag CDB-Tag--withLink">
      word
      <div class="CDB-Shape u-lSpace">
        <div class="CDB-Shape-close is-blue is-large"></div>
      </div>
    </button>
  </li>
</ul>

Tags/Privacy

<button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock">
  PUBLIC
</button>
<button class="CDB-Tag is-link CDB-Text is-semibold CDB-Size-small u-iBlock">
  LINK
</button>
<button class="CDB-Tag is-password CDB-Text is-semibold CDB-Size-small u-iBlock">
  PASSWORD
</button>
<button class="CDB-Tag is-private CDB-Text is-semibold CDB-Size-small u-iBlock">
  PRIVATE
</button>
<button class="CDB-Tag CDB-Text is-semibold CDB-Size-small u-iBlock">
  TAG
</button>

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 12/16 Regular

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>
<span class="CDB-Text CDB-Size-small is-underlined">?</span>

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

downloadCircle

pencilMenu

mobile

wizard

undo

redo

lArrowLight

hide

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 u-tSpace--m">clock</h4>
  </div>


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-downloadCircle Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">downloadCircle</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-pencilMenu Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">pencilMenu</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-mobile Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">mobile</h4>
  </div>


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


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-undo Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">undo</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-redo Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">redo</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-lArrowLight Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">lArrowLight</h4>
  </div>


  <div class="box">
    <i class="CDB-IconFont CDB-IconFont-hide Size-large"></i>
    <h4 class="Text Size-small u-tSpace--m">hide</h4>
  </div>


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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