Skip to main content

Header level 3

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Components

Atoms

Buttons


Button-top

button.button-top > text


button.button-top > i.material-icons + text


a.button-top.active > i.material-icons + text

personAction


Button-sub

button.button-top > text


button.button-sub > i.material-icons + text


a.button-sub > i.material-icons + text

personAction


Button-icon

button.button-icon > i.material-icons


a.button-icon.disabled > i.material-icons

person


Button-tile

button.button-tile > i.material-icons + text


button.button-tile > i.material-icons + text


Button-banner

button.button-banner > i.material-icons + text


Button-inline

button.button-inline[.attention] > i.material-icons


Button-link

button.button-link > text + i.material-icons


Forms


Form-input-text

input[text].form-input-text


input[text].form-input-text.plain-text


Form-input-number

input[text].form-input-number


Form-input-password

input[text].form-input-number


Form-input-range

input[text].form-input-range


Form-select

select.form-select > option


Form-textarea

textarea.form-textarea


Form-checkbox


div.form-checkbox > label > input[checkbox] + span.text


div.form-checkbox > label > input[checkbox] + span.text.no-text


Form-radio


div.form-radio > label > input[radio] + span.text


div.form-radio > label > input[radio] + span.text.no-text


Label


label.label


label.label.mandatory


label.label > span.description + text


Validation


span.validation

Validation message


span.validation.mandatory

Mandatory validation message


span.validation.optional

Optional validation message


Popover


data-toggle="popover" (title="Popover title") data-content="Popover content text" data-trigger="hover" (data-placement="top"/"left"/"right"/"bottom")


Molecules


Pagination


ul.pagination-list > button-icon/button-sub


Toolbar


div.toolbar > div.button-group > button-top/button-sub

clearCancel


div.toolbar > (div.button-group > button-top/button-sub) > (progress-indicator > current-progress[width: 50%] > (text)) > (div.button-group > button-top/button-sub)

personAction
Step 1/2
checkComplete wizard


div.toolbar > (div.button-group > button-top/button-sub) > (div.button-group > button-top/button-sub) > (div.button-group > button-top/button-sub)

personAction
personAction
arrow_forwardNext

Form-group

div.form-group > label + form-input-text/form-select


div.form-group > label + form-input-text/form-select + i.material-icons

person


div.form-group > label + p

Paragraph

div.form-group > label + form-input-text.plain-text


div.form-group > label + form-input-text/form-select + validation

Mandatory validation message


div.form-group > label + flex-line > form-input-text/form-select + button-sub/button-icon


div.form-group > label + flex-line > flex-group > (form-input-text/form-select + validation) + button-sub/button-icon

Validation message


div.form-group > label + form-textarea


div.form-group.checkbox-radio > label + checkbox + validation

Optional validation message

Form-fieldset

Fieldset headingAdditional information needed to use this form

File-upload

File upload


div.form-group > label + div.flex-line > (div.file-upload > (span.button > i.material-icons + text ) > input[file]) + input.form-input-text

attachmentChoose file


div.file-upload multiple > input[file]) + list-group

attachmentChoose files


div.file-upload multiple > input[file]) + list-group

Choose files

List-group


Table-grid


table.table-grid > (thead > tr > th) > (tbody > tr > td) > (tfoot > tr > td)

Static table header cell
Table data cell Table data cell Table data cell
Table data cell Table data cell Table data cell
Table data cell Table data cell Table data cell
Table data cell Table data cell Table data cell

Step-visualization


ul.step-visualization > li(.active) + a


ul.step-visualization.full-width > li(.active) + a


Layout-group-top

Heading level 2

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Layout-group-sub

Heading level 3

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Fieldset headingAdditional information needed to use this form
clearCancel

Attention-group

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Side panel

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.


Modal


Maps

Inline map

Sök i kartan


Control panel


Message panel


Animations

Linear animation

Saving...

Circle animation

Loading...

Footer