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).

This overview of heading sizes may help picking the right corresponding utility class:

h1 = .u-font--largest h2 = .u-font--larger h3 = .u-font--large h4 = .u-font--medium h5 = .u-font--small h6 = .u-font--smaller

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.

.c-card--selected- Card state suitable for e.g. label elements surrounding a radio button (note the use of spans instead of block level elements, for proper validation)

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

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

Kapten Röd turné: Hundralappen!

Köp 25 - 28 maj, Braskereidfoss

Card 1

Card 2

Category A

400–500 kr

Mer information Ankomsttid: 20:00

Lorem ipsum dolor sit amet

Ipsum dolor sit amet in consectetur

Välj biljetter 2 st Hockeytugg, ståplats 1 st Hockeytugg, utan mat

Hockeytugg, ståplats

500 kr

Hockeytugg, utan mat

300 kr

Ungdom

200 kr
Finns
<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="temp/skus/bilar.jpg" />
      </div>
      <div class="c-card__body">
        <h2 class="c-card__title">Card 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="temp/skus/cola.jpg" />
      </div>
      <div class="c-card__body">
        <h2 class="c-card__title">Card 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">
    <label class="c-card c-card--cover c-card--selected">
      <span class="c-card__image">
        <img class="lazyload" alt="" data-src="temp/skus/gottoblandat.jpg" />
        <input type="checkbox" name="sku" value="1" class="u-hidden--visually" />
      </span>
      <span class="c-card__body">
        <strong class="c-card__title">Card, selected</strong>
        <span>Lorem ipsum dolor sit amet</span>
      </span>
    </label>
  </div>
  <div class="o-grid__col-auto">
    <div class="c-card">
      <div class="c-card__body">
        <h2 class="c-card__title">Category A</h2>
        <p class="u-font--medium">400–500 kr</p>
        <details>
          <summary>Mer information
            <span class="c-pill u-color-blue-lightest">
              <span>Ankomsttid: 20:00</span>
            </span>
          </summary>
          <div class="c-box c-box--info c-box--small">
            <p>Lorem ipsum dolor sit amet</p>
            <p>Ipsum dolor sit amet in consectetur</p>
          </div>
        </details>
        <details>
          <summary>Välj biljetter
            <span class="c-pill u-color-yellow-lighter">
              <span>2 st Hockeytugg, ståplats</span>
            </span>
            <span class="c-pill u-color-yellow-lighter">
              <span>1 st Hockeytugg, utan mat</span>
            </span>
          </summary>
          <div class="c-tile">
            <div class="c-tile__head c-tile__head--vertical">
              <h3 class="c-tile__title">Hockeytugg, ståplats</h3>
              <span class="c-tile__label u-text--nowrap">500 kr</span>
            </div>
            <div class="c-tile__body">
              <div class="c-plus-minus c-form-control" data-plus-minus>
                <label for="id333" 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="id333" type="number" min="0" max="10" value="2" />
                <button class="c-button c-button--positive" title="Increase by 1">+</button>
              </div>
            </div>
          </div>
          <div class="c-tile">
            <div class="c-tile__head c-tile__head--vertical">
              <h3 class="c-tile__title">Hockeytugg, utan mat</h3>
              <span class="c-tile__label u-text--nowrap">300 kr</span>
            </div>
            <div class="c-tile__body">
              <div class="c-plus-minus c-form-control" data-plus-minus>
                <label for="id334" 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="id334" type="number" min="0" max="10" value="1" />
                <button class="c-button c-button--positive" title="Increase by 1">+</button>
              </div>
            </div>
          </div>
          <div class="c-tile">
            <div class="c-tile__head c-tile__head--vertical">
              <h3 class="c-tile__title">Ungdom</h3>
              <span class="c-tile__label u-text--nowrap">200 kr</span>
            </div>
            <div class="c-tile__body">
              <div class="c-plus-minus c-form-control" data-plus-minus>
                <label for="id335" 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="id335" type="number" min="0" max="10" value="0" />
                <button class="c-button c-button--positive" title="Increase by 1">+</button>
              </div>
            </div>
          </div>
        </details>
      </div>
      <div class="c-card__foot">
        <div class="o-grid o-grid--align-center o-grid--bleed">
          <div class="o-grid--align-start o-grid__col-auto">
            <span class="c-pill u-color-green-lightest">
              <span>Finns</span>
            </span>
          </div>
          <div class="o-grid__col-auto 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="allornothing2">Select menu, error</label>
    <select name="select" id="allornothing2">
      <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="searchable-menu1">Select menu, searchable</label>
    <select name="select" id="searchable-menu1">
      <option value="1">Option 1</option>
      <option value="2">Option with a long name 2</option>
      <option value="3">Option with a very long name 3</option>
      <option value="4">Option with a long name 4</option>
      <option value="5">Option with a long name 5</option>
      <option value="6">Option with a long name 6</option>
      <option value="7">Option with a long name 7</option>
      <option value="8">Option with a long name 8</option>
      <option value="9">Option with a long name 9</option>
      <option value="10">Option with a long name 10</option>
      <option value="11">Option with a long name 11</option>
      <option value="12">Option with a long name 12</option>
      <option value="13">Option with a long name 13</option>
      <option value="14">Option with a long name 14</option>
      <option value="15">Option with a long name 15</option>
      <option value="16">Option with a long name 16</option>
      <option value="17">Option with a long name 17</option>
      <option value="18">Option with a long name 18</option>
      <option value="19">Option with a long name 19</option>
      <option value="20">Option with a long name 20</option>
      <option value="21">Option with a long name 21</option>
      <option value="22">Option with a long name 22</option>
      <option value="23">Option with a long name 23</option>
      <option value="24">Option with a long name 24</option>
      <option value="25">Option with a long name 25</option>
      <option value="26">Option with a long name 26</option>
      <option value="27">Option with a long name 27</option>
      <option value="28">Option with a long name 28</option>
      <option value="29">Option with a long name 29</option>
      <option value="30">Option with a long name 30</option>
      <option value="31">Option with a long name 31</option>
      <option value="32">Option with a long name 32</option>
      <option value="33">Option with a long name 33</option>
      <option value="34">Option with a long name 34</option>
      <option value="35">Option with a long name 35</option>
    </select>
  </div>
  <div class="c-form-control">
    <label class="c-label" for="searchable-menu2">Select menu, searchable, multi select</label>
    <select name="select" id="searchable-menu2" multiple data-placeholder="Select one or multiple events…" data-no_results_text="😢 Did not find anything on">
      <option value="1" selected>Option 1</option>
      <option value="2">Option with a long name 2</option>
      <option value="3">Option with a very long name 3</option>
      <option value="4">Option with a long name 4</option>
      <option value="5">Option with a long name 5</option>
      <option value="6">Option with a long name 6</option>
      <option value="7">Option with a long name 7</option>
      <option value="8">Option with a long name 8</option>
      <option value="9">Option with a long name 9</option>
      <option value="10">Option with a long name 10</option>
      <option value="11">Option with a long name 11</option>
      <option value="12">Option with a long name 12</option>
      <option value="13">Option with a long name 13</option>
      <option value="14">Option with a long name 14</option>
      <option value="15">Option with a long name 15</option>
      <option value="16">Option with a long name 16</option>
      <option value="17">Option with a long name 17</option>
      <option value="18">Option with a long name 18</option>
      <option value="19">Option with a long name 19</option>
      <option value="20">Option with a long name 20</option>
      <option value="21">Option with a long name 21</option>
      <option value="22">Option with a long name 22</option>
      <option value="23">Option with a long name 23</option>
      <option value="24">Option with a long name 24</option>
      <option value="25">Option with a long name 25</option>
      <option value="26">Option with a long name 26</option>
      <option value="27">Option with a long name 27</option>
      <option value="28">Option with a long name 28</option>
      <option value="29">Option with a long name 29</option>
      <option value="30">Option with a long name 30</option>
      <option value="31">Option with a long name 31</option>
      <option value="32">Option with a long name 32</option>
      <option value="33">Option with a long name 33</option>
      <option value="34">Option with a long name 34</option>
      <option value="35">Option with a long name 35</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>

