UI Components

Buttons

Default Button
<a class="button" href="#">
    Default Button
</a>

<button class="disabled">
    Disabled Button
</button>
a.button(href='#') Default Button

button.disabled Disabled Button
input[type="submit"],
.button,
button {
  display: block;
  background-color: #0099ff;
  font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-style: italic;
  text-align: center;
  color: #fff;
  margin: 0 auto; /* this centers the button, can be removed or changed as needed */
  transition: none;
  border: none;
}
input[type="submit"]:disabled,
.button:disabled,
button:disabled {
    background-color: #c0c0c0;
    color: #999cab;
    cursor: none;
}
input[type="submit"]:hover,
.button:hover, button:hover {
    background-color: #33ccff;
    color: #fff;
}
input[type="submit"]:focus,
.button:focus, button:focus {
    background-color: #33ccff;
    color: #fff;
    outline: none;
}
.button {
  padding: 20px 0;
}
input[type="submit"],
button {
  padding: 18px 0;
}

@media only screen {
  input[type="submit"],
  .button, button {
    width: 150px; /* can be overwritten using layout scss or css */
    font-size: .9rem; }
}

@media only screen and (min-width:40.063em) {
  input[type="submit"],
  .button, button {
    width: 280px; /* can be overwritten using layout scss or css */
    font-size: 1.12rem; }
}

button.disabled,
button.disabled:hover,
button.disabled:focus,
button[disabled]:hover,
button[disabled]:focus, .
button.disabled:hover,
.button.disabled:focus,
.button[disabled]:hover,
.button[disabled]:focus {
  background-color: #c0c0c0;
  color: #999cab;
  cursor: none;
}
// Default Button

input[type="submit"],
.button,
button {
  display: block;
  background-color: $blue;
  @include latomedium-italic;
  font-style: italic;
  text-align: center;
  color: $white;
  margin:0 auto; /* this centers the button, can be removed or changed as needed */
  transition:none;
  border:none;

  &:disabled {
    background-color:$disabled;
    color:$disabledtext;
    cursor: none;
  }

  &:hover {
    background-color: $lightblue;
    color: $white;
  }

  &:focus {
    background-color: $lightblue;
    color: $white;
    outline: none;
  }
}
.button {
    padding:20px 0;
}

input[type="submit"],
button {
    padding: 18px 0;
}

@media #{$small-up} {
    input[type="submit"],
    .button,
    button {
      width:150px; /* can be overwritten using layout scss or css */
      font-size: .9rem;
    }
  }
@media #{$medium-up} {
    input[type="submit"],
    .button,
    button {
      width:280px; /* can be overwritten using layout scss or css */
      font-size: 1.12rem;
    }
}

button.disabled,
button.disabled:hover,
button.disabled:focus,
button[disabled]:hover,
button[disabled]:focus,
.button.disabled:hover,
.button.disabled:focus,
.button[disabled]:hover,
.button[disabled]:focus {
    background-color:$disabled;
    color:$disabledtext;
    cursor: none;
}
<a class="round-button-blue" href="#">
    Round Blue Button
</a>

<a class="round-button" href="#">
    Round Button
</a>
a.round-button-blue(href='#') Round Blue Button

a.round-button(href='#') Round Button
.round-button {
  border-radius: 50px;
  border: 1px solid #999cab;
  font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: .9rem;
  font-style: italic;
  color: #999cab;
  padding: 10px 35px;
  transition: all .2s ease-in;
}
.round-button:hover {
    background-color: #999cab;
    color: #fff;
}

.round-button-blue {
  border-radius: 50px;
  border: 1px solid #0099ff;
  font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: .9rem;
  font-style: italic;
  color: #0099ff;
  padding: 10px 35px;
  transition: all .2s ease-in;
}
.round-button-blue:hover {
    background-color: #0099ff;
    color: #fff;
}
// Round buttons

.round-button {
  border-radius: 50px;
  border:1px solid $gray;
  @include latomedium-italic;
  font-size: .90rem;
  font-style: italic;
  color:$gray;
  padding: 10px 35px;
  transition: all .2s ease-in;

  &:hover {
    background-color: $gray;
    color: $white;
  }
}

// Blue Round Button

