Component library example

Introduction

This is an example overview page generated by the Coatroom tool.

The components below are examples of different components that has different states and types.

Colors

Below is palette of all colors used in our component library. When creating new components, please only use these color so we keep a consistent color schema across all components.

These colors were approved by Emelie over at the UX-department, February 20, 2015.

Please send any questions to her.

@colorClouds

@colorTurquoise

@colorEmerald

@colorSky

@colorAmethyst

@colorAsphalt

@colorOrange

@colorLava

@colorConcrete

Buttons

This is an ordinary button.

Overview

type / state	default	btn-hover	btn-active	btn-disabled
default
success
warning
danger

Please use the appropriate button depending on the context. The default type may only be used during development.

HTML template

Right click on the button you want to use and copy the HTML, or use the template below:

<button type="button" class="btn">
    Lorem ipsum button
</button>

Tables

For showing tabular data.

Overview

type / state

default

table-borderless

default

First name	Last name name	Username	Points
Bill	Gates	bill.gates	16
Steve	Jobs	steve.jobs	14
Tim	Berners-Lee	tim.bernersless	28

First name	Last name name	Username	Points
Bill	Gates	bill.gates	16
Steve	Jobs	steve.jobs	14
Tim	Berners-Lee	tim.bernersless	28

HTML template

Right click on the table you want to use and copy the HTML, or use the template below:

<table class="table">
    <thead>
    <tr>
        <th>...</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>...</td>
    </tr>
    </tbody>
</table>

Text inputs

Use this for standard text inputs.

Overview

type / state	default	textinput-hover	textinput-focus	textinput-disabled	textinput-invalid
default	Lorem ipsum label	Lorem ipsum label	Lorem ipsum label	Lorem ipsum label	Lorem ipsum label

HTML template

Right click on the input you want to use and copy the HTML, or use the template below:

<div class="textinput">
    <input type="text" placeholder="Lorem ipsum placeholder" class="textinput-input"/>
    <label class="textinput-label">Lorem ipsum label</label>
</div>