Multi-select

.c-multi-select– Makes any unordered list look like a "multi select" component

  • Färjestad BK - Frölunda HC Lör, 2020-10-17, kl 16:00
  • Färjestad BK - Örebro Tor, 2020-10-22, kl 17:00
  • Färjestad BK - Rögle Tis, 2020-10-27, kl 18:00
  • Färjestad BK - Leksand Tis, 2020-11-10, kl 18:00
  • Färjestad BK - Djurgården Lör, 2020-11-14, kl 17:00
  • Färjestad BK - HV71 Lör, 2020-11-21, kl 17:00
  • Färjestad BK - HV71 Lör, 2021-02-20, kl 17:00
  • Färjestad BK - Leksand Tor, 2021-02-25, kl 18:00
  • Semifinal 1 Lör, 2021-03-27, kl 17:00
  • Semifinal 2 Lör, 2021-03-27, kl 17:00
  • Semifinal 3 Lör, 2021-03-27, kl 17:00
  • CHL match 5 Sön, 2021-04-25, kl 16:00
  • CHL match 3 Sön, 2021-04-25, kl 16:00
  • CHL match 1 Sön, 2021-04-25, kl 16:00
  • CHL match 2 Sön, 2021-04-25, kl 16:00
  • CHL match 4 Sön, 2021-04-25, kl 16:00
  • FRAMÅT OCH UPPÅT - TILLSAMMANS! Fre, 2021-04-30, kl 16:00
  • Final 1 Fre, 2021-04-30, kl 16:00
  • Final 3 Fre, 2021-04-30, kl 16:00
  • Final 4 Fre, 2021-04-30, kl 16:00
  • Final 2 Fre, 2021-04-30, kl 16:00
  • CHL match 2 Sön, 2021-04-25, kl 16:00
  • CHL match 4 Sön, 2021-04-25, kl 16:00
  • Final 2 Fre, 2021-04-30, kl 16:00