.round-button-blue {
  border-radius: 50px;
  border:1px solid $blue;
  @include latomedium-italic;
  font-size: .9rem;
  font-style: italic;
  color:$blue;
  padding: 10px 35px;
  transition: all .2s ease-in;

  &:hover {
    background-color: $blue;
    color: $white;
  }
}

Upload Buttons

We have two different designs for upload buttons: one that indicates progress and another that communications loading taking place. While the functionality below is for display purposes only, you can take a look at a live demo here.

Please note: you will have to write your own logic for these components to function meaningfully, please do not copy this jQuery into your project.

Progress Indicator

<div class="contain-upload">
  <button class="button-progress">
    <span class="button-label">Upload</span>
    <span class="processing button-meter-bg"></span><span class="processing button-meter"></span>
  </button>
</div>
.contain-upload
  button.button-progress
    span.button-label Upload
    span.processing.button-meter-bg
    span.processing.button-meter
.contain-upload {
  margin: 70px;
}
.button-progress {
  position: relative;
  max-height: 55px;
  min-height: 55px;
}
.button-progress:focus {
  background: #0099ff;
}
.button-meter {
  display: none;
  position: absolute;
  top: 55px;
  width: 0;
  height: 7px;
  background: #33ccff;
}
.button-meter-bg {
  display: none;
  position: absolute;
  top: 55px;
  width: 100%;
  height: 7px;
  background: #252a46;
}
.button-progress.is-active .button-meter,
.button-progress.is-active .button-meter-bg {
  display: block;
}
.contain-upload {
  margin: 70px;
}
.button-progress {
  position: relative;
  max-height: 55px;
  min-height: 55px;
}
.button-progress:focus {
  background: $blue;
  &:focus {
    background: $blue;
  }
}
.button-meter {
  display: none;
  position: absolute;
  top: 55px;
  width: 0;
  height: 7px;
  background: $lightblue;
}
.button-meter-bg {
  display: none;
  position: absolute;
  top: 55px;
  width: 100%;
  height: 7px;
  background: $darkblue;
}
.button-progress.is-active .button-meter,
.button-progress.is-active .button-meter-bg {
  display: block;
}

Loading Indicator

<div class="contain-upload">
  <button class="button-loading">
    <span class="button-label">Upload</span>
    <span class="button-spinner">
      <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="-50 -50 244 265" class="loader_1">
        <title>Loader</title>
        <desc>Lines arranged in a circle</desc>
        <g>
          <path stroke-width="2" stroke="#FFF" fill="#FFF" opacity=".9" d="M72.7 0.6L72.7 0.6C74.8 0.6 76.4 2.4 76.4 4.6L76.4 36.6C76.4 38.8 74.8 40.6 72.7 40.6 70.7 40.6 69.1 38.8 69.1 36.6L69.1 4.6C69.1 2.4 70.7 0.6 72.7 0.6" class="line_1"></path>
          <path stroke-width="2" stroke="#FFF" opacity="0.8" fill="#FFF" d="M137.8 40.6C137.1 40.6 136.4 40.8 135.7 41.2L107.5 58.2C105.6 59.4 104.9 62 106 64 106.8 65.3 108.1 66.1 109.6 66.1 110.2 66.1 110.9 65.9 111.6 65.5L139.8 48.5C141.8 47.4 142.4 44.8 141.3 42.7 140.6 41.4 139.2 40.6 137.8 40.6" class="line_2"></path>
          <path stroke-width:="" stroke="#FFF" opacity="0.6" fill="#FFF" d="M109.6 102.5C108.1 102.5 106.8 103.3 106 104.6 104.9 106.7 105.6 109.3 107.5 110.5L135.7 127.4C136.4 127.8 137.1 128 137.8 128 139.2 128 140.6 127.3 141.3 125.9 142.4 123.9 141.8 121.3 139.8 120.1L111.6 103.1C110.9 102.7 110.2 102.5 109.6 102.5" class="line_3"></path>
          <path stroke-width="2" stroke="#FFF" opacity="0.6" fill="#FFF" d="M72.7 124.4C70.7 124.4 69.1 126.2 69.1 128.4L69.1 160.4C69.1 162.6 70.7 164.4 72.7 164.4 74.8 164.4 76.4 162.6 76.4 160.4L76.4 128.4C76.4 126.2 74.8 124.4 72.7 124.4" class="line_4"></path>
          <path stroke-width="2" stroke="#FFF" opacity="0.4" fill="#FFF" d="M32.3 102.5C31.6 102.5 30.9 102.7 30.3 103.1L2 120.1C0.1 121.3-0.6 123.9 0.5 125.9 1.3 127.3 2.7 128 4.1 128 4.8 128 5.5 127.8 6.1 127.4L34.3 110.5C36.3 109.3 37 106.7 35.8 104.6 35.1 103.3 33.7 102.5 32.3 102.5" class="line_5"></path>
          <path stroke-width="2" stroke="#FFF" opacity="0.2" fill="#FFF" d="M4.1 40.6C2.7 40.6 1.3 41.4 0.5 42.7 -0.6 44.8 0.1 47.4 2 48.5L30.3 65.5C30.9 65.9 31.6 66.1 32.3 66.1 33.7 66.1 35.1 65.3 35.8 64 37 62 36.3 59.4 34.3 58.2L6.1 41.2C5.5 40.8 4.8 40.6 4.1 40.6" class="line_6"></path>
        </g>
      </svg>
    </span>
  </button>
