Colors
Typography
- item
- item
- item
- item
- item
- item
- item
- item
- item
- 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.
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
Breadcrumbs
Buttons
Primary Secondary Purple blue-pastel outline-purple outline-darkblue outline-red Success Alert WarningSo Small Basic btn Large Such Expand
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
Grid (XY)
Label
Secondary Label Success Label Alert Label Warning LabelMedia 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.