HTML

/* you can modify the padding with the helpers */
<div class="FloatingBox u-padding-xl">
  Element
</div>

CSS

.floatingBox {
  background: #fff;
  box-shadow: rgba(0,0,0,0.2) 0 0 4px 2px;
  border-radius: 4px;
  border: 1px solid #999999;
  background: white;
  z-index: 3;
}

.floatingBox--left {
  left: 24px;
  top: 24px;
}

.floatingBox--right {
  right: 24px;
  top: 24px;
}

HTML

/* you can modify the padding with the helpers */
<div class="FloatingBox FloatingBox--left u-pa u-padding-xl">
  Element
</div>

HTML

/* you can modify the padding with the helpers */
<div class="FloatingBox FloatingBox--right u-pa u-padding-xl">
  Element
</div>

HTML

/* padding-element */
<div class="u-padding-xxl"></div>

CSS

.u-padding-xxl { padding: 40px; } 
.u-padding-xl { padding: 28px; } 
.u-padding-l { padding: 20px; } 
.u-padding-m { padding: 12px; } 
.u-padding-s { padding: 8px; } 
.u-padding-xs { padding: 4px; }

HTML

/* put the name of the icon and the size you need */
<i class="IconFont IconFont--size30 IconFont--settings"></i>

CSS

.IconFont {
  font-family: "carto-icon-new";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  text-decoration: none !important;
  -webkit-font-smoothing: antialiased;
}

/* sizes */
.IconFont--size50 {
  font-size: 50px;
}

.IconFont--size40 {
  font-size: 40px;
}

.IconFont--size34 {
  font-size: 34px;
}

.IconFont--size32 {
  font-size: 32px;
}

.IconFont--size28 {
  font-size: 28px;
}

.IconFont--size32 {
  font-size: 32px;
}

.IconFont--size30 {
  font-size: 30px;
}

.IconFont--size26 {
  font-size: 26px;
}

.IconFont--size24 {
  font-size: 24px;
}

.IconFont--size22 {
  font-size: 22px;
}

.IconFont--size20 {
  font-size: 20px;
}

.IconFont--size18 {
  font-size: 18px;
}

.IconFont--size16 {
  font-size: 16px;
}

.IconFont--size14 {
  font-size: 14px;
}

.IconFont--size12 {
  font-size: 12px;
}

.IconFont--size10 {
  font-size: 10px;
}

.IconFont--size8 {
  font-size: 8px;
}

.IconFont--size6 {
  font-size: 6px;
}

.IconFont--size4 {
  font-size: 4px;
}

HTML

<div class="u-left">
  Element
</div>

CSS

.u-left { float: left; }

HTML

<div class="u-right">
  Element
</div>

CSS

.u-right { float: right; }

HTML

<ul class="u-ilist">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

CSS

.u-ilist > li { display: inline-block; }

HTML

<p class="u-tupper">
  Transform uppercase
</p>

CSS

.u-tupper { text-transform: uppercase; }

HTML

/* height what you need */
<p class="u-txt-center">Text align center</p>
<p class="u-txt-right">Text align right</p>
<p class="u-txt-left">Text align left</p>

CSS

.u-txt-center { text-align: center; }
.u-txt-left { text-align: left; }
.u-txt-right { text-align: right; }

HTML

/* height what you need */
<div class="block clearfix u-valign" style="height: 200px;">
  <p class="u-iblock u-malign">Vertical-align</p>
</div>

CSS

.u-iblock { display: inline-block; }
.u-malign { vertical-align: middle; }
.u-valign:before {
  display: inline-block;
  vertical-align: middle;
  content: "";
  height: 100%;
  margin-left: -5px;
}

HTML

<p class="u-vellipsis">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

CSS

.u-vellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

HTML

<p class="u-vellipsis u-vellipsis--3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

CSS

.u-vellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.u-vellipsis--3 {
  -webkit-line-clamp: 3;
}

HTML

<p class="u-vellipsis u-vellipsis--1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

CSS

.u-vellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.u-vellipsis--1 {
  -webkit-line-clamp: 1;
}

HTML

<img class="u-img-circle" src="http://gravatar.com/avatar/6da1b884950fd587614122ab8b1a50bf?s=128" />

CSS

.u-img-circle { border-radius: 50%; }

CSS

.fill-blue {
  background: #0090D7
}
.color-blue {
  color: #0090D7
}

.fill-blue-light {
  background: #F5FAFE
}
.color-blue-light {
  color: #BCD8F1
}

.fill-green {
  background: #8FB83F
}
.color-green {
  color: #8FB83F
}

.fill-red {
  background: #C74B43
}
.color-red {
  color: #C74B43
}

.fill-orange {
  background: #C67B44
}
.color-orange {
  color: #C67B44
}

.fill-dark {
  background: #333;
}
.color-dark {
  color: #333;
}

.fill-medium {
  background: #999;
}
.color-medium {
  color: #999;
}

.fill-light {
  background: #f9f9f9;
}
.color-light {
  color: #ccc;
}

.color-white {
  color: #fff;
}

HTML