</div>
.contain-upload
  button.button-loading
    span.button-label Upload
    span.button-spinner
      svg.loader_1(xmlns='http://www.w3.org/2000/svg', width='50', height='50', viewbox='-50 -50 244 265')
        title Loader
        desc Lines arranged in a circle
        g
          path.line_1(stroke-width='2', stroke='#FFF', fill='#FFF', opacity='.9', d='M72.7 0.6L72.7 0.6C74.8 0.6 76.4 2.4 76.4 4.6L76.4 36.6C76.4 38.8 74.8 40.6 72.7 40.6 70.7 40.6 69.1 38.8 69.1 36.6L69.1 4.6C69.1 2.4 70.7 0.6 72.7 0.6')
          path.line_2(stroke-width='2', stroke='#FFF', opacity='0.8', fill='#FFF', d='M137.8 40.6C137.1 40.6 136.4 40.8 135.7 41.2L107.5 58.2C105.6 59.4 104.9 62 106 64 106.8 65.3 108.1 66.1 109.6 66.1 110.2 66.1 110.9 65.9 111.6 65.5L139.8 48.5C141.8 47.4 142.4 44.8 141.3 42.7 140.6 41.4 139.2 40.6 137.8 40.6')
          path.line_3(stroke-width:='', stroke='#FFF', opacity='0.6', fill='#FFF', d='M109.6 102.5C108.1 102.5 106.8 103.3 106 104.6 104.9 106.7 105.6 109.3 107.5 110.5L135.7 127.4C136.4 127.8 137.1 128 137.8 128 139.2 128 140.6 127.3 141.3 125.9 142.4 123.9 141.8 121.3 139.8 120.1L111.6 103.1C110.9 102.7 110.2 102.5 109.6 102.5')
          path.line_4(stroke-width='2', stroke='#FFF', opacity='0.6', fill='#FFF', d='M72.7 124.4C70.7 124.4 69.1 126.2 69.1 128.4L69.1 160.4C69.1 162.6 70.7 164.4 72.7 164.4 74.8 164.4 76.4 162.6 76.4 160.4L76.4 128.4C76.4 126.2 74.8 124.4 72.7 124.4')
          path.line_5(stroke-width='2', stroke='#FFF', opacity='0.4', fill='#FFF', d='M32.3 102.5C31.6 102.5 30.9 102.7 30.3 103.1L2 120.1C0.1 121.3-0.6 123.9 0.5 125.9 1.3 127.3 2.7 128 4.1 128 4.8 128 5.5 127.8 6.1 127.4L34.3 110.5C36.3 109.3 37 106.7 35.8 104.6 35.1 103.3 33.7 102.5 32.3 102.5')
          path.line_6(stroke-width='2', stroke='#FFF', opacity='0.2', fill='#FFF', d='M4.1 40.6C2.7 40.6 1.3 41.4 0.5 42.7 -0.6 44.8 0.1 47.4 2 48.5L30.3 65.5C30.9 65.9 31.6 66.1 32.3 66.1 33.7 66.1 35.1 65.3 35.8 64 37 62 36.3 59.4 34.3 58.2L6.1 41.2C5.5 40.8 4.8 40.6 4.1 40.6')
.contain-upload {
  margin: 70px;
}

.button-loading {
  padding: 0;
  position: relative;
  max-height: 55px;
  min-height: 55px;
}

