Styleguide

Colors

$dark-blue #264059
$blue #9ABFBC
$purple #5E4660
$red #F76552
$dark-blue-pastel #BDC5CD
$blue-pastel #E0ECEB
$purple-pastel #BBB4BC
$red-pastel #FDD0CA
$grey #6D6D6D

Typography

  • item
  • item
  • item
  • item
  • item
  1. item
  2. item
  3. item
  4. item
  5. item

This is list class="lead-ul"

  • Alltid riktig pakke for din bedrift
  • Tilpass systemet med tilleggstjenester og integrasjoner
  • Gratis support

This is headline one H1

This is headline H2

This is headline H3

This is headline H4

This is headline H5

This is paragrap

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

link in the text

Read more

Link class c-link

test@test.com

Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod

Buttons

Primary Secondary Purple blue-pastel outline-purple outline-darkblue outline-red Success Alert Warning

So Small Basic btn Large Such Expand
One Two Three

Cards

data-theme="blue"

  • item
  • item
  • item
  • item
  • item

data-theme="dark-blue"

  • item
  • item
  • item
  • item
  • item

data-theme="red"

  • item
  • item
  • item
  • item
  • item

data-theme="purple"

  • item
  • item
  • item
  • item
  • item

data-theme="gray"

  • item
  • item
  • item
  • item
  • item

Default

  • item
  • item
  • item
  • item
  • item

Forms

Here's how you use this input field!

Choose Your Favorite
Check these out

Grid (XY)

full width cell
full width cell
6 cells
6 cells
12/6/4 cells
12/6/8 cells

Label

Secondary Label Success Label Alert Label Warning Label

Media Object

Dreams feel real while we're in them.

I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.

Motion UI

This panel fades.

This panel slides.

Pagination

Table

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Modals and Video

Video in modal

on modal control: data-open="modalID"


<button class="button outline-red icon-btn" data-open="newVideo">
	<span class="icon-btn__text">Button text</span>
	<span class="icon-btn__image">
		<svg class="icon"><use xlink:href="#play-icon" /></svg>
	</span>
	</button>
<div id="newVideo" class="reveal large ttReveal--transparent" data-reveal data-reset-on-close="true">
	<div class="responsive-embed widescreen">
		<iframe src="https://www.youtube.com/embed/hik7c6V7kyI" width="560" height="315"></iframe>
</div>
	<button class="close-button" type="button" data-close aria-label="Close modal">
		<span aria-hidden="true">×</span>
	</button>
</div>

Video embeded

Tooltip

The scarabaeus hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.