Buttons
Add the class btn to links or buttons to add the base styling. Add one of the following modifier classes to add color to it.
Click me! | |
Click me! | btn--success |
Click me! | btn--success--outline |
Click me! | btn--info |
Click me! | btn--info--outline |
Click me! | btn--warning |
Click me! | btn--warning--outline |
Click me! | btn--danger |
Click me! | btn--danger--outline |
Click me! | btn--skolon |
Go back | btn--go-back |
Click me! | btn--grey |
Click me! | btn--black |
And add one of the following modifier classes to change the size or look of the button:
Click me! | btn--wide |
Click me! | btn--cta |
Click me! | btn--big |
Click me! | btn--small |
Click me! | btn--pill |
Section 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero at commodi fugit facere, ratione aliquam mollitia consequuntur ab magnam rerum totam necessitatibus nostrum eligendi, animi esse debitis, aperiam odio quam!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero at commodi fugit facere, ratione aliquam mollitia consequuntur ab magnam rerum totam necessitatibus nostrum eligendi, animi esse debitis, aperiam odio quam!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero at commodi fugit facere, ratione aliquam mollitia consequuntur ab magnam rerum totam necessitatibus nostrum eligendi, animi esse debitis, aperiam odio quam!
Section 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero at commodi fugit facere, ratione aliquam mollitia consequuntur ab magnam rerum totam necessitatibus nostrum eligendi, animi esse debitis, aperiam odio quam!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero at commodi fugit facere, ratione aliquam mollitia consequuntur ab magnam rerum totam necessitatibus nostrum eligendi, animi esse debitis, aperiam odio quam!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero at commodi fugit facere, ratione aliquam mollitia consequuntur ab magnam rerum totam necessitatibus nostrum eligendi, animi esse debitis, aperiam odio quam!
Forms
TODO
Inputs
TODO about form-item container, labels, descriptions.
Fieldsets
A fieldset can be used as a wrapper to one or more inputs, and can be used for grouping them together.
Grid
The grid automatically fits all its items into a grid where all items will get a fixed width and same height across all items.
Add the class grid to a container and put the items inside it.
Cards
A card is a small box which stands out from other content. It can use a number of submodules to add content to it. Add the class card to a div-element.
TODO Describe submodules and modifiers.
Aspect Ratio
Ensures that the element adheres to its aspect ratio.
Available in the common package.
Fixed aspect ratios (only CSS)
This works on container elements. Add the class aspect-ratio followed by one of these modifier classes:
1:1 | aspect-ratio--1-1 |
1:2 | aspect-ratio--1-2 |
2:1 | aspect-ratio--2-1 |
4:3 | aspect-ratio--4-3 |
3:4 | aspect-ratio--3-4 |
16:9 | aspect-ratio--16-9 |
9:16 | aspect-ratio--9-16 |
Use the class aspect-ratio__content on the element inside to make it fill upp the container, which can be useful for embedding videos.
You don't need to use the aspect-ratio__content class, and if you don't, the container will grow it the content is to large for it.
Any aspect ratio (uses JS)
This works on most containers, images, videos, and more. Add the class js-aspect-ratio and the attribute data-aspect-ratio="4:3". You can use any aspect ratio you want as long as it consists of integers.
Alerts
Pagination
Only available in the admin package at the moment.