.button-loading:focus {
  background: #0099ff;
}

.loader_1 {
  display: none;
  vertical-align: middle;
}

.button-loading.is-active .button-label {
  display: none;
}

.button-loading.is-active .loader_1 {
  display: inline-block;
}

.loader_1 .line_1,
.loader_1 .line_2,
.loader_1 .line_3,
.loader_1 .line_4,
.loader_1 .line_5,
.loader_1 .line_6 {
  transform-origin: center;
  -webkit-transform-origin: center;
}

.loader_1 .line_1 {
  animation: load 1s infinite;
}

.loader_1 .line_2 {
  animation: load 1s infinite;
  animation-delay: 150ms;
}

.loader_1 .line_3 {
  animation: load 1s infinite;
  animation-delay: 350ms;
}

.loader_1 .line_4 {
  animation: load 1s infinite;
  animation-delay: 550ms;
}

.loader_1 .line_5 {
  animation: load 1s 750ms infinite;
}

.loader_1 .line_6 {
  animation: load 1s infinite;
  animation-delay: 900ms;
}

@keyframes load {
  10% {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
    opacity: 1;
  }
}
@-webkit-keyframes load {
  10% {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
    opacity: 1;
  }
}

.contain-upload {
  margin: 70px;
}

.button-loading {
  padding: 0;
  position: relative;
  max-height: 55px;
  min-height: 55px;
  &:focus {
    background: $blue;
  }
}

.loader_1 {
  display: none;
  vertical-align: middle;
}

.button-loading.is-active .button-label {
  display: none;
}

.button-loading.is-active .loader_1 {
  display: inline-block;
}

.loader_1 .line_1,
.loader_1 .line_2,
.loader_1 .line_3,
.loader_1 .line_4,
.loader_1 .line_5,
.loader_1 .line_6 {
  transform-origin: center;
  -webkit-transform-origin: center;
}

.loader_1 .line_1 {
  @include callAnimation();
}

.loader_1 .line_2 {
  @include callAnimation();
  animation-delay: 150ms;
}

.loader_1 .line_3 {
  @include callAnimation();
  animation-delay: 350ms;
}

.loader_1 .line_4 {
  @include callAnimation();
  animation-delay: 550ms;
}

.loader_1 .line_5 {
  animation: load 1s 750ms infinite;
}

.loader_1 .line_6 {
  @include callAnimation();
  animation-delay: 900ms;
}

@keyframes load {
  @include loadingAnimation();
}

@-webkit-keyframes load {
  @include loadingAnimation();
}

On/Off Switch

<div class="onoffswitch">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
        <label class="onoffswitch-label" for="myonoffswitch">
            <span class="onoffswitch-inner"></span>
            <span class="onoffswitch-switch"></span>
        </label>
    </div>
.onoffswitch
    input#myonoffswitch.onoffswitch-checkbox(type='checkbox', name='onoffswitch', checked='')
    label.onoffswitch-label(for='myonoffswitch')
        span.onoffswitch-inner
        span.onoffswitch-switch
