Komponenter
Alla formulär och interaktiva objekt utöver navigering och sajtfot kännetecknas av den blå färgen. Alla fält har runda hörn med en radie på 10 px.
Formulärfält states: Inactive/active/disabled
![Formulärfält i tre olika states](/globalassets/1177/nationell/media/riktlinjer-och-material/varumarkesmanual/tillampningar/digitala-tjanster/23-formularfalt-states.png?saved=2021-05-27+02:18&preset=low-res)
Validering och felmeddelande
![Formulärfält validering samt felmeddelande](/globalassets/1177/nationell/media/riktlinjer-och-material/varumarkesmanual/tillampningar/digitala-tjanster/24-formularfalt-validering-felmeddelande.png?saved=2021-05-27+02:18&preset=low-res)
Längre textfält - meddelande
![Formulärfält 1177.se](/globalassets/1177/nationell/media/riktlinjer-och-material/varumarkesmanual/tillampningar/digitala-tjanster/25-formularfalt-langre.png?saved=2021-05-27+02:18&preset=low-res)
Dropmeny
Dropmenyn följer samma bakgrundsfärg, ramfärg och hörnrundning som formulär.
Dropdown: Inactive, active, disabled
![Dropmeny olika states 1177.se](/globalassets/1177/nationell/media/riktlinjer-och-material/varumarkesmanual/tillampningar/digitala-tjanster/26-dropdown.png?saved=2021-05-27+02:18&preset=low-res)
Knappar
Det finns två olika typer av knappar: primära och sekundära. De två alternativen kan användas för att vikta knappvalen mot varandra. Den primära används t.ex. för det valet som är vanligast eller du helst vill att användaren ska klicka på.
Primär knapp: Inactive, active, sent, disabled
![Primär knapp olika states 1177.se](/globalassets/1177/nationell/media/riktlinjer-och-material/varumarkesmanual/tillampningar/digitala-tjanster/27-knappar-primar.png?saved=2021-05-27+02:18&preset=low-res)
Sekundär knapp: Inactive, active, sent, disabled
![Sekundär knapp olika states 1177.se](/globalassets/1177/nationell/media/riktlinjer-och-material/varumarkesmanual/tillampningar/digitala-tjanster/28-knappar-sekundar.png?saved=2021-05-27+02:18&preset=low-res)
Checkboxar och radioknappar
Checkboxar: vald, ej vald
![Checkboxar olika states 1177.se](/globalassets/1177/nationell/media/riktlinjer-och-material/varumarkesmanual/tillampningar/digitala-tjanster/29-checkboxar.png?saved=2021-05-27+02:18&preset=low-res)
Radioknappar: vald, ej vald
![Radioknappar olika states 1177.se](/globalassets/1177/nationell/media/riktlinjer-och-material/varumarkesmanual/tillampningar/digitala-tjanster/30-radioknappar.png?saved=2021-05-27+02:18&preset=low-res)
Tillfälliga meddelanden
Tillfälliga meddelanden är viktiga informationsnotiser som visas under en kort tid. Gul bakgrund med grå alert-symbol.
![Tillfälliga meddelanden 1177.se](/globalassets/1177/nationell/media/riktlinjer-och-material/varumarkesmanual/tillampningar/digitala-tjanster/31-tillfalligt-meddelande.png?saved=2021-05-27+02:18&preset=low-res)
Spec för driftmeddelanden kommer inom kort.
Faktarutor
Faktarutor använder röd färgskala: ljusröd bakgrundsfärg och klarröd list.
![Faktaruta 1177.se](/globalassets/1177/nationell/media/riktlinjer-och-material/varumarkesmanual/tillampningar/digitala-tjanster/32-faktaruta.png?saved=2021-05-27+02:18&preset=low-res)
Tabeller
Tabeller använder röd färgskala. Tabeller finns i två format som väljs beroende på mängden innehåll. Om antal kolumner/mängd innehåll inte ryms i den synliga ytan används en scrollist för att scrolla i sidled. Sidans kant tonas då ut för att visa att det finns mer innehåll. (Se mobil).
Desktop
![Stor utfallande tabell 1177.se](/globalassets/1177/nationell/media/riktlinjer-och-material/varumarkesmanual/tillampningar/digitala-tjanster/34-tabell-small.png?saved=2021-05-27+02:18&preset=low-res)
Mobil
![Tabell mobil 1177.se](/globalassets/1177/nationell/media/riktlinjer-och-material/varumarkesmanual/tillampningar/digitala-tjanster/35-tabell-mobil.png?saved=2021-05-27+02:18&preset=low-res)
Länklistor
Länklistor finns i olika varianter: automatisk länklista, manuell länklista samt Hitta mottagning. Dokumenttyper i listan visas med respektive dokumentikon.
Automatisk länklista
![Automatisk länklista artikelsida dator 1177.se](/globalassets/1177/nationell/media/riktlinjer-och-material/varumarkesmanual/tillampningar/digitala-tjanster/50-listbehallare-artikelsida.jpg?saved=2021-05-27+02:17&preset=low-res)
![Automatisk länklista samlingssida dator 1177.se](/globalassets/1177/nationell/media/riktlinjer-och-material/varumarkesmanual/tillampningar/digitala-tjanster/51-listbehallare-samlingssida.jpg?saved=2021-05-27+02:17&preset=low-res)
![Automatisk länklista mobil](/globalassets/1177/nationell/media/riktlinjer-och-material/varumarkesmanual/tillampningar/digitala-tjanster/52-listbehallare-mobil.jpg?saved=2021-05-27+02:17&preset=low-res)
Manuell länklista
![](/globalassets/1177/nationell/media/riktlinjer-och-material/varumarkesmanual/tillampningar/digitala-tjanster/37-lanklista.png?saved=2021-05-27+02:18&preset=low-res)
Hitta mottagning
![Länklista Hitta mottagning](/globalassets/1177/nationell/media/riktlinjer-och-material/varumarkesmanual/tillampningar/digitala-tjanster/36-lanklista-hitta-mottagning.png?saved=2021-05-27+02:18&preset=low-res)