Color

The look and feel of our company and product relies on using a handful of specific colors that help convey meaning and purpose.

Branding

Grayscale

$blue: #0099e5;
$green: #34bf49;
$red: #ff4c4c;
$orange: #f47721;
$purple: #8162b1;
$sky-blue: #00bce4;
$yellow: #ffd900;
$brown: #8a7967;
$white: #fff;
$black: #000;
$dark-gray: #333;
$medium-gray: #999;
$light-gray: #ddd;

Badges

Badges can notify you that there are new or unread messages or notifications. Add the .badge class to give it the background.

Basic

  • Badge
  • Positive
  • Negative
<span class="badge">Badge</span>
<span class="badge positive">Positive</span>
<span class="badge negative">Negative</span>

Colors

  • badge
  • badge
  • badge
  • badge
  • badge
  • badge
  • badge
  • badge
  • badge
<span class="badge gray">badge</span>
<span class="badge blue">badge</span>
<span class="badge green">badge</span>
<span class="badge red">badge</span>
<span class="badge orange">badge</span>
<span class="badge purple">badge</span>
<span class="badge sky-blue">badge</span>
<span class="badge yellow">badge</span>
<span class="badge brown">badge</span>

Alerts

Flash messages, or alerts, inform users of successful or pending actions. Use them sparingly. Don’t show more than one at a time.

Types

This is a success message
This is an error message
This is a warning message
This is an info message
This is a debug message
<div class="alert alert-success">
  This is a success message
  <div class="alert-close"></div>
</div>
<div class="alert alert-error">
  This is an error message
  <div class="alert-close"></div>
</div>
<div class="alert alert-warning">
  This is a warning message
  <div class="alert-close"></div>
</div>
<div class="alert alert-info">
  This is an info message
  <div class="alert-close"></div>
</div>
<div class="alert alert-debug">
  This is a debug message
  <div class="alert-close"></div>
</div>

Modals

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Basic

<button type="button" name="button" onclick="document.getElementById('modal-1').style.display='block'">Open modal</button>
<div id="modal-1" class="overlay-modal">
	<div class="modal">
		<h2>Modal title</h2>
		<a class="modal-close" onclick="document.getElementById('modal-1').style.display='none'">
      <i class="fa fa-times"></i>
    </a>
    <div class="modal-content">
      <p>
  			Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  		</p>
      <p>
        Ut enim ad minim veniam, quis nostrud ullamco laboris nisi ut aliquip ex ea commodo.
      </p>
      <div class="modal-buttons">
        <button class="button outline" onclick="document.getElementById('modal-1').style.display='none'">Close</button>
        <button class="button">Save modal</button>
      </div>
    </div>
	</div>
</div>

Tooltips

Add tooltips built entirely in CSS to nearly any element. Just add a few classes and an aria-label attribute.

Basic

Tooltip Down Tooltip Up Tooltip Left Tooltip Right
<span class="tooltip tooltip-down" aria-label="My Tooltip Down.">
  Tooltip Down
</span>
<span class="tooltip tooltip-up" aria-label="My Tooltip Up.">
  Tooltip Up
</span>
<span class="tooltip tooltip-left" aria-label="My Tooltip Left.">
  Tooltip Left
</span>
<span class="tooltip tooltip-right" aria-label="My Tooltip Right.">
  Tooltip Right
</span>

Utilities

There are a handful of utilities in DesignUp for quick behaviors, floats, colors, alignment, and more.

Floats

left right
<span class="left">
  left
</span>
<span class="right">
  right
</span>

Text Alignment

text left

text center

text right


Text justify

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<p class="text-left">
  text left
</p>
<p class="text-center">
  text center
</p>
<p class="text-right">
  text right
</p>
<p class="text-justify">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

Text wrapping

Hello! How are you? This is my nowrap text...

<p class="text-nowrap">
  Hello! How are you? This is my nowrap text...
</p>

Text truncate

Hello! How are you? This is my truncate text...

<p class="text-truncate" style="max-width: 250px;">
  Hello! How are you? This is my truncate text...
</p>

Text transform

Text lowercase

Text uppercase

Text capitalize

<p class="text-lowercase">
  Text lowercase
</p>
<p class="text-uppercase">
  Text uppercase
</p>
<p class="text-capitalize">
  Text capitalize
</p>

Font weight and italics

Font light

Font regular

Font medium

Font semi bold

Font bold

Font extra bold

Font italic

<p class="font-light">
  Font light
</p>
<p class="font-regular">
  Font regular
</p>
<p class="font-medium">
  Font medium
</p>
<p class="font-semi-bold">
  Font semi bold
