Styleguide

Generic

Colors

Colors are stored as CSS4 variables, following the pattern --[name]-(lightest|lighter|base|darker|darkest). To use the colors on components, use the names (starts with u-) listed below as class attributes.

Unsure what color combinations are safe? See this contrast chart for full WCAG recommendations.

Extra colors
Success
Warning
Error
Informational
Interactive

Fonts

The two main fonts in use are Roboto and Roboto Mono.

Roboto, which is a sans serif font, is used for body text, headers, form fields and other ”long” texts.

Roboto Mono, which is a monospaced "typewriter" font, is used for labels, tabs, table headers and similar ”short and small” texts.

Elements

Elements are HTML elements. They do not carry much styling, which is left for Components. Think of them as little more than resets.

Headings

Heading levels range from h1 to h6 and are semantic only. Please do not use to achieve a certain size (use utility classes or components for this).

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Tables

Tables are semantic elements. Please do not use to achieve a certain layout (use grid objects for this). For better looks, see the pre-styled table component.

Table caption
Heading cell Heading cell Heading cell
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
<table>
  <caption>Table caption</caption>
  <thead>
    <tr>
      <th scope="col">Heading cell</th>
      <th scope="col">Heading cell</th>
      <th scope="col">Heading cell</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet.</td>
      <td>Lorem ipsum dolor sit amet.</td>
      <td>Lorem ipsum dolor sit amet.</td>
    </tr>
  </tbody>
</table>

Objects

Objects are more abstract than Components. Avoid modifying their styles. Be careful around anything with a leading o-.

Cropped

This object works as a wrapper for components where you'd want a horizontal scroll bar "cropping" the content.

Table caption
Heading cell Heading cell Headingcellwithverylongname Heading cell Heading cell
Ut enim ad minim veniam, quis ex ea commodo consequat. Loremipsumdolorsitamet, consectetur adipisicing ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ea commodo consequat. Loremipsumdolorsitamet, consectetur or incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ea commodo consequat.
Loremipsumdolorsitametconsectetur adipisicing elit, e et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco modo consequat. Ad minim veniam, quis nostrud exercitation commodo consequat. Ut enim ad minim veniam, quis quip ex ea commodo consequat. Enim ad minim veniam, quis nostrud exercitation ullamco modo consequat.
<div class="o-cropped">
  <table class="c-table">
    <caption class="c-table__caption">Table caption</caption>
    <thead class="c-table__head">
      <tr class="c-table__row">
        <th scope="col">Heading cell</th>
        <th scope="col">Heading cell</th>
        <th scope="col">Headingcellwithverylongname</th>
        <th scope="col">Heading cell</th>
        <th scope="col">Heading cell</th>
      </tr>
    </thead>
    <tbody class="c-table__body">
      <tr class="c-table__row">
        <td>Ut enim ad minim veniam, quis ex ea commodo consequat.</td>
        <td>Loremipsumdolorsitamet, consectetur adipisicing ut labore et dolore magna aliqua.</td>
        <td>Ut enim ad minim veniam, quis nostrud ea commodo consequat.</td>
        <td>Loremipsumdolorsitamet, consectetur or incididunt ut labore et dolore magna aliqua.</td>
        <td>Ut enim ad minim veniam, quis nostrud ea commodo consequat.</td>
      </tr>
      <tr class="c-table__row">
        <td>Loremipsumdolorsitametconsectetur adipisicing elit, e et dolore magna aliqua.</td>
        <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco modo consequat.</td>
        <td>Ad minim veniam, quis nostrud exercitation commodo consequat.</td>
        <td>Ut enim ad minim veniam, quis quip ex ea commodo consequat.</td>
        <td>Enim ad minim veniam, quis nostrud exercitation ullamco modo consequat.</td>
      </tr>
    </tbody>
  </table>
</div>

Grid

Based on Reflex v1.5.

A grid wrapper gets the class o-gridand its children get o-grid__colfor each column, with different widths – 1 to 12 – available for small (sm), medium (md) and large (lg) sreen widths, just like Bootstrap.

Modifier class o-grid--bleedon the wrapper element resets all column paddings, used e.g. on form layouts. Individual, column bleed can also be achieved using o-grid__col--bleed.

Many more modifiers are available, see either here in the CSS source code or over at the Reflex Documentation.

Kapten Röd: Hundralappen!

Köp 25 - 28 maj, Braskereidfoss
Table caption
Heading cell Heading cell
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Did you know?

You can put almost everything in a grid!

Från Sotar-Blixt
<div class="o-grid">
  <div class="o-grid__col-12 o-grid__col-sm-6 o-grid__col-md-4">
    <div class="c-card">
      <a href="#info" class="c-card__body">
        <div class="c-card__image">
          <img class="c-avatar lazyload" alt="" data-src="temp/thumb1.jpg" />
        </div>
        <h2 class="c-card__title">Kapten Röd: Hundralappen!</h2>
      </a>
      <div class="c-card__foot">
        <a href="#buy" class="c-button c-button--primary c-button--small c-button--round">Köp</a>
        <span class="c-card__label">25 - 28 maj, Braskereidfoss</span>
      </div>
    </div>
  </div>
  <div class="o-grid__col-12 o-grid__col-sm-6 o-grid__col-md-4">
    <table>
      <caption>Table caption</caption>
      <thead>
        <tr>
          <th scope="col">Heading cell</th>
          <th scope="col">Heading cell</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Lorem ipsum dolor sit amet.</td>
          <td>Lorem ipsum dolor sit amet.</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="o-grid__col-12 o-grid__col-sm-6 o-grid__col-md-4 o-grid--align-self-stretch">
    <div class="c-box">
      <h2 class="c-box__title">Did you know?</h2>
      <blockquote class="c-box__body">
        <p>You can put almost everything in a grid!</p>
      </blockquote>
      <code class="c-box__foot">Från Sotar-Blixt</code>
    </div>
  </div>
</div>

Components

Components are implementation-specific bits of UI. They are quite safe to modify. Anything with a leading c-is a specific thing. A Component is data-agnostic and is named according to what it looks like, not to what kind of data it carries.

Article

.c-article- wrapper around a headline and ingress on e.g. event pages. Use modifier .c-article--centerto center text.

Kapten Röd turné: Hundralappen!

Kapten Röd presenterar stolt sin nya sommarturné - HUNDRALAPPEN! HUNDRALAPPEN är en rikstäckande turné i samarbete med Programbolaget och precis som namnet antyder så kommer alla biljetter kosta endast 100kr!

<article class="c-article c-article--center">
  <h1 class="c-article__title">Kapten Röd turné: Hundralappen!</h1>
  <div class="c-article__meta">
    <p>7 - 13 juni 2017 Start 18:00</p>
    <p>
      <a href="#">Trädgårdsföreningen</a>
      <a href="#">Göteborg</a>
    </p>
    <a href="#buy" class="c-button c-button--primary">Köp biljett</a>
  </div>
  <div class="c-article__body">
    <p>Kapten Röd presenterar stolt sin nya sommarturné - HUNDRALAPPEN! HUNDRALAPPEN är en rikstäckande turné i samarbete med
      Programbolaget och precis som namnet antyder så kommer alla biljetter kosta endast 100kr!</p>
  </div>
</article>

Autocomplete

.c-autocomplete- initiates autocomplete-search on the first input element on the page with this class.