<h1>h1 - Heading 1</h1>
<h2>h2 - Heading 2</h2>
<h3>h3 - Heading 3</h3>
<h4>h4 - Heading 4</h4>
<h5>h5 - Heading 5</h5>
<h6>h6 - Heading 6</h6>

CSS

h1 {
  font: 400 18px/27px 'Lato';
}

h2 {
  font: 400 16px/24px 'Lato';
}

h3 {
  font: 400 15px/22px 'Lato';
}

h4, h5, h6 {
  font: 400 13px/20px 'Lato';
}

HTML

<p>Text by default - CartoDB is a set of powerful geospatial APIs, enabling the most easy to use Map Editor and an ecosystem of thousands of users and partners developing creating maps and apps with it. CartoDB is democratizing location intelligence.</p>

CSS

p {
  font: 300 15px/22px 'Lato';
}

HTML

<h1><strong>h1 - Heading 1</strong></h1>
<h2><strong>h2 - Heading 2</strong></h2>
<h3><strong>h3 - Heading 3</strong></h3>
<h4><strong>h4 - Heading 4</strong></h4>
<h5><strong>h5 - Heading 5</strong></h5>
<h6><strong>h6 - Heading 6</strong></h6>

CSS

h1 {
  font: 400 18px/27px 'Lato';
}

h2 {
  font: 400 16px/24px 'Lato';
}

h3 {
  font: 400 15px/22px 'Lato';
}

h4, h5, h6 {
  font: 400 13px/20px 'Lato';
}

strong {
  font-weight: 700;
}

HTML

<nav class="navigation">
  <ul class="u-ilist js-navigation">
    <li><a href="#">Data Library</a></li>
    <li><a href="#" class="is-selected">New Dataset</a></li>
  </ul>
</nav>

CSS

.navigation {
  border-bottom: 1px solid #ddd;
  padding-bottom: 34px;
}
.navigation > ul > li {
  font: 15px 'Lato';
  border-left: 1px solid #eee;
  padding-left: 20px;
  margin-left: 20px;
}
.navigation > ul > li:first-child {
  border: 0;
  padding: 0;
  margin: 0;
}
.navigation a {
  color: #0090D7;
  text-decoration: none;
}
.navigation a.is-selected {
  color: #000;
  position: relative;
}
.navigation a.is-selected:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -35px;
  left: 0;
  background: #000;
  height: 1px;
}

HTML

<p class="button button--blue">
<a href="#">Ok</a>
</p>

CSS

.button {
  text-transform: uppercase;
  font: 700 12px 'Lato';
  text-align: center;
}
.button > a {
  display: inline-block;
  padding: 13px;
  min-width: 140px;
  border-radius: 50px;
  color: #fff;
  text-decoration: none;
  transition: background .3s;
}
.button--blue a {
  background: #0090D7;
}
.button--blue a:hover {
  background: #007FBD;
}

HTML

<p class="button button--green">
  <a href="#">Create</a>
</p>

CSS

.button {
  text-transform: uppercase;
  font: 700 12px 'Lato';
  text-align: center;
}
.button > a {
  display: inline-block;
  padding: 13px;
  min-width: 140px;
  border-radius: 50px;
  color: #fff;
  text-decoration: none;
  transition: background .3s;
}
.button--green a {
  background: #8EB83F;
}
.button--green a:hover {
  background: #7FA538;
}

HTML

<p class="button button--red">
  <a href="#">Negative</a>
</p>

CSS

.button {
  text-transform: uppercase;
  font: 700 12px 'Lato';
  text-align: center;
}
.button > a {
  display: inline-block;
  padding: 13px;
  min-width: 140px;
  border-radius: 50px;
  color: #fff;
  text-decoration: none;
  transition: background .3s;
}
.button--red a {
  background: #C74B43;
}
.button--red a:hover {
  background: #B93F37;
}

Skip

<p class="button button--outline">
  <a href="#">Skip</a>
</p>

.button {
  text-transform: uppercase;
  font: 700 12px 'Lato';
  text-align: center;
}
.button > a {
  display: inline-block;
  padding: 13px;
  min-width: 140px;
  border-radius: 50px;
  color: #fff;
  text-decoration: none;
  transition: background .3s;
}
.button--outline a {
  color: #666;
  border: 1px solid #ccc;
}
.button--outline a:hover {
  color: #fff;
  background: #ccc;
}

    

HTML

<input type="radio" name="foo" value="foo" checked>
<input type="radio" name="foo" value="foo2">

CSS