.onoffswitch {
    position: relative;
    width: 71px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.onoffswitch .onoffswitch-checkbox {
    display: none;
}
.onoffswitch .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
}
.onoffswitch .onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #FFFFFF;
    border-radius: 18px;
}
.onoffswitch .onoffswitch-label .onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch .onoffswitch-label .onoffswitch-inner:before, .onoffswitch .onoffswitch-label .onoffswitch-inner:after {
    display: block;
    float: left;
    width: 50%;
    height: 30px;
    padding: 0;
    line-height: 30px;
    font-size: 14px;
    color: #fff;
    box-sizing: border-box;
}
.onoffswitch .onoffswitch-label .onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #7ecf54;
    color: #fff;
}
.onoffswitch .onoffswitch-label .onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #ef3444;
    color: #fff;
    text-align: right;
}
.onoffswitch .onoffswitch-label .onoffswitch-switch {
    display: block;
    width: 15px;
    margin: 9px;
    background: #fff;
    border: 9px solid #fff;
    border-radius: 9px;
    position: absolute;
    bottom: -1px;
    right: 37px;
    transition: all 0.3s ease-in 0s;
}
.onoffswitch {
    position: relative;
    width: 71px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select: none;

    .onoffswitch-checkbox {
        display: none;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
        margin-left: 0;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
        right: 0px;
    }
    .onoffswitch-label {
        display: block;
        overflow: hidden;
        cursor: pointer;
        border: 2px solid #FFFFFF;
        border-radius: 18px;

        .onoffswitch-inner {
            display: block;
            width: 200%;
            margin-left: -100%;
            transition: margin 0.3s ease-in 0s;
        }
        .onoffswitch-inner:before, .onoffswitch-inner:after {
            display: block;
            float: left;
            width: 50%;
            height: 30px;
            padding: 0;
            line-height: 30px;
            font-size: 14px;
            color: $white;
            box-sizing: border-box;
        }
        .onoffswitch-inner:before {
            content: "ON";
            padding-left: 10px;
            background-color: $green;
            color: $white;
        }
        .onoffswitch-inner:after {
            content: "OFF";
            padding-right: 10px;
            background-color: $red;
            color: $white;
            text-align: right;
        }

        .onoffswitch-switch {
            display: block;
            width: 15px;
            margin: 9px;
            background: $white;
            border: 9px solid $white;
            border-radius: 9px;
            position: absolute;
            bottom: -1px;
            right: 37px;
            transition: all 0.3s ease-in 0s;
        }
    }
}

Ordered Lists

  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. List Item 4
<!--the span is required to have alternate color for numbers-->
<ol>
    <li><span>List Item 1</span></li>
    <li><span>List Item 2</span></li>
    <li><span>List Item 3</span></li>
    <li><span>List Item 4</span></li>
</ol>
ol
  li
    span List Item 1
  li
    span List Item 2
  li
    span List Item 3
  li
    span List Item 4
ol {
    font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    padding: 0;
    margin: 0;
    font-size: 16px;
    color: #33ccff;
    line-height: 24px;
}
ol li {
    list-style-position: inside;
}
ol li span {
    color: #585E66;
    padding-left: 6px;
}
ol {
    padding:0;
    margin:0;
    font-size: 16px;
    color: $lightblue;
    line-height: 24px;

    li {
        list-style-position: inside;
            span{
                color: #585E66;
                padding-left: 6px;
            }
    }
}

Unordered Lists

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
<ul class="list">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>
ul.list
  li List Item 1
  li List Item 2
  li List Item 3
  li List Item 4
ul.list {
    font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 16px;
    color: #33ccff;
    line-height: 24px;
}
ul.list li {
    color: #585E66;
    padding-left: 1em;
    text-indent: -.7em;
}
ul.list li:before {
    content: '\002022';
    color: #33ccff;
    padding-right: 6px;
}
ul.list {
    list-style: none;
    padding:0;
    margin:0;
    font-size: 16px;
    color: $lightblue;
    line-height: 24px;

    li {
        color: #585E66;
        padding-left: 1em;
        text-indent: -.7em;

        &:before {
            content: '\002022';
            color: $lightblue;
            padding-right: 6px;
        }
    }
}

Checkboxes

<input id="checkbox" type="checkbox" class="custom">
<label for="checkbox">This is a checkbox!</label>
input#checkbox.custom(type='checkbox')
label(for='checkbox') This is a checkbox!
input[type=checkbox].custom:not(old),
input[type=checkbox].custom:not(old) {
  width: 28px;
  margin: 0;
  padding: 0;
  opacity: 0;
}

input[type=checkbox].custom:not(old) + label {
  display: inline-block;
  margin-left: -28px;
  padding-left: 28px;
  background: url('images/check-radio-sprite.png') no-repeat 0 0;
  line-height: 24px;
}

input[type=checkbox].custom:not(old):checked + label {
  background-position: 0 -24px;
}

input[type=checkbox].custom {
  visibility: hidden;
}

input[type="checkbox"].custom:disabled + label {
  background: url('images/check-radio-sprite.png') no-repeat 0 -96px;
}
//checkboxes

input[type=checkbox].custom:not(old),
input[type=checkbox].custom:not(old)  {
  width   : 28px;
  margin  : 0;
  padding : 0;
  opacity : 0;
}

input[type=checkbox].custom:not(old) + label{
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 28px;
  background   : url('images/check-radio-sprite.png') no-repeat 0 0;
  line-height  : 24px;
}

input[type=checkbox].custom:not(old):checked + label{
  background-position : 0 -24px;
}