A URL to the JSON search result object can be set via the HTML attribute data-url.

Other settings are possible to override using ab instance specific object when calling the function, which must be done manually. E.g: $('.c-autocomplete').makeAutocomplete({ minChar: 3 });

This component requires the file components.autocomplete.jsplus the vendor file jquery.autocomplete.js.

<form action="#">
  <div class="c-form-control">
    <label for="autocomplete-field" class="c-label">Search</label>
    <input type="search" name="q" id="autocomplete-field" class="c-autocomplete" data-url="temp/search-results.json" />
  </div>
</form>

<!-- Markup of the suggestion results:
<div class="autocomplete-suggestions">
  <div class="autocomplete-group"><strong>Group</strong></div>
  <div class="autocomplete-suggestion autocomplete-selected"><b>Selected item</b><span>Venue</span><span>YYYY-MM-DD</span></div>
  <div class="autocomplete-suggestion"><b>Item 2</b><span>Venue</span><span>YYYY-MM-DD</span></div>
  <div class="autocomplete-suggestion"><b>Item 3</b><span>Venue</span><span>YYYY-MM-DD</span></div>
</div> -->

Avatar

.c-avatar- creates a circular, cropped image use in e.g. Tiles and Cards.

Use empty alt-text ( alt="") if the image is not considered content or if a descriptive alt-text would duplicate information already present in e.g. a heading nearby.

<img class="c-avatar lazyload" alt="" data-src="temp/thumb1.jpg" />

Box

.c-box- used for messages, form explanations and similar.

For more nuances, feel free to use .c-box--positiveand .c-box--negative.

A smaller variant ( .c-box--small) can be used when space is limited.

Lorem ipsum dolor sit amet.

Positive message
Small positive message
Info message
Small info message
Warning message
Small warning message
Error message
Small error message
<div class="c-box">
  <div class="c-box__body">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>
<div class="c-box c-box--positive">
  Positive message
</div>
<div class="c-box c-box--positive c-box--small">
  Small positive message
</div>
<div class="c-box c-box--info">
  Info message
</div>
<div class="c-box c-box--info c-box--small">
  Small info message
</div>
<div class="c-box c-box--warning">
  Warning message
</div>
<div class="c-box c-box--warning c-box--small">
  Small warning message
</div>
<div class="c-box c-box--negative">
  Error message
</div>
<div class="c-box c-box--negative c-box--small">
  Small error message
</div>

.c-breadcrumb- used for showing a “breadcrumb trail“ of the page hierarchy.

The current/selected page is a link in this below example, but can also be just a span (they will look the same).

<ol class="c-breadcrumb">
  <li class="c-breadcrumb__item" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="account.html" class="c-breadcrumb__link" itemprop="url">
      <span itemprop="title">Mitt konto</span>
    </a>
  </li>
  <li class="c-breadcrumb__item" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="account_privacy.html" class="c-breadcrumb__link" itemprop="url">
      <span itemprop="title">Utskick och personuppgiftshantering</span>
    </a>
  </li>
</ol>

Button

.c-buttoncan be used on all buttons. To highlight a primary button, use .c-button--primary. Similarly, add e.g. --small, --round, --large, --ghost, --has-icon(plus a SVG element) for other variations.

Large buttons do not line break its text, all others do.

For grouping buttons visually, see Tabs.

Cancel Large button Large add button Icon button Ghost icon button Small icon button Small ghost icon button
<button class="c-button">Normal</button>
<input class="c-button c-button--primary" type="submit" value="Save" />
<a href="#button" class="c-button c-button--secondary">Cancel</a>
<button class="c-button c-button--positive">Add</button>
<button class="c-button c-button--negative">Remove</button>
<button class="c-button c-button--small">Small button</button>
<button class="c-button c-button--round">Round button</button>
<a href="#add" class="c-button c-button--large">Large button</a>
<a href="#add" class="c-button c-button--large c-button--positive">Large add button</a>
<button class="c-button c-button--disabled" disabled>Disabled button</button>
<button class="c-button c-button--ghost">Ghost button</button>
<button class="c-button c-button--primary c-button--spinner">
  <span>Spinner button (not loading)</span>
  <div class="c-spinner">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</button>
<button class="c-button c-button--primary c-button--spinner is-loading">
  <span>Spinner button (is loading)</span>
  <div class="c-spinner">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</button>
<button class="c-button c-button--secondary c-button--small c-button--spinner">
  <span>Spinner button, small (not loading)</span>
  <div class="c-spinner c-spinner--small">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</button>
<button class="c-button c-button--secondary c-button--small c-button--spinner is-loading">
  <span>Spinner button, small, (is loading)</span>
  <div class="c-spinner c-spinner--small">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</button>
<a href="#cat-1" class="c-button c-button--has-icon">
  <svg>
    <use xlink:href="ui-framework/symbol/svg/sprite.symbol.svg#sun"></use>
  </svg>Icon button</a>
<a href="#cat-2" class="c-button c-button--ghost c-button--has-icon">
  <svg>
    <use xlink:href="ui-framework/symbol/svg/sprite.symbol.svg#sun"></use>
  </svg>Ghost icon button</a>
<a href="#cat-3" class="c-button c-button--small c-button--has-icon">
  <svg>
    <use xlink:href="ui-framework/symbol/svg/sprite.symbol.svg#melon"></use>
  </svg>Small icon button</a>
<a href="#cat-4" class="c-button c-button--small c-button--ghost c-button--has-icon">
  <svg>
    <use xlink:href="ui-framework/symbol/svg/sprite.symbol.svg#melon"></use>
  </svg>Small ghost icon button</a>

Card

.c-card- information container with e.g. an event. Should preferably contain some kind of action button.

.c-card--cover- Card variant with a full width image covering the card body.

Avatar images can be "lazyloaded" using data-srcinstead of srctogether with the additional class lazyload.

Tiles can be nested within a Card (see second example).

Kapten Röd turné: Hundralappen!

Köp 25 - 28 maj, Braskereidfoss

Menyval 1

Menyval 2

Menyval 3

Lorem ipsum dolor sit amet

Guldkort

Guldkortet är det mest exklusiva säsongskortet. Du väljer helt fritt på vilken plats på läktaren i Löfbergs Arena du vill sitta på under grundserien.

Vuxen

2 400 kr

Ungdom

1 200 kr

Alla priser är inklusive moms (du kan välja att betala som företag i kassan).