</p>
<p class="font-bold">
  Font bold
</p>
<p class="font-extra-bold">
  Font extra bold
</p>
<p class="font-italic">
  Font italic
</p>

Text Colors

  • Text green
  • Text red
  • Text orange
  • Text purple
  • Text sky blue
  • Text yellow
  • Text brown
  • Text dark gray
  • Text medium gray
  • Text light gray
<span class="color-green">Text green</span>
<span class="color-red">Text red</span>
<span class="color-orange">Text orange</span>
<span class="color-purple">Text purple</span>
<span class="color-sky-blue">Text sky blue</span>
<span class="color-yellow">Text yellow</span>
<span class="color-brown">Text brown</span>
<span class="color-dark-gray">Text dark gray</span>
<span class="color-medium-gray">Text medium gray</span>
<span class="color-light-gray">Text light gray</span>

Background colors

Background green

Background red

Background orange

Background purple

Background sky-blue

Background yellow

Background brown

Background dark-gray

Background medium-gray

Background light-gray

<p class="background-green">
  Background green
</p>
<p class="background-red">
  Background red
</p>
<p class="background-orange">
  Background orange
</p>
<p class="background-purple">
  Background purple
</p>
<p class="background-sky-blue">
  Background sky-blue
</p>
<p class="background-yellow">
  Background yellow
</p>
<p class="background-brown">
  Background brown
</p>
<p class="background-dark-gray">
  Background dark-gray
</p>
<p class="background-medium-gray">
  Background medium-gray
</p>
<p class="background-light-gray">
  Background light-gray
</p>

Tabs

The tabs structure consists of an unordered list of tabs that have hashes corresponding to tab ids. Then when you click on each tab, only the container with the corresponding tab id will become visible.

Basic

This the content of Tab 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This the content of Tab 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This the content of Tab 3

Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.

This the content of Tab 4

Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
<div class="tabs">
  <a href="#" class="tab active" data-tab="tab-1">Tab 1</a>
  <a href="#" class="tab" data-tab="tab-2">Tab 2</a>
  <a href="#" class="tab" data-tab="tab-3">Tab 3</a>
  ...
</div>
<div class="tabs-content">
  <div id="tab-1" class="tab-content active">
    This the content of Tab 1
  </div>
  <div id="tab-2" class="tab-content">
    This the content of Tab 2
  </div>
  <div id="tab-3" class="tab-content">
    This the content of Tab 3
  </div>
  ...
</div>

Tabs buttons

This the content of Tab 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This the content of Tab 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This the content of Tab 3

Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.

This the content of Tab 4

Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
<div class="tabs-buttons">
  <a href="#" class="tab active" data-tab="tab-1">Tab 1</a>
  <a href="#" class="tab" data-tab="tab-2">Tab 2</a>
  <a href="#" class="tab" data-tab="tab-3">Tab 3</a>
  ...
</div>
<div class="tabs-content">
  <div id="tab-1" class="tab-content active">
    This the content of Tab 1
  </div>
  <div id="tab-2" class="tab-content">
    This the content of Tab 2
  </div>
  <div id="tab-3" class="tab-content">
    This the content of Tab 3
  </div>
  ...
</div>

Tabs buttons outline

This the content of Tab 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This the content of Tab 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This the content of Tab 3

Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.

This the content of Tab 4

Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
<div class="tabs-buttons-outline">
  <a href="#" class="tab active" data-tab="tab-1">Tab 1</a>
  <a href="#" class="tab" data-tab="tab-2">Tab 2</a>
  <a href="#" class="tab" data-tab="tab-3">Tab 3</a>
  ...
</div>
<div class="tabs-content">
  <div id="tab-1" class="tab-content active">
    This the content of Tab 1
  </div>
  <div id="tab-2" class="tab-content">
    This the content of Tab 2
  </div>
  <div id="tab-3" class="tab-content">
    This the content of Tab 3
  </div>
  ...
</div>

Vertical tabs

This the content of Tab 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

This the content of Tab 2

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

This the content of Tab 3

Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque.

This the content of Tab 4

Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec rutrum congue leo eget malesuada.
<div class="row">
  <div class="four">
    <div class="tabs-buttons vertical-tabs">
      <a href="#" class="tab active" data-tab="tab-1">Tab 1</a>
      <a href="#" class="tab" data-tab="tab-2">Tab 2</a>
      <a href="#" class="tab" data-tab="tab-3">Tab 3</a>
      ...
    </div>
  </div>
  <div class="eight">
    <div class="tabs-content">
      <div id="tab-1" class="tab-content active">
        This the content of Tab 1
      </div>
      <div id="tab-2" class="tab-content">
        This the content of Tab 2
      </div>
      <div id="tab-3" class="tab-content">
        This the content of Tab 3
      </div>
      ...
    </div>
  </div>
