Jumbotron

Nullam eu blandit ante. Quisque lacinia lorem sit amet dolor auctor, a convallis urna sollicitudin.

Knappar

Ikonknappar

Kollapsande ikonknappar

Kollapsar vid stor skärm Kollapsar vid medium skärm Kollapsar vid liten skärm Kollapsar vid extra liten skärm Kollapsar under extra liten skärm

Länk-knappar

Standard Primär Primär ljus Succé Info Varning Fara Länk

Standard Primär Primär ljus Succé Info Varning Fara Länk

Ikonlänk-knappar

Nästa Föregående Bifoga fil

Kollapsande ikonlänk-knappar

Kollapsar vid stor skärm Kollapsar vid medium skärm Kollapsar vid liten skärm Kollapsar vid extra liten skärm Kollapsar under extra liten skärm

Här kan du läsa mer om knappar och länkar: Webbmanual stockholm, länkar och knappar (Öppnas i nytt fönster)

Tabeller

Tabell med ränder
Kategori Information
Senast ändrad 2020-03-12
Ärendetyp Ansökan
Information Consectetur sequi quasi pariatur dolorem quas nihil autem ipsa commodi dolores delectus atque, reprehenderit at cumque magni esse velit illum.
E-tjänst Kulturskolan
Status Pågående
Tabell hover effekt
Kategori Information
Senast ändrad 2020-03-12
Ärendetyp Ansökan
Information Consectetur sequi quasi pariatur dolorem quas nihil autem ipsa commodi dolores delectus atque, reprehenderit at cumque magni esse velit illum.
E-tjänst Kulturskolan
Status Pågående

Tumnaglar

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera

Taggar

Standard Primär Primär ljus Succé Info Varning Fara

Notiser

Här kan du läsa mer om notiser: Webbmanual stockholm, sidhuvud (Öppnas i nytt fönster)

Dropdownmenyer

Här kan du läsa mer om dropdownmenyer: Webbmanual stockholm, sidhuvud (Öppnas i nytt fönster)

Navigering

Här kan du läsa mer om navigering: Webbmanual stockholm, sidhuvud (Öppnas i nytt fönster)

Toppnavigering

Här kan du läsa mer om toppnavigering: Webbmanual stockholm, sidhuvud (Öppnas i nytt fönster)

Accordion

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Alert-rutor

Succé

Succé Bra jobbat! Du har genomfört uppgiften utan fel.

Information

Information OBS! Det här är relevant information för just dig.

Varning

Varning Varning! Det här kan innebära ett problem.

Fel

Fel Fel! Någonting gick inte som det skulle.

Progress bar

60% Complete

Listgrupper

Vanlig listgrupp

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Listgrupp, valbara länkar

Listgrupp, anpassat innehåll

  • List group item heading

    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

  • List group item heading

    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

  • List group item heading

    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Paneler

Paneltitel

Panelinnehåll

Paneltitel

Panelinnehåll

Paneltitel

Panelinnehåll

Paneltitel

Panelinnehåll

Paneltitel

Panelinnehåll

Paneltitel

Panelinnehåll

Infoplatta

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Här finns ett till exempel på hur en infoplatta kan se ut: Webbmanual stockholm, betona innehåll (Öppnas i nytt fönster)

Bildspel

Stockholms stad ikoner

Här kan du läsa mer om ikoner: Webbmanual stockholm, grafisk profil (Öppnas i nytt fönster)

Typografi

Här kan du läsa mer om typografi: Webbmanual stockholm, typografi (Öppnas i nytt fönster)

Formulär

Olika typer av inputfält

Ange e-post i formatet fornamn.efternamn@epost.se

Hjälpinformation för detta fält
Checkboxar
Radioknappar
Fält med validering

Ange i formatet år (4 siffror), månad (2 siffror), dag (2 siffror) - fyra sista siffror

Ange e-post i formatet exempel@epost.se

Minst 8 tecken
Grupperade checkboxar med minst 1 obligatoriskt val

Datum & tid

Datumväljare

Ange ett datum i formatet år (4 siffror), månad (2 siffror), dag (2 siffror)

Ange ett datum i formatet år (4 siffror), månad (2 siffror), dag (2 siffror)

Datumväljare med statisk position

Ange ett datum i formatet År (4 siffror), Månad (2 siffror), Dag (2 siffror)

Tidsväljare

Välj klockslag
  • Du behöver välja ett svar på klockslag.

Skjutreglage (input range)

Autocomplete

Skriv sökning och när resultatet är tillgängligt använd piltangenterna upp och ner för att bläddra i listan och enter för att välja.

    Filuppladdning

    Enkel

    Flera filer

    Dra och släpp

    Paginering

    Loader

    Sidan laddar

    Popovers

    Tooltips

         

    Visa endast en del av texten

    Maecenas congue leo gravida, rhoncus nulla quis, porttitor nunc. Integer a nulla sapien. Etiam scelerisque purus tellus. ... Nam ultrices a lorem sit amet lacinia. Donec laoreet neque sodales luctus venenatis. Nunc tincidunt dolor semper orci lacinia porta. Aenean porta molestie odio, laoreet varius turpis porttitor eget. Interdum et malesuada fames ac ante ipsum primis in faucibus.