input[type=checkbox].custom {
  visibility: hidden;
}
input[type="checkbox"].custom:disabled + label {
    background   : url('images/check-radio-sprite.png') no-repeat 0 -96px;
}

Right click and save image to your images or img directory

Radio Buttons

<input type="radio" name="radio" value="" id="example" class="custom">
<label for="example">This is a radio button!</label>
input#example.custom(type='radio', name='radio', value='')
label.alt(for='example') This is a radio button!
input[type=radio].custom:not(old) {
  width   : 28px;
  margin  : 0;
  padding : 0;
  opacity : 0;
}

input[type=radio].custom:not(old) + label {
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 28px;
  background   : url('images/check-radio-sprite.png') no-repeat 0 -48px;
  line-height  : 24px;
}

input[type=radio].custom:not(old):checked + label{
  background-position : 0 -72px;
}

input[type=radio].custom {
  visibility: hidden;
}
//radio buttons

input[type=radio].custom:not(old) {
  width   : 28px;
  margin  : 0;
  padding : 0;
  opacity : 0;
}

input[type=radio].custom:not(old) + label {
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 28px;
  background   : url('images/check-radio-sprite.png') no-repeat 0 -48px;
  line-height  : 24px;
}

input[type=radio].custom:not(old):checked + label{
  background-position : 0 -72px;
}

input[type=radio].custom {
  visibility: hidden;
}

Right click and save image to your images or img directory

Modals

Headline messaging loren ipsum dolor.
Consect adipiscing elit enconto verbose?
This is the leading content of the modal that is user messaging to provide context.
<div class="reveal-modal">
    <div class="modal-body">
        <header>
          Heading
          <a class="close-reveal-modal">
            <svg role="img"
                 title="icon-close"
                 class="icon fill-blue icon-close-modal">
              <use xlink:href="/images/sprites/master.svg#icon-close"></use>
            </svg>
          </a>
        </header>
      </div>
      <div class="headline">
        Headline messaging loren ipsum dolor.<br />
        Consect adipiscing elit enconto verbose?
      </div>
      <div class="note">
        This is the leading content of the modal that is user messaging to provide context.
      </div>
      <div class="modal-footer clearfix">
        <button class="button">Confirm</button>
      </div>
</div>
.reveal-modal
    .modal-body
        header
            | Heading
            a.close-reveal-modal
            svg.icon.fill-blue.icon-close-modal(role='img', title='icon-close')
                use(xlink:href='/images/sprites/master.svg#icon-close')
        .headline
        | Headline messaging loren ipsum dolor.
          br
          | Consect adipiscing elit enconto verbose?
        .note
        | This is the leading content of the modal that is user messaging to provide context.
        .modal-footer.clearfix
            button.button Confirm