<div class="o-grid o-grid--align-start">
  <div class="o-grid__col-12 o-grid__col-sm-4">
    <div class="c-card">
      <a href="#info" class="c-card__body">
        <div class="c-card__image">
          <img class="c-avatar lazyload" alt="" data-src="temp/thumb2.jpg" />
        </div>
        <h2 class="c-card__title">Kapten Röd turné: Hundralappen!</h2>
      </a>
      <div class="c-card__foot">
        <a href="#buy" class="c-button c-button--primary c-button--small c-button--round">Köp</a>
        <span class="c-card__label">25 - 28 maj, Braskereidfoss</span>
      </div>
    </div>
  </div>
  <div class="o-grid__col-12 o-grid__col-sm-4">
    <div class="c-card c-card--cover">
      <div class="c-card__image c-card__image--cover">
        <img class="lazyload" alt="" data-src="http://lorempixel.com/360/160/food" />
      </div>
      <div class="c-card__body">
        <h2 class="c-card__title">Menyval 1</h2>
        <div class="c-plus-minus c-form-control" data-plus-minus>
          <label for="id331" class="u-hidden--visually">Enter amount</label>
          <button class="c-button c-button--negative c-button--disabled" disabled title="Decrease by 1">-</button>
          <input class="c-plus-minus__amount" id="id331" type="number" min="0" max="10" value="0" />
          <button class="c-button c-button--positive" title="Increase by 1">+</button>
        </div>
      </div>
    </div>
  </div>
  <div class="o-grid__col-12 o-grid__col-sm-4">
    <div class="c-card c-card--cover">
      <div class="c-card__image c-card__image--cover">
        <img class="lazyload" alt="" data-src="http://lorempixel.com/360/160/food" />
      </div>
      <div class="c-card__body">
        <h2 class="c-card__title">Menyval 2</h2>
      </div>
      <div class="c-card__foot c-card__foot--center">
        <div class="c-plus-minus c-form-control" data-plus-minus>
          <label for="id331" class="u-hidden--visually">Enter amount</label>
          <button class="c-button c-button--negative c-button--disabled" disabled title="Decrease by 1">-</button>
          <input class="c-plus-minus__amount" id="id331" type="number" min="0" max="10" value="0" />
          <button class="c-button c-button--positive" title="Increase by 1">+</button>
        </div>
      </div>
    </div>
  </div>
  <div class="o-grid__col-12 o-grid__col-sm-4">
    <div class="c-card c-card--cover">
      <div class="c-card__image">
        <img class="lazyload" alt="" data-src="http://lorempixel.com/360/160/food" />
      </div>
      <div class="c-card__body">
        <h2 class="c-card__title">Menyval 3</h2>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
  </div>
  <div class="o-grid__col-auto">
    <div class="c-card">
      <div class="c-card__body">
        <div class="c-card__image">
          <img class="c-avatar lazyload" alt="" data-src="temp/thumb2.jpg" />
        </div>
        <h2 class="c-card__title">Guldkort</h2>
        <p>Guldkortet är det mest exklusiva säsongskortet. Du väljer helt fritt på vilken plats på läktaren i Löfbergs Arena
          du vill sitta på under grundserien.</p>
        <div class="c-tile">
          <div class="c-tile__head">
            <h3 class="c-tile__title">Vuxen</h3>
          </div>
          <div class="c-tile__body">
            <span class="c-tile__label">2 400 kr</span>
          </div>
        </div>
        <div class="c-tile">
          <div class="c-tile__head">
            <h3 class="c-tile__title">Ungdom</h3>
          </div>
          <div class="c-tile__body">
            <span class="c-tile__label">1 200 kr</span>
          </div>
        </div>
      </div>
      <div class="c-card__foot">
        <div class="o-grid o-grid--bleed o-grid--align-center">
          <div class="o-grid__col-auto">
            <p>Alla priser är inklusive moms (du kan välja att betala som företag i kassan).</p>
          </div>
          <div class="o-grid__col-4 o-grid__col-xs-2 o-grid--align-end">
            <a href="#buy" class="c-button c-button--primary">Välj</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Fieldset

.c-fieldsetis used to style fieldset elements (and its legend child element)

Legend
<form action="#">
  <fieldset class="c-fieldset">
    <legend>Legend</legend>
    <div class="c-form-control">
      <input id="id58" type="checkbox" />
      <label for="id58" class="c-label">Checkbox</label>
    </div>
  </fieldset>
</form>

Form control

.c-form-controlis used around a label and its input to create a coherently styled input field across browsers.

For horizontal placement, use .c-form-control--inline. To layout form fields more freely, use the generic grid object.

For validation errors, use .has-erroras extra class value on .c-form-controlwrappers. If that's not possible, a .input-validation-erroron the faulty input will also work. Also, please try to use the native requiredattribute on required fields, instead of relying on JavaScript validation.

All selectelements within this component that also has more than 31 options will ge a search field (using the vendor script Chosen.js). To disable this search, use data-disable-searchon the select element.

Form error message
Form error message
Form error message
Form error message
<form action="#">
  <div class="c-form-control">
    <label for="id5" class="c-label">Normal label</label>
    <input id="id5" type="text" />
  </div>
  <div class="c-form-control c-form-control--compact">
    <label for="id6" class="c-label">Compact label</label>
    <input id="id6" type="text" />
  </div>
  <div class="c-form-control has-error">
    <label for="id7" class="c-label">Normal label, error</label>
    <input id="id7" type="text" />
    <span class="c-box c-box--small c-box--negative">Form error message</span>
  </div>

  <div class="o-grid">
    <div class="o-grid__col-sm-6 o-grid__col--bleed-left">
      <div class="c-form-control">
        <label for="id1" class="c-label">Name</label>
        <input id="id1" type="text" value="Anton Andreasson" />
      </div>
    </div>
    <div class="o-grid__col-sm-6 o-grid__col--bleed-right">
      <div class="c-form-control c-form-control c-form-control--large">
        <label for="id2" class="c-label">E-mail, larger</label>
        <input id="id2" type="email" value="anton.andreasson@tickster.com" />
      </div>
    </div>
    <div class="o-grid__col-4 o-grid__col-xs-2 o-grid__col--bleed-left">
      <div class="c-form-control">
        <label for="id3" class="c-label">Zip code</label>
        <input id="id3" type="number" min="0" required />
      </div>
    </div>
    <div class="o-grid__col-auto o-grid__col--bleed-right">
      <div class="c-form-control">
        <label for="id4" class="c-label">Postal address, disabled</label>
        <input id="id4" type="text" disabled="disabled" />
      </div>
    </div>
    <div class="o-grid__col-12 o-grid__col--bleed-x">
      <div class="c-form-control">
        <label for="id40" class="c-label">Comment</label>
        <textarea id="id40" cols="60" rows="3"></textarea>
      </div>
    </div>
  </div>

  <div class="c-form-control">
    <label class="c-label" for="allornothing">Select menu</label>
    <select name="select" id="allornothing">
      <option value="">Nothing</option>
      <option value="all">All</option>
    </select>
  </div>
  <div class="c-form-control has-error">
    <label class="c-label" for="allornothing">Select menu, error</label>
    <select name="select" id="allornothing">
      <option value="">Nothing</option>
      <option value="all">All</option>
    </select>
    <span class="c-box c-box--small c-box--negative">Form error message</span>
  </div>
  <div class="c-form-control">
    <label class="c-label" for="megamenu">Select menu, searchable</label>
    <select name="select" id="megamenu">
      <option value="5918">123, Aula Nordica</option>
      <option value="2139">Arenans postort, Are. kort. namn</option>
      <option value="2001">Arenans postort, Arenans namn 1</option>
      <option value="1589">Arjeplog, Medan</option>
      <option value="1989">Arvika, AE Arena</option>
      <option value="4467">Arvika, Auto-test</option>
      <option value="3918">Arvika, Berwaldtest</option>
      <option value="1173">Arvika, DEMO FärsFrosta</option>
      <option value="3094">Arvika, Galaxen Arvika</option>
      <option value="366">Arvika, Mackpalace</option>
      <option value="15">Arvika, Muskifestivalen</option>
      <option value="1333">Arvika, Olssons Brygga</option>
    </select>
  </div>

  <div class="c-form-control">
    <input id="id8" type="checkbox" />
    <label for="id8" class="c-label">Checkbox</label>
  </div>
  <div class="c-form-control">
    <input id="id9" type="checkbox" checked="checked" />
    <label for="id9" class="c-label">Checkbox, checked</label>
  </div>
  <div class="c-form-control has-error">
    <input id="id59" type="checkbox" />
    <label for="id59" class="c-label">Checkbox, error</label>
    <span class="c-box c-box--small c-box--negative">Form error message</span>
  </div>
  <div class="c-form-control">
    <input id="id12" type="checkbox" disabled="disabled" />
    <label for="id12" class="c-label">Checkbox, disabled</label>
  </div>
  <div class="c-form-control">
    <input id="id18" type="checkbox" checked="checked" disabled="disabled" />
    <label for="id18" class="c-label">Checkbox, checked, disabled</label>
  </div>

  <div class="c-form-control">
    <input id="id10" type="radio" name="radio1" />
    <label for="id10" class="c-label">Radio</label>
  </div>
  <div class="c-form-control">
    <input id="id11" type="radio" name="radio1" checked="checked" />
    <label for="id11" class="c-label">Radio, checked</label>
  </div>
  <div class="c-form-control has-error">
    <input id="id61" type="radio" name="radio1" />
    <label for="id61" class="c-label">Radio, error</label>
    <span class="c-box c-box--small c-box--negative">Form error message</span>
  </div>
  <div class="c-form-control">
    <input id="id13" type="radio" name="radio2" disabled="disabled" />
    <label for="id13" class="c-label">Radio, disabled</label>
  </div>
  <div class="c-form-control">
    <input id="id19" type="radio" name="radio2" checked="checked" disabled="disabled" />
    <label for="id19" class="c-label">Radio, checked, disabled</label>
  </div>

  <div class="c-form-control c-form-control--inline">
    <input id="id14" type="checkbox" />
    <label for="id14" class="c-label">Checkbox, inline</label>
  </div>
  <div class="c-form-control c-form-control--inline">
    <input id="id15" type="radio" name="radio1" />
    <label for="id15" class="c-label">Radio, inline</label>
  </div>

  <div class="c-form-control">
    <input class="c-button c-button--primary" type="submit" value="Submit" />
    <a href="#" class="c-button c-button--secondary">Cancel</a>
  </div>