</div>

Javascript
var setActiveTab = function() {
  var tabs = this.parentNode.querySelectorAll(".tab");
  for(var i = 0; i < tabs.length; i++) {
    tabs[i].classList.remove("active");
    document.getElementById(tabs[i].getAttribute("data-tab")).classList.remove("active");
  }

  this.classList.add("active");
  document.getElementById(this.getAttribute("data-tab")).classList.add("active");
};

var tabElements = document.querySelectorAll(".tab");
for (var i = 0; i < tabElements.length; i++) {
  tabElements[i].addEventListener('click', setActiveTab, false);
}

Cards

Cards are a convenient means of displaying content composed of different types of objects. They’re also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length.

Image Card

SocialUp

Lorem ipsum dolor sit amet, consectet elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Button card
<div class="card" style="width: 20rem;">
  <img class="card-image" src="images/socialup.jpg" alt="" />
  <div class="card-content">
    <h2>
      SocialUp
    </h2>
    <p>
      Lorem ipsum dolor sit amet, consectet elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
    </p>
    <a class="button" href="#">Button card</a>
  </div>
</div>

Titles, text and links

Card title

Card subtitle

Lorem ipsum dolor sit amet, consectet elit, sed do eiusmod tempor incididunt ut labore et.

<div class="card" style="width: 20rem;">
  <div class="card-content">
    <h1>
      Card title
    </h1>
    <h3 class="color-medium-gray">
      Card subtitle
    </h3>
    <p>
      Lorem ipsum dolor sit amet, consectet elit, sed do eiusmod tempor incididunt ut labore et.
    </p>
    <ul class="inline font-semi-bold">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

Cards colors

Card title

Card subtitle

Lorem ipsum dolor sit amet, consectet elit, sed do eiusmod tempor incididunt ut labore et.


Card title

Card subtitle

Lorem ipsum dolor sit amet, consectet elit, sed do eiusmod tempor incididunt ut labore et.


Card title

Card subtitle

Lorem ipsum dolor sit amet, consectet elit, sed do eiusmod tempor incididunt ut labore et.


Card title

Card subtitle

Lorem ipsum dolor sit amet, consectet elit, sed do eiusmod tempor incididunt ut labore et.


Card title

Card subtitle

Lorem ipsum dolor sit amet, consectet elit, sed do eiusmod tempor incididunt ut labore et.


Card title

Card subtitle

Lorem ipsum dolor sit amet, consectet elit, sed do eiusmod tempor incididunt ut labore et.


Card title

Card subtitle

Lorem ipsum dolor sit amet, consectet elit, sed do eiusmod tempor incididunt ut labore et.


Card title

Card subtitle

Lorem ipsum dolor sit amet, consectet elit, sed do eiusmod tempor incididunt ut labore et.


Card title

Card subtitle

Lorem ipsum dolor sit amet, consectet elit, sed do eiusmod tempor incididunt ut labore et.

<div class="card-green" style="width: 25rem;">
  <div class="card-content">
    <h1>
      Card title
    </h1>
    <h3 class="card-subtitle">
      Card subtitle
    </h3>
    <p>
      Lorem ipsum dolor sit amet, consectet elit, sed do eiusmod tempor incididunt ut labore et.
    </p>
  </div>
</div>
<div class="card-red" style="width: 25rem;">
  ...
</div>
<div class="card-orange" style="width: 25rem;">
  ...
</div>
<div class="card-purple" style="width: 25rem;">
  ...
</div>
<div class="card-sky-blue" style="width: 25rem;">
  ...
</div>
<div class="card-yellow" style="width: 25rem;">
  ...
</div>
<div class="card-dark-gray" style="width: 25rem;">
  ...
</div>
<div class="card-medium-gray" style="width: 25rem;">
  ...
</div>
<div class="card-light-gray" style="width: 25rem;">
  ...
</div>

Pagination

Add pagination links to help split up your long content into shorter, easier to understand blocks.

Basic

<div class="pagination">
  <a href="#"><i class="fa fa-angle-left"></i></a>
  <a class="active" href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">7</a>
  <a href="#">8</a>
  <a href="#">9</a>
  <a href="#"><i class="fa fa-angle-right"></i></a>
</div>

Pickaday

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Basic

<form action="." method="post" enctype="multipart/form-data">
  <input type="text" name="" value="2017-09-28" required="" id="id_start_date">
  <input type="text" name="" value="2017-10-26" required="" id="id_end_date">
  <input type="button" name="" value="Apply">
</form>