.reveal-modal-bg {
    background: rgba(0, 0, 0, 0.65);
    position: fixed;
}
.modal-error .reveal-modal {
    border: 5px solid #ef3444 !important;
}
.reveal-modal {
    padding: 0;
    margin: 8px;
    box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.75), 0px 0px 8px 0px rgba(50, 50, 50, 0.75);
    border-radius: 2px;
    overflow: hidden;
    text-align: center;
}
.reveal-modal header {
    font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: 300;
    font-style: normal;
    background: #262a48;
    font-size: 1.55rem;
    color: #33ccff;
    padding: 15px;
    position: relative;
}
.reveal-modal header .icon-close {
    width: 17px;
}
.reveal-modal header .close-reveal-modal {
    font-size: 2.5rem;
    line-height: 1;
    position: absolute;
    top: 0.625rem;
    right: 1.375rem;
    cursor: pointer;
}
.reveal-modal h1 {
    color: #262a48;
}
.reveal-modal h1.thanks {
    font-size: 2.5rem;
}
.reveal-modal h1.thanks .icon-filled-pass {
    fill: #7ecf54;
}
.reveal-modal .error {
    background: #ef3444;
    color: #fff;
    text-align: center;
    padding: 20px 40px;
    font-size: .85rem;
}
.reveal-modal .note {
    font-family: 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: .86rem;
    font-style: italic;
    color: #999cab;
    margin: 20px auto 30px;
    width: 70%;
    line-height: 20px;
}
.reveal-modal .headline {
  color: $darkblue;
  line-height: 24px;
  margin: 30px auto 20px;
}
.reveal-modal p.note span {
    color: #ef3444;
    position: relative;
    bottom: 0px;
    font-size: .86rem;
    display: inline;
}
.reveal-modal .modal-footer .button {
    cursor: pointer;
    margin: 0 auto;
}
.reveal-modal-bg {
  background: rgba(0, 0, 0, 0.65);
  position: fixed;
}
.modal-error .reveal-modal{
  border: 5px solid $red !important;
}
.reveal-modal {
  padding: 0;
  margin: 8px;
  box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.75), 0px 0px 8px 0px rgba(50, 50, 50, 0.75);
  border-radius: 2px;
  overflow: hidden;
  text-align: center;

    header {
      @include latolight;
      background: $darkblue;
      font-size: 1.55rem;
      color: $lightblue;
      padding: 15px;
      position: relative;

        .icon-close-modal {
          width: 17px;
        }

        .close-reveal-modal {
            font-size: 2.5rem;
            line-height: 1;
            position: absolute;
            top: 0.625rem;
            right: 1.375rem;
            cursor: pointer;
        }
    }

    h1 {
      color: $darkblue;
    }

    h1.thanks {
      font-size: 2.5rem;
        .icon-filled-pass {
          fill:$green;
        }
    }
    .error {
      background: $red;
      color:$white;
      text-align: center;
      padding:20px 40px;
      font-size: .85rem;
    }
    .headline {
      color: $darkblue;
      line-height: 24px;
      margin: 30px auto 20px;
    }
    .note {
      @include latomedium-italic;
      font-size: .86rem;
      font-style: italic;
      color:$gray;
      margin: 20px auto 30px;
      width:70%;
      line-height: 20px;

        span {
          color:$red;
          position: relative;
          bottom: 0px;
          font-size: .86rem;
          display: inline;
        }
    }

    .centered .button {
      margin:0 auto;
      float: none;
    }

    .confirm {
        @include latolight;
        color:$darkblue;
        font-size:1.5rem;
        margin:0px auto 50px;
        width:70%;
    }
    .modal-footer {
      background: $hrcolor;
      padding: 10px;

        button{
          cursor: pointer;
          width: 49%;
        }

    }
    &:focus{
      outline: none;
    }

}

//responsive modal size

@media #{$small-only} {
    .reveal-modal {
        width: 60%;
          .button {
              font-size: .9rem;
          }
    }
}
@media #{$medium-only} {
    .reveal-modal {
        width: 55%;
          .button {
              font-size: 1.0rem;
            }
    }
}
@media #{$large-up} {
    .reveal-modal {
        width: 35%;
    }
}

Tooltips

<!-- TODO: we can make these much better, didn't have time for R/D, in lab we used foundation component */ -->
<p><a href="#" data-tool="tooltip" class="tooltip animate">Tooltip on top</a></p>
<p><a href="#" class="tooltip bottom animate blue" data-tool="This content should grow into as many lines as it needs to in order to display the content.">Tooltip on bottom</a></p>
<p><a href="#" class="tooltip right animate blue" data-tool="On the right'">Tooltip on right</a></p>
<p><a href="#" class="tooltip left animate blue" data-tool="Can be a link, adjust the href">Tooltip on left</a></p>
// TODO: we can make these much better, didn't have time for R/D, in lab we used foundation component */
p
  a.tooltip.animate(href='#', data-tool='tooltip') Tooltip on top
p
  a.tooltip.bottom.animate(href='#', data-tool='This content should grow into as many lines as it needs to in order to display the content.') Tooltip on bottom
p
  a.tooltip.right.animate(href='#', data-tool="On the right'") Tooltip on right
p
  a.tooltip.left.animate(href='#', data-tool='Can be a link, adjust the href') Tooltip on left
a.tooltip {
  position: relative;
  display: inline; }