</form>

<form>
  <div class="c-form-control c-form-control--compact c-form-control--group">
    <label for="id94a" class="c-label">E-mail</label>
    <input id="id94a" type="email" />
    <input class="c-button c-button--primary" type="submit" value="Submit" />
  </div>
  <div class="c-form-control c-form-control--compact c-form-control--group has-content">
    <label for="id94b" class="c-label">E-mail (with value)</label>
    <input id="id94b" type="email" value="test@example.com" />
    <input class="c-button c-button--primary" type="submit" value="Submit" />
  </div>
  <div class="c-form-control c-form-control--compact c-form-control--group c-form-control--large">
    <label for="id94c" class="c-label">E-mail (larger)</label>
    <input id="id94c" type="email" />
    <input class="c-button c-button--primary" type="submit" value="Submit" />
  </div>
</form>

List

.c-listhandles link list, with or without a leading header.

Add .c-list--altto get an alternate list with a monospaced font and non-underlined links.

For “bullets”, add .c-list--dots.

To have a more non-dense list, add .c-list--sparse.

For inline lists, add .c-list--inline.

Några av våra produkter

  • Tickster Manager
  • Tickster BoxPoint
  • Tickster Blink
<div class="c-list">
  <h2 class="c-list__title">Evenemang</h2>
  <ul>
    <li>
      <a href="#">Lista och skapa</a>
    </li>
    <li>
      <a href="#">Kopiera</a>
    </li>
    <li>
      <a href="#">Verifiera</a>
    </li>
  </ul>
</div>
<div class="c-list c-list--alt">
  <h2 class="c-list__title">Om oss</h2>
  <ul>
    <li>
      <a href="#">Jobba på Tickster</a>
    </li>
    <li>
      <a href="#">Säg hej</a>
    </li>
    <li>
      <a href="#">Tickster på Facebook</a>
    </li>
  </ul>
</div>
<div class="c-list c-list--dots">
  <h2 class="c-list__title">Några av våra produkter</h2>
  <ul>
    <li>Tickster Manager</li>
    <li>Tickster BoxPoint</li>
    <li>Tickster Blink</li>
  </ul>
</div>
<div class="c-list c-list--dots c-list--sparse">
  <h2 class="c-list__title">Några av våra produkter</h2>
  <ul>
    <li>
      <a href="#">Tickster Manager</a>
    </li>
    <li>
      <a href="#">Tickster BoxPoint</a>
    </li>
    <li>
      <a href="#">Tickster Blink</a>
    </li>
  </ul>
</div>
<div class="c-list c-list--dots c-list--inline">
  <h2 class="c-list__title">Några av våra produkter</h2>
  <ul>
    <li>
      <a href="#">Tickster Manager</a>
    </li>
    <li>
      <a href="#">Tickster BoxPoint</a>
    </li>
    <li>
      <a href="#">Tickster Blink</a>
    </li>
  </ul>
</div>

Map

.c-mapon an element with a data-latlngvalue creates an interactive (Google) map with a simple marker. Requires components.maps.js.

.c-map--staticcreates an static map with a simple marker.

<div class="c-map" data-latlng="59.3678,11.262" data-zoom="13"></div>
<img class="c-map c-map--static lazyload" data-expand="200" data-src="https://cdn.maps.tickster.com/maps/api/staticmap?key=AIzaSyAOhxnm-3MHsQRm2hDEb83I0xPtNRsou5w&center=59.3183,18.0743&zoom=13&format=png&maptype=roadmap&markers=color:green%7C59.3183,18.0743&style=feature:landscape.man_made%7Ccolor:0xfaf5ed%7Clightness:0%7Cgamma:1&style=feature:poi.park%7Celement:geometry.fill%7Ccolor:0xbae5a6&style=feature:road%7Csaturation:0%7Cgamma:1.8%7Cweight:1.00&style=feature:road%7Celement:geometry.fill%7Chue:0xffb200&style=feature:road.arterial%7Celement:geometry.fill%7Clightness:0%7Cgamma:1&style=feature:transit.station.airport%7Chue:0xb000ff%7Csaturation:23%7Clightness:-4%7Cgamma:0.80&style=feature:water%7Ccolor:0xa0daf2&size=640x300&scale=2"
/>

The class names of this component are primarily added to other components via the vendor JavaScript Lity. To trigger a modal dialog, use the attribute data-modal(seen e.g. on Card buttons).

For extra close buttons within the modal window, use attribute data-lity-close(see on-page content example).

Tickster.com (opens in a modal box). Show on-page content

Hidden content 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 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.

<a data-modal href="//tickster.com/">Tickster.com</a>
(opens in a modal box).
<a data-modal href="#inline-modal-example">Show on-page content</a>
<div class="u-hidden" id="inline-modal-example">
  <div class="c-card">
    <div class="c-card__body">
      <p>Hidden content 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 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.</p>
    </div>
    <div class="c-card__foot">
      <button class="c-button" data-lity-close>Close</button>
    </div>
  </div>