*:focus {
  outline: none;
}
input[type=radio] {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
input[type="radio"] {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 50%;
  position: relative;
}
input[type="radio"]:checked:before {
  content:"";
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -5px;
  margin-left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #189BDB;
}

    

HTML

  <ul class="ListOptions">
    <li>
      <label>
        <input type="checkbox" class="checkbox u-iblock u-malign" for="option1" name="foo" value="foo">
        <p class="u-iblock u-malign" id="option1"> Option 1</p>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" for="option2" class="checkbox u-iblock u-malign" name="foo" value="foo">
        <p class="u-iblock u-malign" id="option2"> Option 2</p>
      </label>
    </li>
  </ul>
<input type="checkbox" class="checkbox" name="foo" value="foo">

CSS

.ListOptions input {
  margin-right: 5px;
}
.ListOptions > li {
  margin-bottom: 20px;
}
.ListOptions label {
  cursor: pointer;
}
.ListOptions > li:last-child {
  margin-bottom: 0;
}

    

HTML

<input type="checkbox" class="checkbox" name="foo" value="foo">

CSS

*:focus {
  outline: none;
}
input[type=checkbox] {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
input[type="checkbox"].checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 3px;
  position: relative;
}
input[type=checkbox]:checked.checkbox:after  {
  content: '\2713';
  position: absolute;
  color: #0090D7;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
  left: 0;
  right: 0;
}

    

HTML

<input type="checkbox" class="toogle" name="foo" value="foo">

CSS

*:focus {
  outline: none;
}
input[type=checkbox] {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
input[type=checkbox].toogle {
  border: 0;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1);
  background: #ddd;
  border-radius: 50px;
  width: 36px;
  height: 20px;
  position: relative;
}
input[type=checkbox].toogle:before {
  content: "";
  top: 4px;
  left: 4px;
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
}
input[type=checkbox]:checked.toogle {
  background: #8FB83F
}
input[type=checkbox]:checked.toogle:before {
  left: auto;
  right: 4px;
}

    

HTML

/* We can change the tooltip's alignment
Horizontal (Tooltip--horizontal-left, Tooltip--horizontal-right, Tooltip--horizontal-middle )
Vertical(Tooltip--vertical-bottom, Tooltip--vertical-top)*/

<p class>Text where if you make
  <a href="#" class="u-pr">
    <span class="Tooltip Tooltip--horizontal-left Tooltip--vertical-bottom">
      Synced 2 hours ago
    </span>
    Text for the tooltip
  </a>
</p>

CSS

.Tooltip {
  position: absolute;
  padding: 12px 20px;
  font: 400 13px 'Lato';
  background: rgba(0, 0, 0, .8);
  border-radius: 4px;
  color: #fff;
  display: none;
  z-index: 1;
  min-width:  160px;
}
*:hover > .Tooltip {
  display: block;
}
.Tooltip--horizontal-middle {
  text-align: center;
  left: 50%;
  margin-left: -80px;
}
.Tooltip--horizontal-left {
  text-align: left;
  left: -6px;
}
.Tooltip--horizontal-right {
  left: auto;
  right: 0;
  text-align: right;
}
.Tooltip--vertical-top{
  bottom: 160%;
  top: auto;
}
.Tooltip--vertical-top:before {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top: 8px solid rgba(0, 0, 0, .8);
  bottom: -16px;
} 
.Tooltip--horizontal-left.Tooltip--vertical-top:before {
  left: 20px;
} 
.Tooltip--horizontal-right.Tooltip--vertical-top:before {
  right: 20px;
} 
.Tooltip--horizontal-middle.Tooltip--vertical-top:before {
  left: 50%;
  margin-left: -8px;
} 
.Tooltip--vertical-bottom{
  top: 160%;
  bottom: auto;
}
.Tooltip--vertical-bottom:before {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-bottom: 8px solid rgba(0, 0, 0, .8);
  top: -16px;
}  
.Tooltip--horizontal-left.Tooltip--vertical-bottom:before {
  left: 20px;
} 
.Tooltip--horizontal-right.Tooltip--vertical-bottom:before {
  right: 20px;
} 
.Tooltip--horizontal-middle.Tooltip--vertical-bottom:before {
  left: 50%;
  margin-left: -8px;
} 

HTML

<p>Text where if you make
  <a href="#" class="js-dropdown">
    Top and center
  </a>
</p>
<div class="Dropdown">
  <ul>
    <li class="Dropdown-item"><a href="#" class="is-selected">Your maps</a></li>
    <li class="Dropdown-item"><a href="#">Your datasets</a></li>
    <li class="Dropdown-item"><a href="#">Your locked datasets</a></li>
    <li class="Dropdown-item"><a href="#">Your locked maps</a></li>
  </ul>
</div>

CSS

.Dropdown {
  position: absolute;
  padding: 12px 20px;
  font: 400 13px 'Lato';
  background: #fff;
  border-radius: 4px;
  color: #fff;
  display: none;
  z-index: 1;
  width:  260px;
  top: 160%;
  bottom: auto;
  box-shadow: 0 0 4px rgba(0, 0, 0, .2);
}
.Dropdown.is-active {
  display: block;
}
.Dropdown:before {
  content:"";
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-bottom: 8px solid #fff;
  position: absolute;
  left: 50%;
  margin-left: -4px;
  top: -16px;
  -webkit-filter: drop-shadow(0 -2px 1px rgba(0, 0, 0, .1));
  filter: drop-shadow(0 -2px 1px rgba(0, 0, 0, .1));
}
.Dropdown-item {
  font: 15px 'Lato';
  margin-bottom: 14px;
}
.Dropdown-item:last-child {
  margin-bottom: 0;
}