a.tooltip:after {
  display: block;
  visibility: hidden;
  position: absolute;
  bottom: 0;
  left: 20%;
  opacity: 0;
  content: attr(data-tool);
  /* might also use attr(title) */
  height: auto;
  min-width: 200px;
  padding: 5px 8px;
  z-index: 999;
  color: #999cab;
  font-size: 12px;
  text-decoration: none;
  text-align: center;
  background: #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #e5e6ea; }

a.tooltip:before {
  position: absolute;
  visibility: hidden;
  width: 0;
  height: 0;
  left: 50%;
  bottom: 0px;
  opacity: 0;
  content: "";
  border-style: solid;
  border-width: 6px 6px 0 6px;
  border-color: #e5e6ea transparent transparent transparent; }

a.tooltip:hover:after {
  visibility: visible;
  opacity: 1;
  bottom: 20px; }

a.tooltip:hover:before {
  visibility: visible;
  opacity: 1;
  bottom: 14px; }

/* tips on bottom */
a.tooltip.bottom:after {
  bottom: auto;
  top: 0;
  left: 0; }
a.tooltip.bottom:hover:after {
  top: 33px; }
a.tooltip.bottom:before {
  border-width: 0 8px 10px 8px;
  border-color: transparent transparent #e5e6ea transparent;
  top: 0px; }
a.tooltip.bottom:hover:before {
  top: 25px; }

/* tips on the right */
a.tooltip.right {
  float: none !important; }
  a.tooltip.right:after {
    left: 100%;
    bottom: -45%;
    right: 20%; }
  a.tooltip.right:hover:after {
    left: 110%;
    bottom: -45%; }
  a.tooltip.right:before {
    border-width: 8px 10px 8px 0;
    border-color: transparent #e5e6ea transparent transparent;
    left: 90%;
    bottom: 2%; }
  a.tooltip.right:hover:before {
    left: 102%;
    bottom: 2%; }

/* tips on the left */
a.tooltip.left:after {
  left: auto;
  right: 100%;
  bottom: -45%; }
a.tooltip.left:hover:after {
  right: 110%;
  bottom: -45%; }
a.tooltip.left:before {
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent #e5e6ea;
  left: auto;
  right: 90%;
  bottom: 2%; }
a.tooltip.left:hover:before {
  right: 100%;
  bottom: 2%; }

a.tooltip.animate:after, a.tooltip.animate:before {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
a.tooltip{
  position: relative;
  display: inline;
}
a.tooltip:after{
  display: block;
  visibility: hidden;
  position: absolute;
  bottom: 0;
  left: 20%;
  opacity: 0;
  content: attr(data-tool); /* might also use attr(title) */
  height: auto;
  min-width: 200px;
  padding: 5px 8px;
  z-index: 999;
  color: $gray;
  font-size: 12px;
  text-decoration: none;
  text-align: center;
  background: $white;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border:1px solid $lightgray;
}

a.tooltip:before {
  position: absolute;
  visibility: hidden;
  width: 0;
  height: 0;
  left: 50%;
  bottom: 0px;
  opacity: 0;
  content: "";
  border-style: solid;
  border-width: 6px 6px 0 6px;
  border-color: $lightgray transparent transparent transparent;
}
a.tooltip:hover:after{
    visibility: visible;
    opacity: 1;
    bottom: 20px;
}
a.tooltip:hover:before{
    visibility: visible;
    opacity: 1;
    bottom: 14px;
}

/* tips on bottom */
a.tooltip.bottom{
    &:after {
        bottom: auto;
        top: 0;
        left: 0;
    }
    &:hover:after {
        top: 33px;
    }
    &:before {
      border-width: 0 8px 10px 8px;
      border-color: transparent transparent $lightgray transparent;
      top: 0px
    }
    &:hover:before {
        top: 25px;
    }
}


/* tips on the right */
a.tooltip.right {
    float:none !important;
    &:after {
        left: 100%;
        bottom: -45%;
        right: 20%;
    }
    &:hover:after {
        left: 110%;
        bottom: -45%;
    }
    &:before {
      border-width: 8px 10px 8px 0;
      border-color: transparent $lightgray transparent transparent;
      left: 90%;
      bottom: 2%;
    }
    &:hover:before {
        left: 102%;
        bottom: 2%;
    }
}


/* tips on the left */
a.tooltip.left {
    &:after {
        left: auto;
        right: 100%;
        bottom: -45%;
    }
    &:hover:after {
        right: 110%;
        bottom: -45%;
    }
    &:before {
        border-width: 5px 0 5px 10px;
        border-color: transparent transparent transparent $lightgray;
        left: auto;
        right: 90%;
        bottom: 2%;
    }
    &:hover:before {
        right: 100%;
        bottom: 2%;
    }
}


a.tooltip.animate:after, a.tooltip.animate:before {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}