</div>

Pill

.c-pillis used as "tags" and "flags" that often are clickable. Default color is blue-darkerbut any other valid color can be used using utility classes.

Tagname New Updated # Poppis . Tickster Tagname Remove Tagname Another, reeeeally reeeaaally long tag
<a href="#" class="c-pill">
  <span>Tagname</span>
</a>
<span class="c-pill u-color-yellow-base">
  <span>New</span>
</span>
<span class="c-pill u-color-blue-lighter">
  <span>Updated</span>
</span>
<span class="c-pill u-color-purple">
  <span class="c-pill__prefix">#</span>
  <span>Poppis</span>
</span>
<span class="c-pill u-color-turquoise-base">
  <span class="c-pill__prefix">.</span>
  <span>Tickster</span>
</span>
<span class="c-pill c-pill--removable">
  <span>Tagname</span>
  <a href="#" class="c-pill__button">Remove Tagname</a>
</span>
<span class="c-pill c-pill--removable u-color-grey-lighter">
  <span>Another, reeeeally reeeaaally long tag</span>
  <button class="c-pill__button">Remove Another, reeeeally reeeaaally long tag</button>
</span>

Plus-minus

.c-plus-minusis a component that extends and depends upon Button, Form control and the utility class Hide content. It does little more than just align the buttons a bit and removes some box-shadow and border radii.

For instant increase/decrease functionality, the file components.plus-minus.jsis needed (which in turn needs the added c-button--negativeand c-button--positiveclasses).

1
1
<div class="c-plus-minus c-form-control" data-plus-minus>
  <label for="id33" class="u-hidden--visually">Enter amount</label>
  <button class="c-button c-button--negative" title="Decrease by 1">-</button>
  <input class="c-plus-minus__amount" id="id33" type="number" min="0" max="10" value="0" />
  <button class="c-button c-button--positive" title="Increase by 1">+</button>
</div>
<div class="c-plus-minus c-form-control" data-plus-minus>
  <label for="id35" class="u-hidden--visually">Enter amount</label>
  <button class="c-button c-button--secondary" title="Decrease by 1">-</button>
  <input class="c-plus-minus__amount" id="id35" type="number" min="0" max="5" value="5" />
  <button class="c-button c-button--primary" title="Increase by 1">+</button>
</div>
<div class="c-plus-minus c-form-control" data-plus-minus>
  <label for="id35b" class="u-hidden--visually">Enter amount</label>
  <button class="c-button c-button--secondary" title="Decrease by 2">-</button>
  <input class="c-plus-minus__amount" id="id35b" type="number" min="2" step="2" max="10" value="2" />
  <button class="c-button c-button--primary" title="Increase by 2">+</button>
</div>
<div class="c-plus-minus c-form-control">
  <a href="#" class="c-button c-button--negative" title="Decrease by 1"></a>
  <span class="c-plus-minus__amount">1</span>
  <a href="#" class="c-button c-button--positive" title="Increase by 1"></a>
  <a href="#" class="c-button c-button--ghost" title="Remove"></a>
</div>
<div class="c-plus-minus c-form-control">
  <span class="c-plus-minus__amount">1</span>
  <a href="#" class="c-button c-button--ghost" title="Remove"></a>
</div>

Progress

.c-progress– creates a progress bar with indication of its value.

<progress class="c-progress" value="80" min="0" max="100"></progress>

Section

.c-section- used to make large "billboards". Contains one or more .c-section__bodyelements that, too, can be colored (see below).

Adding .c-section--(full|twothirds|half|onethird)makes the section 100%, 2/3, 50%, 1/3 or auto (no modifier) height.

Adding c-section__body--horizontalenables multiple section bodies side by side and c-section__body--fullmakes it stretch to the full section width and height.

Adding c-section__body--toptop-aligns the section body.

Use color utility classes to control colors.

Default (transparent)

Section title

Half height, with section title
color-yellow-base, half, narrow body
horizontal, full, color-blue-darker
horizontal, top, color-white
color-turquoise-base, 1/3
color-grey-darkest, 2/3, full body
<section class="c-section">
  <div class="c-section__body">
    Default (transparent)
  </div>
</section>

<section class="c-section c-section--half">
  <div class="c-section__body">
    <h2 class="c-section__title">Section title</h2>
    Half height, with section title
  </div>
</section>

<section class="c-section c-section--half u-color-yellow-base">
  <div class="c-section__body c-section__body--narrow">
    color-yellow-base, half, narrow body
  </div>
</section>

<section class="c-section c-section--half u-color-blue-base">
  <div class="c-section__body c-section__body--full c-section__body--horizontal u-color-blue-darker">
    horizontal, full, color-blue-darker
  </div>
  <div class="c-section__body c-section__body--top c-section__body--horizontal u-color-white">
    horizontal, top, color-white
  </div>
</section>

<section class="c-section c-section--onethird u-color-turquoise-base">
  <div class="c-section__body">
    color-turquoise-base, 1/3
  </div>
</section>

<section class="c-section c-section--twothirds u-color-grey-darkest">
  <div class="c-section__body c-section__body--full">
    color-grey-darkest, 2/3, full body
  </div>
</section>

Slider

.c-slider- styles and transforms a grid of (e.g.) cards into a slideable carousel. The data-attribute data-slickmust exist and can contain a JSON object (as a string) to extend or replace the default settings. (Note that the quotation marks must be right as the string gets parsed as a JSON object.)

The component requires the file components.slider.jsplus the vendor file slick.js.

First card

Köp 28 apr, Venue, City

Second card

Köp 28 apr, Venue, City

Fourth card

Köp 28 apr, Venue, City

Single card in slider

Köp 28 apr, Venue, City
<div class="o-grid c-slider" data-slick='{"slidesToShow": 3, "slidesToScroll": 3}'>
  <div class="o-grid__col-3">
    <div class="c-card">
      <a href="#info" class="c-card__body">
        <div class="c-card__image">
          <img class="c-avatar lazyload" alt="" data-src="temp/thumb2.jpg" />
        </div>
        <h2 class="c-card__title">First card</h2>
      </a>
      <div class="c-card__foot">
        <a href="#buy" class="c-button c-button--primary c-button--small c-button--round">Köp</a>
        <span class="c-card__label">28 apr, Venue, City</span>
      </div>
    </div>
  </div>
  <div class="o-grid__col-3">
    <div class="c-card">
      <a href="#info" class="c-card__body">
        <div class="c-card__image">
          <img class="c-avatar lazyload" alt="" data-src="temp/thumb1.jpg" />
        </div>
        <h2 class="c-card__title">Second card</h2>
      </a>
      <div class="c-card__foot">
        <a href="#buy" class="c-button c-button--primary c-button--small c-button--round">Köp</a>
        <span class="c-card__label">28 apr, Venue, City</span>
      </div>
    </div>
  </div>
  <div class="o-grid__col-3">
    <div class="c-card">
      <a href="#info" class="c-card__body">
        <div class="c-card__image">
          <img class="c-avatar lazyload" data-src="temp/thumb1.jpg" alt="" />
        </div>
        <h2 class="c-card__title">Third card, with a very much longer title, just to see it fits</h2>
      </a>
      <div class="c-card__foot">
        <a href="#buy" class="c-button c-button--primary c-button--small c-button--round">Köp</a>
        <span class="c-card__label">28 apr, Very long Venue name too, City</span>
      </div>
    </div>
  </div>
  <div class="o-grid__col-3">
    <div class="c-card">
      <a href="#info" class="c-card__body">
        <div class="c-card__image">
          <img class="c-avatar lazyload" alt="" data-src="temp/thumb2.jpg" />
        </div>
        <h2 class="c-card__title">Fourth card</h2>
      </a>
      <div class="c-card__foot">
        <a href="#buy" class="c-button c-button--primary c-button--small c-button--round">Köp</a>
        <span class="c-card__label">28 apr, Venue, City</span>
      </div>
    </div>
  </div>
