Style Guide

This is the central location of all components.

Classes

There are some core classes that defines the layout and design. They are global and not bound to any specific module.

Alignment Description
.center Add this class to center content.
.center-mobile Center content on mobile devices only.
.center-tablet Center content on tablets and mobile devices.
.middle Align content vertically when height is unknown.
Backgrounds Description
.bg-dark Solid background where "dark" can be replaced with "light", "primary"...
.bg-gradient-blue Gradient background where "blue" can be replaced with "cyan", "green"...
.bg-image-01 Image-based backgrounds where "01" can be replaced with "02", "03"...
.bg-pattern-01 Pattern-based backgrounds with SVG where "01" can be replaced with "02", "03"...
.overlay Adds an overlay with opacity on top of image-based backgrounds.
Sizes Description
.full-screen Adding this class will make sure the module goes full screen.
.full-width This class will make sure the element goes full width.
.full-width-mobile Useful if you'd like an element to go full width only on mobile.
.full-width-tablet Useful if you'd like an element to go full width on tablets and mobile devices.
.max-width-s Set a small maximum width of an element.
.max-width-m Set a medium maximum width of an element.
.max-width-l Set a large maximum width of an element.
Spacing Description
.padding This is the main inner spacing of a module.
.margin-bottom Add spacing below an element inside a module.
.margin-top Add spacing above an element inside a module.

Grid

The simple grid below is based on 5 columns. You can add "no-gutter" as a class to remove spacing between columns.

Example: <div class="row">
  <div class="col-one-third"></div>
  <div class="col-one-third"></div>
  <div class="col-one-third"></div>
</div>

You can also have unequal columns.

Example: <div class="row">
  <div class="col-two-thirds"></div>
  <div class="col-one-third"></div>
</div>

Colors

The color scheme aims to be simple without too many variations. Displayed in HEX and a production variable (VAR).

Color Hex Var
#5966d2 $color-primary
#63ce63 $color-green
#ffbf2f $color-orange
#e52b20 $color-red
#24263a $color-text
#f6f6f9 $color-gray-light
#ececee $color-gray-medium
#ccced0 $color-gray-dark

A collection of subtle gradients is also available.

Gradient Class
.bg-gradient-blue
.bg-gradient-cyan
.bg-gradient-green
.bg-gradient-indigo
.bg-gradient-olive
.bg-gradient-pink
.bg-gradient-sienna
.bg-gradient-violet

Icons

The easy to use material icons by Google are excellent for web projects. Based on the 8-point grid, they are preferably displayed at a multiple of 24px.

Example: <i class="material-icons">face</i>

Typography

We use Lato as primary typeface. Listed below are all default styles for headings.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lead

The main purpose of the lead style is to support headings as a subtitle.

Example: <p class="lead"></p>

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Paragraph

With an increased font-size and line-height, the paragraph style is great for readability.

Example: <p class="paragraph"></p>

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Lists

Below is the default style for unordered lists.

  • List item one.
  • List item two.
  • List item three.
  1. List item one.
  2. List item two.
  3. List item three.

You can also add class "inline" to make horizontal lists.

Buttons

Buttons are divided into types: primary, secondary and other states such as disabled.

Example: <a href="#" class="button button-primary" role="button">Primary</a>
<a href="#" class="button button-secondary" role="button">Secondary</a>
<a href="#" class="button button-disabled" role="button">Disabled</a>

To change the size, you can add class "button-l" for a large button. There are four pre-defined sizes: large, default, medium and small.

Forms

Input fields are divided into types and states. Below code will create two columns with a label to the left and an input to the right.

Example: <form>
  <div class="form-group">
    <label for="name">Your Name:</label>
    <input id="name" type="text" name="name">
  </div>
</form>
500 characters max.

Alerts

Use alerts to give users quick feedback on performed tasks.

Example: <div class="alert alert-success" role="alert">Great! This is awesome.</div>

Tables

Built with headers and rows, a table is useful to display many items or content with measurable data.

Name Modified Size
Documentation Today 12.7 MB
Style Guide Yesterday 2.4 MB
Templates Yesterday 4.5 MB

Cards

A card is a great content container.

Example: <div class="card card-content">
  <h5>Card Title</h5>
  <p class="paragraph">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
</div>
Card Title

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

Dark Mode

If you want to turn a module dark, add class .dark to the section.

Example: <section class="bg-dark dark"></section>
Card Title

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.