<div class="o-grid">
  <div class="o-grid__col-6">
    <ul class="c-multi-select">
      <li tabindex="0">Färjestad BK - Frölunda HC
        <span>Lör, 2020-10-17, kl 16:00</span>
      </li>
      <li tabindex="0">Färjestad BK - Örebro
        <span>Tor, 2020-10-22, kl 17:00</span>
      </li>
      <li tabindex="0">Färjestad BK - Rögle
        <span>Tis, 2020-10-27, kl 18:00</span>
      </li>
      <li tabindex="0">Färjestad BK - Leksand
        <span>Tis, 2020-11-10, kl 18:00</span>
      </li>
      <li tabindex="0">Färjestad BK - Djurgården
        <span>Lör, 2020-11-14, kl 17:00</span>
      </li>
      <li tabindex="0">Färjestad BK - HV71
        <span>Lör, 2020-11-21, kl 17:00</span>
      </li>
      <li tabindex="0">Färjestad BK - HV71
        <span>Lör, 2021-02-20, kl 17:00</span>
      </li>
      <li tabindex="0">Färjestad BK - Leksand
        <span>Tor, 2021-02-25, kl 18:00</span>
      </li>
      <li tabindex="0">Semifinal 1
        <span>Lör, 2021-03-27, kl 17:00</span>
      </li>
      <li tabindex="0">Semifinal 2
        <span>Lör, 2021-03-27, kl 17:00</span>
      </li>
      <li tabindex="0">Semifinal 3
        <span>Lör, 2021-03-27, kl 17:00</span>
      </li>
      <li tabindex="0">CHL match 5
        <span>Sön, 2021-04-25, kl 16:00</span>
      </li>
      <li tabindex="0">CHL match 3
        <span>Sön, 2021-04-25, kl 16:00</span>
      </li>
      <li tabindex="0">CHL match 1
        <span>Sön, 2021-04-25, kl 16:00</span>
      </li>
      <li tabindex="0">CHL match 2
        <span>Sön, 2021-04-25, kl 16:00</span>
      </li>
      <li tabindex="0">CHL match 4
        <span>Sön, 2021-04-25, kl 16:00</span>
      </li>
      <li tabindex="0">FRAMÅT OCH UPPÅT - TILLSAMMANS!
        <span>Fre, 2021-04-30, kl 16:00</span>
      </li>
      <li tabindex="0">Final 1
        <span>Fre, 2021-04-30, kl 16:00</span>
      </li>
      <li tabindex="0">Final 3
        <span>Fre, 2021-04-30, kl 16:00</span>
      </li>
      <li tabindex="0">Final 4
        <span>Fre, 2021-04-30, kl 16:00</span>
      </li>
      <li tabindex="0">Final 2
        <span>Fre, 2021-04-30, kl 16:00</span>
      </li>
    </ul>
    </ul>
  </div>
  <div class="o-grid__col-6">
    <ul class="c-multi-select">
      <li tabindex="0">CHL match 2
        <span>Sön, 2021-04-25, kl 16:00</span>
      </li>
      <li tabindex="0">CHL match 4
        <span>Sön, 2021-04-25, kl 16:00</span>
      </li>
      <li tabindex="0">Final 2
        <span>Fre, 2021-04-30, kl 16:00</span>
      </li>
    </ul>
    </ul>
  </div>
</div>

Pager

.c-pager– based on Tabs and is auto generated, inserted right after the pagination container.

A pagination container is any element with the attribute data-paginationthat also has child elements with .paginateclasses.

To customizer the number of items per page, set the attribute data-per-pageto anything other than 10 (which is default if the attribute is missing).

