Base

Forms

All form components come in a few different variations. The standard component height is 35 pixels. Add a class of .small to make it 30 pixels instead.

Basic form example

Write the confirmation mail below.

Divider

Choose if you want the fields for first name visible. The e-mail field is mandatory.

Form settings

Use a custom landing page and write a custom text for the submit button.

<div class="form-tooltip clearfix">
    <label class="left" for="email">Email*</label>
    <a href="#" tabindex="-1">
        <span class="icon-info2"></span>
        <span class="tooltip">Write the confirmation mail below.</span>
    </a>
</div>
<input type="text" id="email" />

<div class="legend">
    <h3>
        <strong>Divider</strong>
    </h3>
</div>

<p class="small light-text">Choose if you want the fields for first name visible. The e-mail field is mandatory.</p>

<label for="text_area">Text Area</label>
<textarea id="text_area"></textarea>

<div class="legend">
    <h3>
        <strong>Form settings</strong>
    </h3>
</div>

<p class="small light-text">Use a custom landing page and write a custom text for the submit button.</p>

<div class="row">
    <div class="col-6">
        <label for="next_url">Next URL</label>
        <input type="text" id="next_url" />
    </div>
    <div class="col-6">
        <label for="button_text">Button text</label>
        <input type="text" id="button_text" />
    </div>
</div>


<div class="row text-right">
    <input class="btn primary" type="submit" value="Submit">
</div>

Checkboxes and radio buttons

We use native styling for both checkboxes and radio buttons to ensure usability across browsers. Both components works the same way, you can either display the label inline or stacked.

<div class="row">
    <label class="checkbox">
        <input type="checkbox" name="checkbox" value="1" /> Radio 1
    </label>
    <label class="checkbox">
        <input type="checkbox" name="checkbox" value="2" /> Radio 2
    </label>
    <label class="checkbox">
        <input type="checkbox" name="checkbox" value="3" /> Radio 3
    </label>
</div>

<div>
    <input id="radio1" type="radio" name="radio1" />
    <label for="radio1">Radio 1</label>
</div>

<div>
    <label class="radio">
        <input type="radio" name="radio" value="1" /> Radio 1
    </label>
</div>

<div class="row">
    <label class="radio">
        <input type="radio" name="radio" value="1" /> Radio 1
    </label>
</div>

File uploads

The <input type="file>" is styled with css to remove th ugly defaults. We use angular in the front end to display the name of the chosen file.

File upload 
<div class="file-upload-wrap btn primary">
    <input type="file" id="file" class="file-upload-input">
    <span>File upload</span>
</div>

Labels

Labels only comes in one style at the moment. We style the attribute and there's no classes to alter the look.

<label for="label">Label</label>
<input type="text" id="label" />

Layout

Long form fields can quickly ge crowded and confusing, so we have added dividers to better separate sections from each other.

Divider 

<div class="legend">
    <h3>
        <strong>Divider</strong>
    </h3>
</div>

Selects

<label for="country">Country</label>
<select id="country">
    <optgroup label="Option Group 1">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </optgroup>
    <optgroup label="Option Group 2">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3" disabled>Disabled Option</option>
    </optgroup>
</select>

Text fields

<label for="input_text">Text input</label>
<input type="text" id="input_text" />
<label for="text_area">Text Area</label>
<textarea id="text_area"></textarea>

Tables

Button styles can be applied to any element. Typically you'll want to use either a <button> or an <a> element. Buttons next to each other is spaced out with the adjacent selector .btn + .btn.

Email First name Last name
Simon.wallstrom@gmail.com Simon Wallström
Simon.wallstrom@gmail.com Simon Wallström
Simon.wallstrom@gmail.com Simon Wallström
Simon.wallstrom@gmail.com Simon Wallström
Simon.wallstrom@gmail.com Simon Wallström 
<table class="table">
    <thead>
        <tr>
            <th>Email</th>
            <th>First name</th>
            <th>Last name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Simon.wallstrom@gmail.com</td>
            <td>Simon</td>
            <td>Wallström</td>
        </tr>
        <tr>
            <td>Simon.wallstrom@gmail.com</td>
            <td>Simon</td>
            <td>Wallström</td>
        </tr>
        <tr>
            <td>Simon.wallstrom@gmail.com</td>
            <td>Simon</td>
            <td>Wallström</td>
        </tr>
        <tr>
            <td>Simon.wallstrom@gmail.com</td>
            <td>Simon</td>
            <td>Wallström</td>
        </tr>
        <tr>
            <td>Simon.wallstrom@gmail.com</td>
            <td>Simon</td>
            <td>Wallström</td>
        </tr>
    </tbody>
</table>

Typography

These are the heading sizes that you can use site wide.

Heading 1 32px

Heading 2 26px

Heading 3 22px

Heading 4 18px

Heading 5 16px

This is an example of our base font style 16px. 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.

<h1>Heading 1 32px</h1>
<h2>Heading 2 26px</h2>
<h3>Heading 3 22px</h3>
<h4>Heading 4 18px</h4>
<h5>Heading 5 16px</h5>
<p>This is an example of our base font style 16px. 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.</p>