</div>

<div class="o-grid c-slider" data-slick>
  <div class="o-grid__col-auto">
    <div class="c-card">
      <a href="#info" class="c-card__body">
        <div class="c-card__image">
          <img class="c-avatar lazyload" alt="" data-src="temp/thumb2.jpg" />
        </div>
        <h2 class="c-card__title">Single card in slider</h2>
      </a>
      <div class="c-card__foot">
        <a href="#buy" class="c-button c-button--primary c-button--small c-button--round">Köp</a>
        <span class="c-card__label">28 apr, Venue, City</span>
      </div>
    </div>
  </div>
</div>

Spinner

.c-spinnerdisplays a spinner. Often used within a Button to indicate loading of some kind.

<div class="c-spinner">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Switch

.c-switch- used for "switches", preferably where settings can be auto-saved.

Works with both buttons, links and checkboxes (if the inputis nested within a span). Add data-switchattribute for interactivity.

Aktiverad Inaktiverad Inaktiverad Aktivera
<span class="c-switch">
  <span class="c-switch__state c-switch__state--active">Aktiverad</span>
  <button type="button" class="c-switch__button c-switch__button--active">Inaktivera</button>
</span>
<span class="c-switch">
  <span class="c-switch__state c-switch__state--inactive">Inaktiverad</span>
  <button type="button" class="c-switch__button c-switch__button--inactive">Aktivera</button>
</span>
<span class="c-switch">
  <span class="c-switch__state c-switch__state--inactive">Inaktiverad</span>
  <a href="#" class="c-switch__button c-switch__button--inactive">Aktivera</a>
</span>
<div class="c-form-control">
  <span class="c-switch" data-switch>
    <label for="switch1" class="c-switch__state c-switch__state--inactive">Inaktiverad</label>
    <span class="c-switch__button c-switch__button--inactive">
      <input type="checkbox" id="switch1" value="0" />
    </span>
  </span>
  <label for="switch1" class="c-label">Kom ihåg mig?</label>
</div>
<div class="c-form-control">
  <span class="c-switch" data-switch>
    <label for="switch2" class="c-switch__state c-switch__state--active">Aktiverad</label>
    <span class="c-switch__button c-switch__button--active">
      <input type="checkbox" id="switch2" value="0" checked />
    </span>
  </span>
  <label for="switch2" class="c-label">Kom ihåg mig?</label>
</div>

Table

The tables component ( .c-table) adds more styleing to tables. The flag .c-table--stripedcreates "zebra" rows.

To enable "cropped" table (e.g. very wide tables), wrap the component in a Cropped object.

Table caption
Heading cell Heading cell Heading cell
Ut enim ad minim veniam, quis ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud ea commodo consequat. Loremipsumdolorsitamet, consectetur or incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco do consequat. Loremipsumdolorsitametconsectetur adipisicing elit, abore et dolore magna aliqua. Ad minim veniam, quis nostrud exercitation ullamco laboris equat.
Loremipsumdolorsitametconsectetur adipisicing elit, e et dolore magna aliqua. Ad minim veniam, quis nostrud exercitation commodo consequat. Ut enim ad minim veniam, quis quip ex ea commodo consequat.
Startar fredagen den 20 januari 19:00
Slutar lördagen den 18 november 22:00
Skapat onsdagen den 18 januari 14:53 av Kalle Kula
[SOW] EventID 63456
Numrerat Nej
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5
orsitamet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut abore et dolore magna aliqua sum intate et dolore magna aliqua
minim venia qui nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo onsequat in sum intate in
enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex a commodo consequat sum intate commodo consequat
quis nostrud exercitation ullamco laboris nisi ut aliquip ex enim ad minim veniam commodo consequat sum intate commodo consequat
<table class="c-table">
  <caption class="c-table__caption">Table caption</caption>
  <thead class="c-table__head">
    <tr class="c-table__row">
      <th scope="col">Heading cell</th>
      <th scope="col">Heading cell</th>
      <th scope="col">Heading cell</th>
    </tr>
  </thead>
  <tbody class="c-table__body">
    <tr class="c-table__row">
      <td>Ut enim ad minim veniam, quis ex ea commodo consequat.</td>
      <td>Ut enim ad minim veniam, quis nostrud ea commodo consequat.</td>
      <td>Loremipsumdolorsitamet, consectetur or incididunt ut labore et dolore magna aliqua.</td>
    </tr>
    <tr class="c-table__row">
      <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco do consequat.</td>
      <td>Loremipsumdolorsitametconsectetur adipisicing elit, abore et dolore magna aliqua.</td>
      <td>Ad minim veniam, quis nostrud exercitation ullamco laboris equat.</td>
    </tr>
    <tr class="c-table__row">
      <td>Loremipsumdolorsitametconsectetur adipisicing elit, e et dolore magna aliqua.</td>
      <td>Ad minim veniam, quis nostrud exercitation commodo consequat.</td>
      <td>Ut enim ad minim veniam, quis quip ex ea commodo consequat.</td>
    </tr>
  </tbody>
</table>

<table class="c-table">
  <tbody class="c-table__body">
    <tr class="c-table__row">
      <th scope="row">Startar</th>
      <td>fredagen den 20 januari 19:00</td>
    </tr>
    <tr class="c-table__row">
      <th scope="row">Slutar</th>
      <td>lördagen den 18 november 22:00</td>
    </tr>
    <tr class="c-table__row">
      <th scope="row">Skapat</th>
      <td>onsdagen den 18 januari 14:53 av Kalle Kula</td>
    </tr>
    <tr class="c-table__row">
      <th scope="row">[SOW] EventID</th>
      <td>63456</td>
    </tr>
    <tr class="c-table__row">
      <th scope="row">Numrerat</th>
      <td>Nej</td>
    </tr>
  </tbody>
</table>

<table class="c-table c-table--striped">
  <thead class="c-table__head">
    <tr class="c-table__row">
      <th scope="col">Heading 1</th>
      <th scope="col">Heading 2</th>
      <th scope="col">Heading 3</th>
      <th scope="col">Heading 4</th>
      <th scope="col">Heading 5</th>
    </tr>
  </thead>
  <tbody class="c-table__body">
    <tr class="c-table__row">
      <td>orsitamet consectetur</td>
      <td>adipisicing elit, sed</td>
      <td>do eiusmod tempor incididunt ut</td>
      <td>abore et dolore magna aliqua</td>
      <td>sum intate et dolore magna aliqua</td>
    </tr>
    <tr class="c-table__row">
      <td>minim venia qui nostrud</td>
      <td>exercitation ullamco laboris nisi</td>
      <td>ut aliquip ex ea commodo</td>
      <td>onsequat in</td>
      <td>sum intate in</td>
    </tr>
    <tr class="c-table__row">
      <td>enim ad minim veniam</td>
      <td>quis nostrud exercitation ullamco</td>
      <td>laboris nisi ut aliquip ex</td>
      <td>a commodo consequat</td>
      <td>sum intate commodo consequat</td>
    </tr>
    <tr class="c-table__row">
      <td>quis nostrud exercitation ullamco</td>
      <td>laboris nisi ut aliquip ex</td>
      <td>enim ad minim veniam</td>
      <td>commodo consequat</td>
      <td>sum intate commodo consequat</td>
    </tr>
  </tbody>