Heading cell Heading cell
Ut enim ad minim veniam, quis ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud ea commodo 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. Ut enim ad minim veniam, quis quip 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. Ad minim veniam, quis nostrud exercitation ullamco laboris equat.
Ad minim veniam, quis nostrud exercitation commodo consequat. Ut enim ad minim veniam, quis quip ex ea commodo consequat.
<table class="c-table" data-pagination data-per-page="2">
  <thead class="c-table__head">
    <tr class="c-table__row">
      <th scope="col">Heading cell</th>
      <th scope="col">Heading cell</th>
    </tr>
  </thead>
  <tbody class="c-table__body">
    <tr class="c-table__row paginate">
      <td>Ut enim ad minim veniam, quis ex ea commodo consequat.</td>
      <td>Ut enim ad minim veniam, quis nostrud ea commodo consequat.</td>
    </tr>
    <tr class="c-table__row paginate">
      <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 paginate">
      <td>Loremipsumdolorsitametconsectetur adipisicing elit, e et dolore magna aliqua.</td>
      <td>Ut enim ad minim veniam, quis quip ex ea commodo consequat.</td>
    </tr>
    <tr class="c-table__row paginate">
      <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 paginate">
      <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco do consequat.</td>
      <td>Ad minim veniam, quis nostrud exercitation ullamco laboris equat.</td>
    </tr>
    <tr class="c-table__row paginate">
      <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>

<!-- Markup of the pager:
<ul class="c-pager c-tabs">
   <li><button type="button"class="c-button c-tabs__tab c-tabs__tab--selected">1</button></li>
   <li><button type="button"class="c-button c-tabs__tab">2</button></li>
   <li><button type="button"class="c-button c-tabs__tab">3</button></li>
</ul>
</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>
<progress class="c-progress c-progress--small" value="30" min="0" max="100"></progress>

Range

.c-range- used for "slider" inputs.

<input name="range" class="c-range" type="range" min="0" max="100" step="1" value="50" />

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>
<div class="c-spinner c-spinner--small">
  <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>
  <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="1" checked />
    </span>
  </span>
  <label for="switch2" class="c-label">Kom ihåg mig?</label>
</div>
<div class="c-form-control">
  <span class="c-switch" data-switch>
    <label for="switch3" class="c-switch__state c-switch__state--active">Säljbar?</label>
    <span class="c-switch__button c-switch__button--active">
      <input type="checkbox" id="switch3" value="1" checked />
    </span>
  </span>
  <span class="c-switch" data-switch>
    <label for="switch4" class="c-switch__state c-switch__state--active c-switch__state--updated">Säljbar?</label>
    <span class="c-switch__button c-switch__button--active">
      <input type="checkbox" id="switch4" value="1" checked />
    </span>
  </span>
  <span class="c-switch" data-switch>
    <label for="switch5" class="c-switch__state c-switch__state--inactive c-switch__state--updated">Säljbar?</label>
    <span class="c-switch__button c-switch__button--inactive">
      <input type="checkbox" id="switch5" value="0" />
    </span>
  </span>
</div>

Table

The tables component ( .c-table) adds more styleing to tables.

The flag .c-table--stripedcreates "zebra" rows.

The flag .c-table--fixedcreates a "fixed" table where the table and column widths are set by the widths of tableand colelements or by the width of the first row of cells.

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

Table head below 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.
No table head below caption
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.
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 head below 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">
  <caption class="c-table__caption">No table head below caption</caption>
  <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">
      <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 c-table--fixed">
  <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.

Don’t miss .c-tile__head--vertical– a nifty addition to the Tile head to make head content stack vertically instead.

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!

Show details

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 c-tile__body--nowrap">
    <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 c-tile__body--nowrap">
    <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">
  <div class="c-tile__image">
    <img class="c-thumb lazyload" alt="" data-src="temp/thumb2.jpg" />
  </div>
  <a href="/events/kapten-rod" class="c-tile__head c-tile__head--vertical">
    <h2 class="c-tile__title">Kapten Röd turné: Hundralappen!</h2>
    <p>Lorem ipsum dolor sit amet</p>
  </a>
  <div class="c-tile__body c-tile__body--nowrap">
    <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">
  <div class="c-tile__image">
    <img class="c-thumb lazyload" alt="" data-src="temp/thumb2.jpg" />
  </div>
  <a href="/events/kapten-rod" class="c-tile__head c-tile__head--vertical">
    <h2 class="c-tile__title">Kapten Röd turné: Hundralappen!</h2>
    <p>Lorem ipsum dolor sit amet</p>
  </a>
</div>

<div class="c-tile">
  <a href="/events/kapten-rod" class="c-tile__head c-tile__head--vertical">
    <h2 class="c-tile__title">Kapten Röd turné: Hundralappen!</h2>
    <p>Lorem ipsum dolor sit amet</p>
  </a>
  <div class="c-tile__body">
    <span class="c-tile__label">25 - 28 maj, Braskereidfoss</span>
  </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>Show details</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>

Loading

Shows a centered spinner on white background on any element while u-loadingclass is present. If transparent background is a must, please use Spinner instead.

    <ul class="c-multi-select u-loading"></ul>

    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.