Utfällbart stycke

Här kan du läsa med information om utfällbart stycke som webbkomponent.

Medium

Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.

Enkelt beskrivet ska du följa Web Content Accessibility Guidelines (WCAG) 2.1 på AA nivå. Det betyder att du ska följa de 50 kriterierna som är märkta med A och med AA. Det ska också finnas en tillgänglighetsredogörelse där vi t.ex. beskriver för användarna av våra digitala tjänster om någon information inte är tillgänglig. Det ska också finnas en kommentarsfunktion där användarna ska kunna påpeka brister i tillgängligheten.

<div aria-label="accordion Control Group links" class="c-accordion-group">
<jv-accordion expanded="true" heading="Använda Styleguiden" heading-level="4">
<p>
Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala
tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen
mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.
</p>
</jv-accordion>
<jv-accordion heading="Tillgänglighetskraven" heading-level="4">
<p>
Enkelt beskrivet ska du följa Web Content Accessibility Guidelines (WCAG) 2.1 på AA nivå. Det betyder
att du ska följa de 50 kriterierna som är märkta med A och med AA. Det ska också finnas en
tillgänglighetsredogörelse där vi t.ex. beskriver för användarna av våra digitala tjänster om någon
information inte är tillgänglig. Det ska också finnas en kommentarsfunktion där användarna ska kunna
påpeka brister i tillgängligheten.
</p>
</jv-accordion>
</div>

Small

Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.

Enkelt beskrivet ska du följa Web Content Accessibility Guidelines (WCAG) 2.1 på AA nivå. Det betyder att du ska följa de 50 kriterierna som är märkta med A och med AA. Det ska också finnas en tillgänglighetsredogörelse där vi t.ex. beskriver för användarna av våra digitala tjänster om någon information inte är tillgänglig. Det ska också finnas en kommentarsfunktion där användarna ska kunna påpeka brister i tillgängligheten.

<div aria-label="accordion Control Group links" class="c-accordion-group">
<jv-accordion component-size="small" heading="Använda Styleguiden" heading-level="4">
<p>
Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala
tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen
mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.
</p>
</jv-accordion>
<jv-accordion component-size="small" heading="Tillgänglighetskraven" heading-level="4">
<p>
Enkelt beskrivet ska du följa Web Content Accessibility Guidelines (WCAG) 2.1 på AA nivå. Det betyder
att du ska följa de 50 kriterierna som är märkta med A och med AA. Det ska också finnas en
tillgänglighetsredogörelse där vi t.ex. beskriver för användarna av våra digitala tjänster om någon
information inte är tillgänglig. Det ska också finnas en kommentarsfunktion där användarna ska kunna
påpeka brister i tillgängligheten.
</p>
</jv-accordion>
</div>

Medium i ett formulär

<form>
<div aria-label="accordion Control Group links" class="c-accordion-group">
<jv-accordion heading="Stycke ett" heading-level="4">
<div>
<div class="c-space--m"></div>
<jv-dynamisk-input error-text="Fyll i förnamnet." help-text="Lite text med beskrivning för hur du ska besvara denna fråga och för att testa hur en lång beskrivning
ser ut tillsammans med ett felmeddelande ifall man fyllt i fel eller inte alls." label="Förnamn">
<input autocomplete="given-name" id="input-text-helptext-dynamisk-medium" name="text2" required="" type="text">
</jv-dynamisk-input>

<jv-multi-select label="Vilka länder har du besökt det senaste året?" options="['Norge',
'Danmark', 'Finland', 'Tyskland', 'Frankrike', 'Ryssland', 'Polen',
'Italien', 'Storbritannien', 'Spanien', 'Ukraina', 'Nederländerna',
'Belgien', 'Grekland', 'Irland', 'Portugal','Island']" required="true">
</jv-multi-select>
</div>
</jv-accordion>