</table>

Tabs

Tabs support both ordered or unoredered lists of links or just a series of link elements with a wrapper element.

If the data-tabsattribute is present and the tabs’ hrefattributes lead to existing id’s on the same page, the accessible tabs functionality is created automatically to show/hide them.

If the data-tabsattribute is set to multiplethe hide/show functionality switches from using id:s to using class:es instead.

The Tabs component can also be used to group Buttons together.

Tab panel one.

Tab panel two.

Tab panel three.

Multi tab panel one.

Multi tab panel two.

Multi tab panel three.

<div class="c-tabs">
  <a href="#" class="c-tabs__tab">Not selected</a>
  <a href="#" class="c-tabs__tab c-tabs__tab--selected">Selected</a>
  <a href="#" class="c-tabs__tab">Not selected</a>
  <a href="#" class="c-tabs__tab">Not selected</a>
</div>
<div class="o-grid">
  <div class="o-grid__col-12">
    <div class="c-tabs" data-tabs>
      <a href="#tab1" class="c-tabs__tab c-tabs__tab--selected">Tab 1</a>
      <a href="#tab2" class="c-tabs__tab">Tab 2</a>
      <a href="#tab3" class="c-tabs__tab">Tab 3</a>
    </div>
  </div>
  <div class="o-grid__col-auto" id="tab1">
    <p class="c-box">
      <strong>Tab panel one.</strong>
    </p>
  </div>
  <div class="o-grid__col-auto" id="tab2">
    <p class="c-box">
      <strong>Tab panel two.</strong>
    </p>
  </div>
  <div class="o-grid__col-auto" id="tab3">
    <p class="c-box">
      <strong>Tab panel three.</strong>
    </p>
  </div>
  <div class="o-grid__col-12">
    <div class="c-tabs" data-tabs="multiple">
      <a href="#multi-tab-1" class="c-tabs__tab">Tab 1</a>
      <a href="#multi-tab-2" class="c-tabs__tab">Tab 2</a>
      <a href="#multi-tab-3" class="c-tabs__tab">Tab 3</a>
      <a href="#multi-tab" class="c-tabs__tab c-tabs__tab--selected">Show all</a>
    </div>
  </div>
  <div class="o-grid__col-auto multi-tab multi-tab-1">
    <p class="c-box">
      <strong>Multi tab panel one.</strong>
    </p>
  </div>
  <div class="o-grid__col-auto multi-tab multi-tab-2">
    <p class="c-box">
      <strong>Multi tab panel two.</strong>
    </p>
  </div>
  <div class="o-grid__col-auto multi-tab multi-tab-3">
    <p class="c-box">
      <strong>Multi tab panel three.</strong>
    </p>
  </div>
</div>
<div class="c-tabs c-tabs--large">
  <a href="#" class="c-tabs__tab c-tabs__tab--large">Not selected</a>
  <a href="#" class="c-tabs__tab c-tabs__tab--large c-tabs__tab--selected">Selected</a>
  <a href="#" class="c-tabs__tab c-tabs__tab--large">Not selected</a>
  <a href="#" class="c-tabs__tab c-tabs__tab--large">Not selected</a>
</div>
<ul class="c-tabs">
  <li>
    <a href="#" class="c-button c-tabs__tab">Not selected</a>
  </li>
  <li>
    <a href="#" class="c-button c-tabs__tab c-tabs__tab--selected">Selected</a>
  </li>
  <li>
    <a href="#" class="c-button c-tabs__tab">Not selected</a>
  </li>
  <li>
    <a href="#" class="c-button c-tabs__tab">Not selected</a>
  </li>
</ul>

Thumbnail

.c-thumb- creates a rectangular image use in e.g. events. Use .c-thumb--largefor double height and .c-thumb--squarefor square versions.

Use empty alt-text ( alt="") if the image is not considered content or if a descriptive alt-text would duplicate information already present in e.g. a heading nearby.

<img class="c-thumb lazyload" alt="" data-src="temp/thumb1.jpg" />
<img class="c-thumb c-thumb--large lazyload" alt="" data-src="temp/thumb1.jpg" />
<img class="c-thumb c-thumb--square lazyload" alt="" data-src="temp/thumb2.jpg" />
<img class="c-thumb c-thumb--square c-thumb--large lazyload" alt="" data-src="temp/thumb2.jpg" />

Tile

.c-tile- creates "vertical bars" similar to a data table.

.c-tile--ghostvariant creates an "invisible" tile, with slightly different borders.

Avatar images can be "lazyloaded" using data-srcinstead of srctogether with the additional class lazyload.

Kapten Röd turné: Hundralappen!

25 - 28 maj, Braskereidfoss Köp

Kapten Röd turné: Hundralappen!

fredagen den 20 januari 19:00 på Teater Tickster. Försäljning ej påbörjad

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque doloribus libero cupiditate porro inventore excepturi saepe id dicta blanditiis non qui optio, quam ab facilis iusto, iste, omnis consequatur totam.

<div class="c-tile">
  <a href="/events/kapten-rod" class="c-tile__head">
    <div class="c-tile__image">
      <img class="c-thumb lazyload" alt="" data-src="temp/thumb1.jpg" />
    </div>
    <h2 class="c-tile__title">Ett evenemang med lång titel kommer här</h2>
  </a>
  <div class="c-tile__body">
    <span class="c-tile__label">25 - 28 maj, Braskereidfoss</span>
    <a href="#buy" class="c-button c-button--primary c-button--small c-button--round">Köp</a>
  </div>
</div>

<div class="c-tile">
  <a href="/events/kapten-rod" class="c-tile__head">
    <div class="c-tile__image">
      <img class="c-avatar lazyload" alt="" data-src="temp/thumb2.jpg" />
    </div>
    <h2 class="c-tile__title">Kapten Röd turné: Hundralappen!</h2>
  </a>
  <div class="c-tile__body">
    <span class="c-tile__label">25 - 28 maj, Braskereidfoss</span>
    <a href="#buy" class="c-button c-button--primary c-button--small c-button--round">Köp</a>
  </div>
</div>

<div class="c-tile">
  <a href="/events/kapten-rod" class="c-tile__head">
    <div class="c-tile__image">
      <img class="c-avatar lazyload" alt="" data-src="temp/thumb2.jpg" />
    </div>
    <h2 class="c-tile__title">Kapten Röd turné: Hundralappen!</h2>
  </a>
  <div class="c-tile__body">
    <div>
      <a href="#" class="c-button" title="Öppna försäljningssida för ArvikaPyramid 20/1">Försäljning</a>
      <a href="#" class="c-button" title="Visa biljetter som är kopplade till ArvikaPyramid 20/1">Biljetter</a>
      <a href="#" class="c-button" title="Redigera evenemanget ArvikaPyramid 20/1">Redigera</a>
    </div>
  </div>
  <details class="c-tile__foot">
    <summary>fredagen den 20 januari 19:00 på Teater Tickster.
      <span class="c-label">Försäljning ej påbörjad</span>
    </summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque doloribus libero cupiditate porro inventore excepturi
      saepe id dicta blanditiis non qui optio, quam ab facilis iusto, iste, omnis consequatur totam.</p>
  </details>
