5 augusti 2022
Nyhamnen
i
Malmö
Version history
v1.X.X
Currently used in e.g. Webshop, Manager and Download. Not in current development. Requires jQuery and uses static colors. PostCSS handles this color conversion as well as legacy CSS support for IE 11. Themes are unaffected by this post processing and therefore cannot use global variables (must use static hex codes e.g.).
v2.X.X currently in master
Currently used in Tickster.com, MyTickster, Tickster Queue, Tickster Help Center and the About Tickster website. Requires jQuery and and uses CSS variables that also can be overridden in Themes. PostCSS still handles bundling but without IE fallbacks.
v3.X.X
Next generation branch. Not used live yet. Does not use or depend on jQuery anymore. All in house plugins have been rewritten using "vanilla" JavaScript and vendor scripts has either been replaced (e.g. Glider instead of Slick), altered (VanillaAutocomplete variant instead of jQuery Autocomplete) or rewritten (Lity). One plugin (Chosen) has been removed altogether, a potentially controversion move still under consideration.
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.
| 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
.o-croppedworks as a wrapper for components where you'd want a horizontal scroll bar "cropping" the content.
| 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
A grid wrapper gets the class
o-gridand its children get
o-grid__col-Nfor each column, with different widths – 1 to 12 – available for small (sm), medium (md) and large (lg) sreen widths, just like
Bootstrap.
Also,
o-grid__col-[xs|sm|md|ld]-autois available e.g. for when one column should have a fixed size but another should not.
However, modifier class
o-grid--autoon the main/wrapper element makes the whole grid “fluid” and its columns wraps as needed (no need for column child classes – all children are considered columns).
Modifier
o-grid--gap-none(or legacy
o-grid--bleed) on the wrapper element resets all column gaps. If you need extra gutter, use
o-grid--gap-[s|m|l|xl]modifiers.
Naming based on Reflex v1.5
Cell 1
Cell 2
Cell 3
Cell 1
Cell 2
Cell 1
Cell 2
Cell 3
Cell 1
Cell 2
Cell 3
Cell 4
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 1
Cell 2
Cell 3
Cell 1
Nested cell 1
Nested cell 2
Nested cell 3
Nested cell 4
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
<div class="o-grid o-grid--auto o-grid--gap-none u-margin-top--large">
<div class="c-box c-box--small">
Cell 1
</div>
<div class="c-box c-box--small">
Cell 2
</div>
<div class="c-box c-box--small">
Cell 3
</div>
</div>
<div class="o-grid o-grid--auto u-margin-top--large">
<div class="o-grid__col">
<div class="c-box">
Cell 1
</div>
</div>
<div class="o-grid__col">
<div class="c-box">
Cell 2
</div>
</div>
</div>
<div class="o-grid o-grid--auto o-grid--gap-none u-margin-top--large">
<div class="o-grid__col">
<div class="c-box c-box--warning">
Cell 1
</div>
</div>
<div class="o-grid__col">
<div class="c-box c-box--warning">
Cell 2
</div>
</div>
<div class="o-grid__col">
<div class="c-box c-box--warning">
Cell 3
</div>
</div>
</div>
<div class="o-grid o-grid--auto u-margin-top--large">
<div class="o-grid__col">
<div class="c-box c-box--positive">
Cell 1
</div>
</div>
<div class="o-grid__col">
<div class="c-box c-box--positive">
Cell 2
</div>
</div>
<div class="o-grid__col">
<div class="c-box c-box--positive">
Cell 3
</div>
</div>
<div class="o-grid__col">
<div class="c-box c-box--positive">
Cell 4
</div>
</div>
</div>
<div class="o-grid o-grid--auto u-margin-top--large">
<div class="o-grid__col">
<div class="c-box c-box--negative">
Cell 1
</div>
</div>
<div class="o-grid__col">
<div class="c-box c-box--negative">
Cell 2
</div>
</div>
<div class="o-grid__col">
<div class="c-box c-box--negative">
Cell 3
</div>
</div>
<div class="o-grid__col">
<div class="c-box c-box--negative">
Cell 4
</div>
</div>
<div class="o-grid__col">
<div class="c-box c-box--negative">
Cell 5
</div>
</div>
</div>
<div class="o-grid o-grid--gap-xl u-margin-top--large">
<div class="o-grid__col-4">
<div class="c-box">
Cell 1
</div>
</div>
<div class="o-grid__col-auto">
<div class="c-box">
Cell 2
</div>
</div>
<div class="o-grid__col-12">
<div class="c-box">
Cell 3
</div>
</div>
</div>
<div class="o-grid u-margin-top--large">
<div class="o-grid__col-3">
<div class="c-box">
Cell 1
</div>
</div>
<div class="o-grid__col-9">
<div class="o-grid o-grid--auto">
<div class="c-box c-box--info">
Nested cell 1
</div>
<div class="c-box c-box--info">
Nested cell 2
</div>
<div class="c-box c-box--info">
Nested cell 3
</div>
<div class="c-box c-box--info">
Nested cell 4
</div>
</div>
</div>
</div>
<div class="o-grid u-margin-top--large">
<div class="o-grid__col-12 o-grid__col-sm-6 o-grid__col-md-5 o-grid__col-lg-3">
<div class="c-box c-box--small">
Cell 1
</div>
</div>
<div class="o-grid__col-12 o-grid__col-sm-4 o-grid__col-md-3 o-grid__col-lg-5">
<div class="c-box c-box--small">
Cell 2
</div>
</div>
<div class="o-grid__col-12 o-grid__col-sm-6 o-grid__col-md-4">
<div class="c-box c-box--small">
Cell 3
</div>
</div>
<div class="o-grid__col-12 o-grid__col-sm-6 o-grid__col-md-8">
<div class="c-box c-box--small">
Cell 4
</div>
</div>
<div class="o-grid__col-6 o-grid__col-sm-4 o-grid__col-md-6 o-grid__col-lg-6">
<div class="c-box c-box--small">
Cell 5
</div>
</div>
<div class="o-grid__col-6 o-grid__col-sm-4 o-grid__col-md-3 o-grid__col-lg-2">
<div class="c-box c-box--small">
Cell 6
</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.
If not stated otherwise, any Component could be used on any suitable HTML element.
Article
.c-article- wrapper around a headline and ingress on e.g. event pages. Use modifier
.c-article--centerto center text.
Big Slap - Södra Sveriges Största Musikfestival, en 2 dagars festival i centrala Malmö, breddar nu med en dag av livemusik och en dag EDM.
Den 5 & 6 augusti 2022 tar Big Slap XL över Nyhamnen i Malmö.
HEADLINER FREDAG:
JUSTIN BIEBER
HEADLINER LÖRDAG:
MARTIN GARRIX
Full line up släpps den 1 December 2021
Då vi inte träffats sedan 2023 vill vi nu arrangera det största evenemanget någonsin i Malmö. Under 2 dagar siktar vi på 80 000 besökare och breddar Big Slap till 13+ så att fler kan ta del av detta arrangemang.
<article class="c-article c-article--center">
<div class="c-article__image">
<img src="https://dd16h7yl5aaam.cloudfront.net/7c/f9fcb4eb1b662f98ae633361fee3c06a36c77a" alt="" />
</div>
<h1 class="c-article__title">BIG SLAP XL 2022 - JUSTIN BIEBER / MARTIN GARRIX</h1>
<div class="c-article__body u-margin-bottom--large u-text--center">
<p class="u-font--mono u-font--small">5 augusti 2022
<br />
<a href="#">Nyhamnen</a>
i
<a href="#">Malmö</a>
</p>
<a href="#buy" class="c-button c-button--primary">Köp biljett</a>
</div>
</article>
<article class="c-article">
<div class="c-article__body">
<p>
<strong>Big Slap</strong>
- Södra Sveriges Största Musikfestival, en 2 dagars festival i centrala Malmö, breddar nu med en dag av livemusik och en
dag EDM.</p>
<p>Den
<strong>5 & 6 augusti</strong>
2022 tar Big Slap XL över
<strong>Nyhamnen</strong>
i Malmö.</p>
<p>
<strong>HEADLINER FREDAG</strong>:</p>
<h1>JUSTIN BIEBER</h1>
<p>
<strong>HEADLINER LÖRDAG</strong>:</p>
<h1>MARTIN GARRIX</h1>
<p>Full line up släpps den 1 December 2021</p>
<p>Då vi inte träffats sedan 2023 vill vi nu arrangera det största evenemanget någonsin i Malmö. Under 2 dagar siktar vi
på 80 000 besökare och breddar Big Slap till 13+ så att fler kan ta del av detta arrangemang.</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
DEPRECATED
Use
Thumbnail
with variant
c-thumb--roundinstead.
Box
.c-box- used for messages, notifications 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">
<p>Lorem ipsum dolor sit amet.</p>
</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>
Card
Cards are always white and should never be overwritten by other text or background color (or we risk breaking dark mode support).
.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)
Thumbnails 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
Candy
Card 2
New Card
Subtitle
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 krHockeytugg, utan mat
300 krUngdom
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-thumb c-thumb--round 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--scale-down">
<img class="lazyload" alt="" data-src="../temp/skus/bilar.jpg" />
</div>
<div class="c-card__body c-card__body--scale-down">
<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--overlay">
<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">Candy</h2>
</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="id332" 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="id332" 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--rounded">
<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 c-card__body--rounded">
<time date="2024-03-19" class="c-card__date">2024-03-19</time>
<h3 class="c-card__title c-card__title--accent" id="newCard">New Card</h3>
<h4 class="c-card__subtitle">Subtitle</h4>
</div>
<button class="c-button c-button--options u-margin--small u-position--top-right">
<svg xmlns="http://www.w3.org/2000/svg" width="4" height="18" viewBox="0 0 4 18" fill="none">
<path d="M2 2.92C2.26522 2.92 2.51957 2.81886 2.70711 2.63882C2.89464 2.45879 3 2.21461 3 1.96C3 1.70539 2.89464 1.46121 2.70711 1.28118C2.51957 1.10114 2.26522 1 2 1C1.73478 1 1.48043 1.10114 1.29289 1.28118C1.10536 1.46121 1 1.70539 1 1.96C1 2.21461 1.10536 2.45879 1.29289 2.63882C1.48043 2.81886 1.73478 2.92 2 2.92ZM2 9.96C2.26522 9.96 2.51957 9.85886 2.70711 9.67882C2.89464 9.49879 3 9.25461 3 9C3 8.74539 2.89464 8.50121 2.70711 8.32118C2.51957 8.14114 2.26522 8.04 2 8.04C1.73478 8.04 1.48043 8.14114 1.29289 8.32118C1.10536 8.50121 1 8.74539 1 9C1 9.25461 1.10536 9.49879 1.29289 9.67882C1.48043 9.85886 1.73478 9.96 2 9.96ZM2 17C2.26522 17 2.51957 16.8989 2.70711 16.7188C2.89464 16.5388 3 16.2946 3 16.04C3 15.7854 2.89464 15.5412 2.70711 15.3612C2.51957 15.1811 2.26522 15.08 2 15.08C1.73478 15.08 1.48043 15.1811 1.29289 15.3612C1.10536 15.5412 1 15.7854 1 16.04C1 16.2946 1.10536 16.5388 1.29289 16.7188C1.48043 16.8989 1.73478 17 2 17Z"
stroke=v ar(--co-text) stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</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>
Date
.c-datecreates a little date "thumbnail" with date and time information
fre
25
feb
2022
fre
25
feb
2022
kl 19:30
<div class="c-date">
<span class="c-date__weekday" aria-label="fredag">fre</span>
<span class="c-date__day">25</span>
<span class="c-date__month" aria-label="februari">feb</span>
<span class="c-date__year">2022</span>
</div>
<div class="c-date">
<span class="c-date__weekday" aria-label="fredag">fre</span>
<span class="c-date__day">25</span>
<span class="c-date__month" aria-label="februari">feb</span>
<span class="c-date__year">2022</span>
<span class="c-date__time">kl 19:30</span>
</div>
Datepicker
The class names of this component are primarily added to other components via the vendor JavaScript Air Datepicker.
Use
data-datepickeron form inputs to trigger date picker functionality.
Use
data-datetimepickerfor a time picker as well.
<div class="c-form-control">
<label for="picker1" class="c-label">Date</label>
<input type="text" id="picker1" data-datepicker data-min-date="2020-02-02" data-max-date="2020-02-22" value="2020-02-20"
/>
</div>
<div class="c-form-control">
<label for="picker2" class="c-label">Date and time</label>
<input type="text" id="picker2" data-datetimepicker value="2020-02-21 18:00" />
</div>
Dialog
.c-dialog– creates a JavaScript free modal dialog with native focusing and closing capabilities (see
Modal
for a Lity/JavaScript dependent legacy solution.
Note: To show the dialog you’ll need to use show() or showModal() in vanilla JavaScript.
Open dialog (link with #target)
– this last one works best where Lity is missing/undefined e.g. in projects where framework-vendor.js is not loaded.
<button class="c-button c-button--small" onclick="javascript:document.querySelector('.c-dialog').show()">Open dialog (show)</button>
<button class="c-button c-button--small" onclick="javascript:document.querySelector('.c-dialog').showModal()">Open dialog (showModal)</button>
<a href="#dialog-modal" class="c-button c-button--small u-margin-left--medium" data-modal>Open dialog (link with #target)</a>
– this last one works best where Lity is missing/undefined e.g. in projects where framework-vendor.js is not loaded.
<dialog class="c-dialog" id="dialog-modal">
<h2 class="c-dialog__title">Title</h2>
<div class="c-dialog__body">
<p>Content of the dialog goes here. Content of the dialog goes here. Content of the dialog goes here. Content of the dialog
goes here.</p>
<p>Content of the dialog goes here. Content of the dialog goes here. Content of the dialog goes here. Content of the dialog
goes here.</p>
<p>Content of the dialog goes here. Content of the dialog goes here. Content of the dialog goes here. Content of the dialog
goes here.</p>
<p>Content of the dialog goes here. Content of the dialog goes here. Content of the dialog goes here. Content of the dialog
goes here.</p>
</div>
<form method="dialog">
<button class="c-dialog__close" aria-label="Close">✕</button>
</form>
</dialog>
Fieldset
.c-fieldsetis used to style fieldset elements (and its legend child element)
<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 size adjustments, use
.c-form-control--[small|large].
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 action="#">
<div class="c-form-control">
<label for="id5" class="c-label">Normal label</label>
<input id="id5" type="text" placeholder="firstname.lastname" />
</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" class="input-validation-error" />
<span class="c-box c-box--small c-box--negative">Form error message</span>
</div>
<div class="c-form-control">
<label for="id-date" class="c-label">Date</label>
<input id="id-date" type="date" />
</div>
<div class="c-form-control">
<label for="id-time" class="c-label">Date and time</label>
<input id="id-time" type="datetime-local" />
</div>
<div class="o-grid">
<div class="o-grid__col-12">
<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-4">
<div class="c-form-control c-form-control c-form-control--large">
<label for="id2" class="c-label">E-mail, large</label>
<input id="id2" type="email" value="anton.andreasson@tickster.com" />
</div>
</div>
<div class="o-grid__col-sm-4">
<div class="c-form-control c-form-control">
<label for="id2" class="c-label">E-mail, default</label>
<input id="id2" type="email" value="anton.andreasson@tickster.com" />
</div>
</div>
<div class="o-grid__col-sm-4">
<div class="c-form-control c-form-control c-form-control--small">
<label for="id2" class="c-label">E-mail, small</label>
<input id="id2" type="email" value="anton.andreasson@tickster.com" />
</div>
</div>
<div class="o-grid__col-4">
<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-8">
<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">
<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="datalist-countries">Input with datalist</label>
<input type="text" list="countrydata" id="datalist-countries" name="datalist-countries" min="0" max="1" autofill="off" autocomplete="off"
spellcheck="off" required />
<datalist id="countrydata">
<option>Sweden</option>
</datalist>
</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>
</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>
</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>
<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>
<div class="c-form-control c-form-control--group">
<input class="c-button c-button--primary" type="submit" value="Open" />
<button class="c-button c-button--primary" type="button">▾</button>
</div>
</form>
Label
.c-label- used for label styling in forms and on categories.
.c-label--required(with an accompanying
<span title="Obligatory">*</span>) is used for required labels in forms.
Consert
First name
*
<div class="c-label">Consert</div>
<div class="c-label c-label--required">First name
<span title="Obligatoriskt">*</span>
</div>
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.
Evenemang
Några av våra produkter
- Tickster Manager
- Tickster BoxPoint
- Tickster Blink
Några av våra produkter
Några av våra produkter
- Kraftfullt system– byggt av och för arrangörer.
- Ingen löpande avgift– säljer du inget kostar det inget.
- Ditt varumärke främst– webshop med egen grafisk profil.
<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>
<div class="c-list">
<ul>
<li>
<svg width="32" height="32" class="c-list__image">
<use xlink:href="../ui-framework/symbol/svg/sprite.symbol.svg#check" />
</svg>
<b>Kraftfullt system</b>– byggt av och för arrangörer.</li>
<li>
<svg width="32" height="32" class="c-list__image">
<use xlink:href="../ui-framework/symbol/svg/sprite.symbol.svg#check" />
</svg>
<b>Ingen löpande avgift</b>– säljer du inget kostar det inget.</li>
<li>
<svg width="32" height="32" class="c-list__image">
<use xlink:href="../ui-framework/symbol/svg/sprite.symbol.svg#check" />
</svg>
<b>Ditt varumärke främst</b>– webshop med egen grafisk profil.</li>
</ul>
</div>
Map
.c-mapon an image with a source to a static map will create a full width, fixed height container with its content always centered.
<img class="c-map lazyload" data-expand="200" data-src="https://maps.tickster.com/maps/api/staticmap?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"
/>
Modal
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).
Note: For a vendor-less version of a similar modal, see Dialog.
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">
<b>Färjestad BK - Frölunda HC</b>
<span>Lör, 2020-10-17, kl 16:00</span>
<button type="button" class="c-button c-button--positive">+</button>
</li>
<li tabindex="0">
<b>Färjestad BK - Örebro</b>
<span>Tor, 2020-10-22, kl 17:00</span>
<button type="button" class="c-button c-button--positive">+</button>
</li>
<li tabindex="0">
<b>Färjestad BK - Rögle</b>
<span>Tis, 2020-10-27, kl 18:00</span>
<button type="button" class="c-button c-button--positive">+</button>
</li>
<li tabindex="0">
<b>Färjestad BK - Leksand</b>
<span>Tis, 2020-11-10, kl 18:00</span>
<button type="button" class="c-button c-button--positive">+</button>
</li>
<li tabindex="0">
<b>Färjestad BK - Djurgården</b>
<span>Lör, 2020-11-14, kl 17:00</span>
<button type="button" class="c-button c-button--positive">+</button>
</li>
<li tabindex="0">
<b>Färjestad BK - HV71</b>
<span>Lör, 2020-11-21, kl 17:00</span>
<button type="button" class="c-button c-button--positive">+</button>
</li>
<li tabindex="0">
<b>Färjestad BK - HV71</b>
<span>Lör, 2021-02-20, kl 17:00</span>
<button type="button" class="c-button c-button--positive">+</button>
</li>
<li tabindex="0">
<b>Färjestad BK - Leksand</b>
<span>Tor, 2021-02-25, kl 18:00</span>
<button type="button" class="c-button c-button--positive">+</button>
</li>
<li tabindex="0">
<b>Semifinal 1</b>
<span>Lör, 2021-03-27, kl 17:00</span>
<button type="button" class="c-button c-button--positive">+</button>
</li>
<li tabindex="0">
<b>Semifinal 2</b>
<span>Lör, 2021-03-27, kl 17:00</span>
<button type="button" class="c-button c-button--positive">+</button>
</li>
<li tabindex="0">
<b>Semifinal 3</b>
<span>Lör, 2021-03-27, kl 17:00</span>
<button type="button" class="c-button c-button--positive">+</button>
</li>
<li tabindex="0">
<b>CHL match 5</b>
<span>Sön, 2021-04-25, kl 16:00</span>
<button type="button" class="c-button c-button--positive">+</button>
</li>
<li tabindex="0">
<b>CHL match 3</b>
<span>Sön, 2021-04-25, kl 16:00</span>
<button type="button" class="c-button c-button--positive">+</button>
</li>
<li tabindex="0">
<b>CHL match 1</b>
<span>Sön, 2021-04-25, kl 16:00</span>
<button type="button" class="c-button c-button--positive">+</button>
</li>
<li tabindex="0">
<b>CHL match 2</b>
<span>Sön, 2021-04-25, kl 16:00</span>
<button type="button" class="c-button c-button--positive">+</button>
</li>
<li tabindex="0">
<b>CHL match 4</b>
<span>Sön, 2021-04-25, kl 16:00</span>
<button type="button" class="c-button c-button--positive">+</button>
</li>
<li tabindex="0">
<b>FRAMÅT OCH UPPÅT - TILLSAMMANS!</b>
<span>Fre, 2021-04-30, kl 16:00</span>
<button type="button" class="c-button c-button--positive">+</button>
</li>
<li tabindex="0">
<b>Final 1</b>
<span>Fre, 2021-04-30, kl 16:00</span>
<button type="button" class="c-button c-button--positive">+</button>
</li>
<li tabindex="0">
<b>Final 3</b>
<span>Fre, 2021-04-30, kl 16:00</span>
<button type="button" class="c-button c-button--positive">+</button>
</li>
<li tabindex="0">
<b>Final 4</b>
<span>Fre, 2021-04-30, kl 16:00</span>
<button type="button" class="c-button c-button--positive">+</button>
</li>
<li tabindex="0">
<b>Final 2</b>
<span>Fre, 2021-04-30, kl 16:00</span>
<button type="button" class="c-button c-button--positive">+</button>
</li>
</ul>
</div>
<div class="o-grid__col-6">
<ul class="c-multi-select c-multi-select--draggable">
<li tabindex="0" draggable="true">
<b>CHL match 2</b>
<span>Sön, 2021-04-25, kl 16:00</span>
<button type="button" class="c-button c-button--negative">-</button>
</li>
<li tabindex="0" draggable="true">
<b>CHL match 4</b>
<span>Sön, 2021-04-25, kl 16:00</span>
<button type="button" class="c-button c-button--negative">-</button>
</li>
<li tabindex="0" draggable="true">
<b>Final 2</b>
<span>Fre, 2021-04-30, kl 16:00</span>
<button type="button" class="c-button c-button--negative">-</button>
</li>
</ul>
</div>
</div>
Note
.c-note- used for mini messages, form explanations and similar.
If the note is of more serious nature, use
.c-note--warning.
A note about this form field
Warning note about this form field
<p class="c-note">
A note about this form field
</p>
<div class="c-note c-note--warning">
Warning note about this form field
</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).
The component requires the file
components.pager.jsto achieve the actual paging behaviour.
| 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:
<div class="c-pager c-form-control c-form-control--group">
<button type="button" class="c-button c-pager__page c-pager__page--selected">1</button>
<button type="button" class="c-button c-pager__page">2</button>
<button type="button" class="c-button c-pager__page">3</button>
</div> -->
Pill
.c-pillis used as "tags" and "flags" that often are clickable. Use
.c-pill--largefor a larger version. 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
New Updated # Poppis . Tickster
<p>
<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-blue-darkest">
<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>
</p>
<p>
<span class="c-pill c-pill--large u-color-yellow-base">
<span>New</span>
</span>
<span class="c-pill c-pill--large u-color-blue-lighter">
<span>Updated</span>
</span>
<span class="c-pill c-pill--large u-color-blue-darkest">
<span class="c-pill__prefix">#</span>
<span>Poppis</span>
</span>
<span class="c-pill c-pill--large u-color-turquoise-base">
<span class="c-pill__prefix">.</span>
<span>Tickster</span>
</span>
</p>
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).
<div class="c-plus-minus c-form-control" data-plus-minus>
<label for="id33" class="u-hidden--visually">Enter amount</label>
<button type="button" class="c-button c-button--negative" title="Decrease by 1">-</button>
<input class="c-plus-minus__amount" id="id33" type="number" min="-10" max="10" value="0" />
<button type="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 type="button" class="c-button c-button--secondary" title="Decrease by 1">-</button>
<input class="c-plus-minus__amount" id="id35" type="number" min="1" max="5" value="5" />
<button type="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 type="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 type="button" class="c-button c-button--primary" title="Increase by 2">+</button>
</div>
<div class="c-plus-minus c-form-control" data-plus-minus>
<label for="id35c" class="u-hidden--visually">Enter amount (can be zero)</label>
<button type="button" class="c-button c-button--negative" title="Decrease by 2">-</button>
<input class="c-plus-minus__amount" id="id35c" type="number" min="0" step="2" max="20" value="4" />
<button type="button" class="c-button c-button--positive" 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>
Popup
.c-popup- displays a white "popup" (or "popover") with a large drop shadow and a little arrow in one of its corner
<div class="c-popup c-popup--top-right">
<nav class="c-popup__body">
<a href="#" class="c-popup__item c-popup__item--selected">
Allt på Tickster
</a>
<a href="#" class="c-popup__item">
Kundnamn 1
</a>
<a href="#" class="c-popup__item">
Kundnamn 2
</a>
</nav>
</div>
Progress
.c-progress– creates a progress bar with indication of its value.
.c-progress--alt– creates a progress bar with indication of its value.
.c-progress--animated– adds animation.
<div class="o-grid">
<div class="o-grid__col-auto">
<progress class="c-progress c-progress--large" value="70" min="0" max="100"></progress>
</div>
<div class="o-grid__col-auto">
<progress class="c-progress" value="80" min="0" max="100"></progress>
</div>
<div class="o-grid__col-auto">
<progress class="c-progress c-progress--small" value="30" min="0" max="100"></progress>
</div>
<div class="o-grid__col-auto">
<progress class="c-progress c-progress--animated" value="60" min="0" max="100"></progress>
</div>
</div>
<div class="o-grid">
<div class="o-grid__col-auto">
<progress class="c-progress c-progress--alt c-progress--large" value="70" min="0" max="100"></progress>
</div>
<div class="o-grid__col-auto">
<progress class="c-progress c-progress--alt" value="80" min="0" max="100"></progress>
</div>
<div class="o-grid__col-auto">
<progress class="c-progress c-progress--alt c-progress--small" value="30" min="0" max="100"></progress>
</div>
<div class="o-grid__col-auto">
<progress class="c-progress c-progress--alt c-progress--animated" value="60" min="0" max="100"></progress>
</div>
</div>
QR Code
QR codes are always black on white and should never be overwritten by other text or background color, not even when in dark mode.
.c-qrcode- empty wrapper element in which (depending on the method used) a
canvasor
imgelement will be created by JavaScript, using
Kjua(not bundled in
framework-vendor.js!). Make sure to add the required
data-qrcodeattribute with a value that the script will transform to a scannable QR code.
The (optional) attribute
data-qrcode-labelappends a text label (with the class
.c-qrcode__label) after the QR image. Use whenever the text content is important to display in clear text (e.g. voucher codes).
<div class="c-qrcode" data-qrcode="Q12345678"></div>
<div class="c-qrcode" data-qrcode="Q12345678" data-qrcode-label="Q12345678"></div>
<div class="c-qrcode" data-qrcode="https://www.tickster.com/"></div>
Range
.c-range- used for "slider" inputs.
The component requires the file
components.range.jsto achieve the dynamic track width on page load.
<input name="range" class="c-range" type="range" min="0" max="100" step="1" value="20" />
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>
Show more
This is component that comes with a default look of a button on top of a fixed height element that fades out to its parent’s background color (using a transparency mask).
The button has two "inherited"
button
classes (
c-buttonand
c-button--small) and one of its own, that positions it relative to its parent element (
.c-button--showmore).
Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud ea commodo consequat. Ad minim veniam, quis nostrud exercitation commodo consequat.
Ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud ea commodo consequat. Ad minim veniam, quis nostrud exercitation commodo consequat.
Dolor sit amet. Ut enim ad minim veniam, quis nostrudea commodo consequat. Ad minim veniam, quis nostrud exercitation commodo consequat.
Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud ea commodo consequat. Ad minim veniam, quis nostrud exercitation commodo consequat.
Ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud ea commodo consequat. Ad minim veniam, quis nostrud exercitation commodo consequat.
Dolor sit amet. Ut enim ad minim veniam, quis nostrudea commodo consequat. Ad minim veniam, quis nostrud exercitation commodo consequat.
<div class="c-box" data-show-more="Show all">
<p>Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud ea commodo consequat. Ad minim veniam, quis nostrud exercitation
commodo consequat.</p>
<p>Ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud ea commodo consequat. Ad minim veniam, quis nostrud exercitation
commodo consequat.</p>
<p>Dolor sit amet. Ut enim ad minim veniam,
<a href="#show-more">quis nostrud</a>ea commodo consequat. Ad minim veniam, quis nostrud exercitation commodo consequat.</p>
</div>
<div class="c-card">
<div class="c-card__body" data-show-more="Show more">
<p>Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud ea commodo consequat. Ad minim veniam, quis nostrud
exercitation commodo consequat.</p>
<p>Ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud ea commodo consequat. Ad minim veniam, quis nostrud exercitation
commodo consequat.</p>
<p>Dolor sit amet. Ut enim ad minim veniam,
<a href="#show-more">quis nostrud</a>ea commodo consequat. Ad minim veniam, quis nostrud exercitation commodo consequat.</p>
</div>
</div>
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
Third card, with a very much longer title, just to see it fits
Köp
28 apr, Very long Venue name too, 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-thumb c-thumb--round 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-thumb c-thumb--round 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-thumb c-thumb--round 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-thumb c-thumb--round 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-thumb c-thumb--round 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.
Also see Loading, which is a utility class that can be used on other components when loading data.
<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>
Steps
.c-stepsis used as a (vertical, by default) progress indicator of a certain number of known steps.
.c-steps__num(optional) is used as a child wrapper for numbers, letters, etc.
- 1Step number one
- 2Step number two
- 3Step number three
- 4Step number four
- Step number one with more text
- Step number two with more text
- Step number three with more text
- Step number four with more text
- 1Step number one
- 2Step number two
- 3Step number three
- 4Step number four
- Step number one with more text
- Step number two with more text
- Step number three with more text
- Step number four with more text
<ol class="c-steps">
<li>
<span class="c-steps__num">1</span>Step number one</li>
<li class="c-steps__active">
<span class="c-steps__num">2</span>Step number two</li>
<li>
<span class="c-steps__num">3</span>Step number three</li>
<li>
<span class="c-steps__num">4</span>Step number four</li>
</ol>
<ol class="c-steps">
<li>Step number one with more text</li>
<li class="c-steps__active">Step number two with more text</li>
<li>Step number three with more text</li>
<li>Step number four with more text</li>
</ol>
<ol class="c-steps c-steps--horizontal">
<li>
<span class="c-steps__num">1</span>Step number one</li>
<li class="c-steps__active">
<span class="c-steps__num">2</span>Step number two</li>
<li>
<span class="c-steps__num">3</span>Step number three</li>
<li>
<span class="c-steps__num">4</span>Step number four</li>
</ol>
<ol class="c-steps c-steps--horizontal">
<li>Step number one with more text</li>
<li class="c-steps__active">Step number two with more text</li>
<li>Step number three with more text</li>
<li>Step number four with more text</li>
</ol>
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.
<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" data-toggle="switch-info-1">
<input type="checkbox" id="switch1" value="0" />
</span>
</span>
<label for="switch1" class="c-label">Kom ihåg mig?</label>
<div class="c-box c-box--info c-box--small u-hidden" id="switch-info-1">Information</div>
<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--stickyenables sticky table header cells on rows and columns.
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.
| 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. |
| Sticky heading cell | Sticky heading cell | Sticky heading cell |
|---|---|---|
| Sticky table row header 1 | Ut enim ad minim veniam, quis nostrud ea commodo consequat. | Loremipsumdolorsitamet, consectetur or incididunt ut labore et dolore magna aliqua. |
| Sticky table row header 2 | Loremipsumdolorsitametconsectetur adipisicing elit, abore et dolore magna aliqua. | Ad minim veniam, quis nostrud exercitation ullamco laboris equat. |
| Sticky table row header 3 | 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 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 c-table--sticky">
<thead class="c-table__head">
<tr class="c-table__row">
<th scope="col">
<span>Sticky heading cell</span>
</th>
<th scope="col">
<span>Sticky heading cell</span>
</th>
<th scope="col">
<span>Sticky heading cell</span>
</th>
</tr>
</thead>
<tbody class="c-table__body">
<tr class="c-table__row">
<th scope="row">Sticky table row header 1</th>
<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">
<th scope="row">Sticky table row header 2</th>
<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">
<th scope="row">Sticky table row header 3</th>
<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
multiplea "Show all" item is possible, targeting the starting common denomination of the other id:s (e.g. "mytab" instead of "mytab-1").
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" class="c-tabs__tab">Show all</a>
<a href="#multi-tab-1" class="c-tabs__tab c-tabs__tab--selected">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>
</div>
</div>
<div class="o-grid__col-auto" id="multi-tab-1">
<p class="c-box">
<strong>Multi tab panel one.</strong>
</p>
</div>
<div class="o-grid__col-auto" id="multi-tab-2">
<p class="c-box">
<strong>Multi tab panel two.</strong>
</p>
</div>
<div class="o-grid__col-auto" id="multi-tab-3">
<p class="c-box">
<strong>Multi tab panel three.</strong>
</p>
</div>
</div>
<div class="c-tabs">
<a href="#" class="c-tabs__tab c-tabs__tab--filled">Not selected</a>
<a href="#" class="c-tabs__tab c-tabs__tab--filled c-tabs__tab--selected">Selected</a>
<a href="#" class="c-tabs__tab c-tabs__tab--filled">Not selected</a>
<a href="#" class="c-tabs__tab c-tabs__tab--filled">Not selected</a>
</div>
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--round lazyload" alt="" data-src="../temp/thumb2.jpg" />
<img class="c-thumb c-thumb--round c-thumb--large lazyload" alt="" data-src="../temp/thumb2.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.
Thumbnail images can be "lazyloaded" using
data-srcinstead of
srctogether with the additional class
lazyload.
NOTE:Although the last examples below use some extra child elements (like
.PriceCell), please consider these exceptions from the rule (only used in the Webshop) and try to use
__headand
__bodyelements only, as in the first examples.
Ett evenemang med lång titel kommer här
25 - 28 maj, Braskereidfoss
Köp
Kapten Röd turné: Hundralappen!
25 - 28 maj, Braskereidfoss
Köp
Kapten Röd turné: Hundralappen!
Lorem ipsum dolor sit amet
25 - 28 maj, Braskereidfoss
Studerande 215 SEK
Giltig studentlegitimation krävs
Fre
25
Feb
2022
kl 19:30
- Kulturhuset Spira, Jönköping
- Dörrarna öppnar kl 19:30
- Evenemanget startar kl 19:30
This event is closed
299,00 kr
<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-thumb c-thumb--round 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/thumb1.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/thumb1.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>
<button type="button" class="c-tile">
<div 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>
</div>
<div class="c-tile__body">
<span class="c-tile__label">25 - 28 maj, Braskereidfoss</span>
</div>
</button>
<div class="c-tile">
<div class="c-tile__head">
<div class="c-tile__image">
<img class="c-thumb c-thumb--square lazyload" data-src="../temp/thumb2.jpg" alt="">
</div>
<h4 class="c-tile__title">Studerande
<span class="u-font--thinner">215 SEK</span>
</h4>
</div>
<div class="c-tile__body">
<div class="c-plus-minus c-form-control" data-plus-minus="allow-zero">
<label for="find-seats-gfs-778693" class="u-hidden--visually">Välj antal</label>
<button class="c-button c-button--negative" title="Minska med 1">-</button>
<input class="c-plus-minus__amount select-find-seats-gfs" id="find-seats-gfs-778693" type="number" min="0"
max="10" step="1" value="1">
<button class="c-button c-button--primary c-button--positive" title="Öka med 1">+</button>
</div>
</div>
<div class="c-tile__foot">
<div class="short-desc u-font--smaller">Giltig studentlegitimation krävs</div>
</div>
</div>
<article id="ERC_9DPELLRPRRZWEPX" class="paginate c-tile" data-startdate="2022-02-25">
<div class="c-tile__image">
<input type="image" name="ctl00$mainContent$rptEvents$ctl00$btnEventImg" id="ctl00_mainContent_rptEvents_ctl00_btnEventImg"
class="c-thumb c-thumb--large" src="../temp/thumb1.jpg" style="border-width:0px;" />
</div>
<div id="ctl00_mainContent_rptEvents_ctl00_event_date_info" class="c-tile__date">
<div class="c-date">
<span class="c-date__weekday">Fre</span>
<span class="c-date__day">25</span>
<span class="c-date__month">Feb</span>
<span class="c-date__year">2022</span>
<span class="c-date__time">kl 19:30</span>
</div>
</div>
<div class="c-tile__head c-tile__head--vertical">
<h2 class="event-name c-tile__title">HENRIK FEXEUS ÄR ATT LITA PÅ</h2>
<p class="event-venue">Konsertsalen i Spira, Jönköping</p>
<a href="#extraInfo_9DPELLRPRRZWEPX" class="toggle-extra-info c-toggle u-font--smaller " data-toggle="extraInfo_9DPELLRPRRZWEPX">Mer information</a>
</div>
<div class="c-tile__body">
<a id="ctl00_mainContent_rptEvents_ctl00_btnBuy" class="button c-button c-button--primary" href="#">Köp</a>
</div>
<div class="c-tile__foot u-hidden" id="extraInfo_9DPELLRPRRZWEPX">
<div class="c-list c-list--sparse">
<ul>
<li class="venue-address">Kulturhuset Spira, Jönköping</li>
<li class="event-doors-open">Dörrarna öppnar kl 19:30</li>
<li class="event-starts">Evenemanget startar kl 19:30</li>
</ul>
</div>
<div class="c-box c-box--small c-box--warning" id="closedInfo_9DPELLRPRRZWEPX">
<h3>This event is closed</h3>
</div>
</div>
</article>
<article id="ProductsTableRow778702" class="c-tile">
<a href="/sv/v9g4k33rln5c3eg/9dpellrprrzwepx/productdetails?gfsid=778702" data-modal class="c-tile__image">
<img class="c-thumb c-thumb--square" src="../temp/thumb2.jpg" alt="Föreställningsmiddag - Före">
</a>
<div class="c-tile__head c-tile__head--vertical">
<div class="ProductsNameCellProductName c-tile__title" id="ProductName778702">
Föreställningsmiddag - Före
</div>
<p class="ProductsNameCellProductDescription">
Serveras endast innan föreställningen
</p>
<div class="ProductsNameCellProductDescriptionMoreInfo">
<a href="/sv/v9g4k33rln5c3eg/9dpellrprrzwepx/productdetails?gfsid=778702" class="u-font--smaller" data-modal>Mer information</a>
</div>
</div>
<div class="u-font--medium PriceCell">
299,00 kr
</div>
<div class="c-tile__body">
<div class="QuantityCell c-form-control">
<label for="quantity778702" class="u-hidden--visually">Välj antal</label>
<select id="quantity778702" name="quantity778702">
<option value="0" selected="selected">Välj</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<input type="hidden" value="0" class="gfsQuantity">
</div>
</div>
</article>
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 (on triggers other than radio buttons) 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.
<div>
<a href="#" class="c-toggle" data-toggle="target1">Show box</a>
<div class="c-box u-hidden" id="target1">Target element 1</div>
</div>
<div>
<button type="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 type="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>
<fieldset>
<legend class="c-legend">Radios</legend>
<div class="c-form-control">
<input type="radio" name="radio-toggle" id="radio1" data-toggle="radio-1" checked>
<label for="radio1" class="c-label">Radio 1</label>
<div class="u-margin-left--large c-box c-box--info" id="radio-1">Radio 1 info</div>
</div>
<div class="c-form-control">
<input type="radio" name="radio-toggle" id="radio2" data-toggle="radio-2">
<label for="radio2" class="c-label">Radio 2</label>
<div class="u-margin-left--large c-box c-box--info" id="radio-2">Radio 2 info</div>
</div>
<div class="c-form-control">
<input type="radio" name="radio-toggle" id="radio3" data-toggle="radio-3">
<label for="radio3" class="c-label">Radio 3</label>
<div class="u-margin-left--large c-box c-box--info" id="radio-3">Radio 3 info</div>
</div>
</fieldset>
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/2G3eSwHmtLs" frameborder="0" title="YouTube video" allowfullscreen>
<a href="https://www.youtube.com/embed/2G3eSwHmtLs">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.
Box-shadow
.u-box-shadow--[none|small|medium|large|xlarge]-- adds/removes a box-shadow of a certain size
box-shadow--none
box-shadow--small
box-shadow--medium
box-shadow--large
box-shadow--xlarge
<div class="c-box u-margin-bottom--large u-box-shadow--none">box-shadow--none</div>
<div class="c-box u-margin-bottom--large u-box-shadow--small">box-shadow--small</div>
<div class="c-box u-margin-bottom--large u-box-shadow--medium">box-shadow--medium</div>
<div class="c-box u-margin-bottom--large u-box-shadow--large">box-shadow--large</div>
<div class="c-box u-margin-bottom--large u-box-shadow--xlarge">box-shadow--xlarge</div>
Color
.u-color-[color-name]can be used to apply a pre-defined
background color
to a Component.
Float content
.u-float--right– floats an element to the right of the next element.
.u-float--left– floats an element to the left of the next element.
Ticket sent to:
anton.andreasson@tickster.com
<div>
<svg width="24" height="24" class="u-float--left">
<use xlink:href="../ui-framework/symbol/svg/sprite.symbol.svg#paperplane"></use>
</svg>
<div>
Ticket sent to:
<div class="u-font--mono">anton.andreasson@tickster.com</div>
</div>
</div>
Font utilities
.u-font--(largest|larger|large)- enlarges any element to the l, xl or xxl global font sizes.
.u-font--(small|smaller|smallest)- shrinks any element to the s, xs or xxs global font sizes (all these defined as variables in
settings.global.css).
.u-font--(thinnest|thinner|regular|bolder|boldest)- changes font weight to 200, 300, 400, 500 or 700.
.u-font--mono- changes font variant to monospaced.
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--regular
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>
<h3 class="u-font--thinner">u-font--thinner</h3>
<h4 class="u-font--regular">u-font--regular</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>
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>
Margin
.u-margin--[small|medium|large]-- adds small to large margins around any element.
.u-margin-[top|right|bottom|left]--[small|medium|large]-- adds top/right/bottom/left margin on any element.
.u-margin-[top|right|bottom|left]--none-- removes margins on any element.
.u-margin-[right|left]--auto-- adds left/right auto margin on any element (e.g. to horizontally align the first/last flexbox element within its parent).
top--none
top--small
top--medium
top--large
right--large
right--medium
right--small
right--none
bottom--large
bottom--medium
bottom--small
bottom--none
left--large
left--medium
left--small
left--none
<div class="u-margin-top--none">top--none</div>
<div class="u-margin-top--small">top--small</div>
<div class="u-margin-top--medium">top--medium</div>
<div class="u-margin-top--large">top--large</div>
<div class="u-margin-right--large">right--large</div>
<div class="u-margin-right--medium">right--medium</div>
<div class="u-margin-right--small">right--small</div>
<div class="u-margin-right--none">right--none</div>
<div class="u-margin-bottom--large">bottom--large</div>
<div class="u-margin-bottom--medium">bottom--medium</div>
<div class="u-margin-bottom--small">bottom--small</div>
<div class="u-margin-bottom--none">bottom--none</div>
<div class="u-margin-left--large">left--large</div>
<div class="u-margin-left--medium">left--medium</div>
<div class="u-margin-left--small">left--small</div>
<div class="u-margin-left--none">left--none</div>
Overflow content
.u-overflow--[visible|auto|hidden]– crops or displays overflow content, with or without scroll
visiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisible
autoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoauto
hiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhidden
<p class="u-overflow--visible">visiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisiblevisible</p>
<p class="u-overflow--auto">autoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoautoauto</p>
<p class="u-overflow--hidden">hiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhiddenhidden</p>
Position content
.u-position--[top|bottom]-[right|left]– positions an element to the top/bottom right/left corner of its parent element.
.u-position--[right|left]– positions an element to the right/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--sticky– positions an element sticky” 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--(wrap|nowrap)– breaks long words vs keeps all text on one line.
.u-text--[color-name]– applies a pre-defined
color.
.u-text--no-underline– removes any underline (i.e. text-decoration) from the element.
u-text--left
u-text--center
u-text--right
u-text--wrapu-text--wrapu-text--wrapu-text--wrapu-text--wrapu-text--wrapu-text--wrap
u-text--nowrap u-text--nowrap u-text--nowrap u-text--nowrap u-text--nowrap u-text--nowrap u-text--nowrap
u-text--no-underline<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--wrap">u-text--wrapu-text--wrapu-text--wrapu-text--wrapu-text--wrapu-text--wrapu-text--wrap</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>
<a href="#text-utilities" class="u-text--no-underline">u-text--no-underline</a>
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.