<jv-accordion heading="Stycke två" heading-level="4">
<div>
<div class="c-space--m"></div>
<jv-dynamisk-input label="Välj din favoritfrukt">
<select id="select-accordion-form-2">
<option></option>
<option>Ananas</option>
<option>Apelsin</option>
<option>Banan</option>
<option>Blodapelsin</option>
<option>Clementin</option>
<option>Dadel</option>
<option>Kiwifrukt</option>
<option>Päron</option>
<option>Äpple</option>
</select>
</jv-dynamisk-input>
</div>
</jv-accordion>
</div>
</form>

Small i ett formulär

<form>
<div aria-label="accordion Control Group links" class="c-accordion-group">
<jv-accordion component-size="small" heading="Stycke ett" heading-level="4">
<div>
<div class="c-space--m"></div>
<jv-dynamisk-input error-text="Fyll i förnamnet." helptext="Lite text med beskrivning för hur du ska besvara denna fråga och för att testa hur en lång beskrivning
ser ut tillsammans med ett felmeddelande ifall man fyllt i fel eller inte alls." input-ref="input" label="Förnamn" size="small">
<input autocomplete="given-name" id="input-text-helptext-dynamisk-small_2" name="text2" required="" type="text">
</jv-dynamisk-input>
<jv-multi-select label="Vilka länder har du besökt det senaste året?" options="['Norge',
'Danmark', 'Finland', 'Tyskland', 'Frankrike', 'Ryssland', 'Polen',
'Italien', 'Storbritannien', 'Spanien', 'Ukraina', 'Nederländerna',
'Belgien', 'Grekland', 'Irland', 'Portugal','Island']" required="true" size="small">
</jv-multi-select>
</div>
</jv-accordion>

<jv-accordion component-size="small" heading="Stycke två" heading-level="4">
<div>
<div class="c-space--m"></div>
<jv-dynamisk-input label="Välj din favoritfrukt" size="small">
<select id="select-accordion-form-small-2">
<option></option>
<option>Ananas</option>
<option>Apelsin</option>
<option>Banan</option>
<option>Blodapelsin</option>
<option>Clementin</option>
<option>Dadel</option>
<option>Kiwifrukt</option>
<option>Päron</option>
<option>Äpple</option>
</select>
</jv-dynamisk-input>
<button class="c-btn--small">Skicka in</button>
</div>
</jv-accordion>
</div>
</form>

Knappar i huvudet

Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.

Enkelt beskrivet ska du följa Web Content Accessibility Guidelines (WCAG) 2.1 på AA nivå. Det betyder att du ska följa de 50 kriterierna som är märkta med A och med AA. Det ska också finnas en tillgänglighetsredogörelse där vi t.ex. beskriver för användarna av våra digitala tjänster om någon information inte är tillgänglig. Det ska också finnas en kommentarsfunktion där användarna ska kunna påpeka brister i tillgängligheten.

<div aria-label="accordion Control Group links" class="c-accordion-group">
<jv-accordion heading="Stycke ett" heading-level="4" title-content-ref="title_btn">
<button class="c-btn--medium btn-class" slot="title_btn">
<span class="sjv-i-skrap ikon-class"></span>Ta bort
</button>
<p>
Styleguiden innehåller både färdiga komponenter som går att återanvända i flera typer av digitala
tjänster samt riktlinjer för språk och grafisk design. Genom att använda styleguiden blir utvecklingen
mer kostnadseffektiv och våra digitala tjänster blir mer tillgängliga och enhetliga.
</p>
</jv-accordion>
<jv-accordion heading="Stycke två" heading-level="4" title-content-ref="title_btn">
<button class="c-btn--medium btn-class" slot="title_btn">
<span class="sjv-i-skrap ikon-class"></span>Ta bort
</button>
<p>
Enkelt beskrivet ska du följa Web Content Accessibility Guidelines (WCAG) 2.1 på AA nivå. Det betyder
att du ska följa de 50 kriterierna som är märkta med A och med AA. Det ska också finnas en
tillgänglighetsredogörelse där vi t.ex. beskriver för användarna av våra digitala tjänster om någon
information inte är tillgänglig. Det ska också finnas en kommentarsfunktion där användarna ska kunna
påpeka brister i tillgängligheten.
</p>
</jv-accordion>
</div>

Äldre version av utfällbart stycke

Här hittar du den äldre versionen av utfällbart stycke