</div>

Toggle

This component relies on the data-toggleattribute for its functionality and .c-toggle(optional) for the ”dropdown” look. Use data-toggle="targetID"on links and buttons to trigger hide/show functionality on element(s) with corresponding ID:s.

Toggling multiple elements are supported via space separated ID:s, e.g. data-toggle="target1 target2". If the targets have different states (e.g. one opens and one closes) please skip the .c-toggleclass altogether, as it will just be confusing which target element it correlates to.

If you need the hidden state as default, add a .u-hiddenclass (see Hide) and the target will be displayed instead of hidden on the first click. Do make sure you add the aria-expanded="true"attribute too though, or the state indication will be wrong.

Target element 1
Target element 2
Target element 3
Target element 4
<div>
  <button class="c-button c-toggle" data-toggle="target1">Show box</button>
  <div class="c-box u-hidden" id="target1">Target element 1</div>
</div>

<div>
  <button class="c-button c-toggle" data-toggle="target2" aria-expanded="true">Hide box</button>
  <div class="c-box" id="target2">Target element 2</div>
</div>

<div>
  <button class="c-button" data-toggle="target3 target4">Toggle boxes</button>
  <div class="c-box c-box--info" id="target3">Target element 3</div>
  <div class="c-box u-hidden" id="target4">Target element 4</div>
</div>

Video

.c-videois a flexible component suitable for YouTube/Vimeo iframes where a fixed aspect ratio is required.

To "lazyload" the video (so that it only loads its iframe when visible in the viewport), use data-srcinstead of src and add class="lazyload"to the iframe.

<div class="c-video">
  <div class="c-video__body">
    <iframe class="lazyload" data-src="https://www.youtube.com/embed/hDI9k5Mb38w" frameborder="0" title="YouTube video" allowfullscreen>
      <a href="https://www.youtube.com/embed/hDI9k5Mb38w">View video on YouTube.com</a>
    </iframe>
  </div>
</div>

Utilities

Utilities are style heavyweights. Never override style to elements that carries a leading u-. Instead, consider removing the utility from the markup.

Border

u-border-[color-name]can be used to apply a border color to a Component.

Clearfix

u-clearfixcan be used to force a clearfix.

Color

u-color-[color-name]can be used to apply a background color to a Component.

Font utilities

.u-font--(largest|larger|large)- Enlarge any element to the l, xl or xxxl global font sizes (defined as variables in settings.global.css).

.u-font--(thinnest|thinner|bolder|boldest)- Change font weight to 100, 300, 500 or 700.

u-font--largest

u-font--larger

u-font--large

u-font--medium

u-font--small

u-font--smaller

u-font--smallest

u-font--thinnest

u-font--thinner

u-font--bolder
u-font--boldest

u-font--mono

<p class="u-font--largest">u-font--largest</p>
<p class="u-font--larger">u-font--larger</p>
<p class="u-font--large">u-font--large</p>
<p class="u-font--medium">u-font--medium</p>
<p class="u-font--small">u-font--small</p>
<p class="u-font--smaller">u-font--smaller</p>
<p class="u-font--smallest">u-font--smallest</p>

<h2 class="u-font--thinnest">u-font--thinnest</h2>
<h4 class="u-font--thinner">u-font--thinner</h4>
<h5 class="u-font--bolder">u-font--bolder</h5>
<h6 class="u-font--boldest">u-font--boldest</h6>

<p class="u-font--mono">u-font--mono</p>

Hide content

.u-hidden--visually- Hide content visually, but let it be accessible for screen readers.

.u-hidden- Hide content for all, including screen readers.

.u-hidden-(xs|sm|md|lg)- Hide content for all, including screen readers, only on certain screen sizes.

Göm sista ordet i denna mening

Göm sista ordet i denna mening

Denna text göms på allra minst skärmar (xs)

Denna text göms på små skärmar (sm)

Denna text göms på mediumstora skärmar (md)

Denna text göms på stora skärmar (lg)

<p>Göm sista ordet i denna
  <span class="u-hidden--visually">mening</span>
</p>
<p>Göm sista ordet i denna
  <span class="u-hidden">mening</span>
</p>
<p class="u-hidden-xs">Denna text göms på allra minst skärmar (xs)</p>
<p class="u-hidden-sm">Denna text göms på små skärmar (sm)</p>
<p class="u-hidden-md">Denna text göms på mediumstora skärmar (md)</p>
<p class="u-hidden-lg">Denna text göms på stora skärmar (lg)</p>

Position content

.u-position--top-right-- positions an element to the top right corner of its parent element

.u-position--bottom-right-- positions an element to the bottom right corner of its parent element

.u-position--bottom-left-- positions an element to the bottom left corner of its parent element

.u-position--top-left-- positions an element to the top left corner of its parent element

.u-position--right-- positions an element to the right side of its parent element

.u-position--left-- positions an element to the left side of its parent element

.u-position--absolute-- positions an element “absolute” on the screen. Used with or without above classes.

.u-position--relative-- positions an element “relative” on the screen. Used with or without above classes.

.u-position--fixed-- positions an element “fixed” on the screen. Used in conjunction with above classes.

top-left top-center top-right bottom-left bottom-center bottom-right left right absolute relative sticky fixed
<span class="u-position--top-left">top-left</span>
<span class="u-position--top-center">top-center</span>
<span class="u-position--top-right">top-right</span>
<span class="u-position--bottom-left">bottom-left</span>
<span class="u-position--bottom-center">bottom-center</span>
<span class="u-position--bottom-right">bottom-right</span>
<span class="u-position--left">left</span>
<span class="u-position--right">right</span>
<span class="u-position--absolute">absolute</span>
<span class="u-position--relative">relative</span>
<span class="u-position--sticky">sticky</span>
<span class="u-position--fixed">fixed</span>

Text utilities

.u-text--(left|center|right)- Aligns text left, center or right

.u-text--nowrap- keeps all text on one line.

u-text--left

u-text--center

u-text--right

u-text--nowrap u-text--nowrap u-text--nowrap u-text--nowrap u-text--nowrap u-text--nowrap u-text--nowrap

<p class="u-text--left">u-text--left</p>
<p class="u-text--center">u-text--center</p>
<p class="u-text--right">u-text--right</p>
<p class="u-text--nowrap">u-text--nowrap u-text--nowrap u-text--nowrap u-text--nowrap u-text--nowrap u-text--nowrap u-text--nowrap</p>

Themes

Themes trumps all. Here goes major overrides, !important rules, #id:s, what have you. Themes are for site specific hacks. Since we really don't want to handle site hacks in the UI framework, all themes.*.cssfiles are excluded from the build process and can be found in the root folder directly.

Note: Since we're excluding these files, all colors have to use their fixed hex values, browser prefixes have to be explicitly defined, etc.