Du kan använda navigeringskort när du vill underlätta navigeringen för användaren genom att visa mycket information om vart navigeringen leder.
Navigeringsortet kan innehålla olika delar och komponenter beroende på behov. Allt innehåll i navigeringskortet ska leda till samma ställe.
Navigeringskortet ska alltid innehålla en
Navigeringskortet kan även innehålla
Komponenten driftsattes första gången i version 16.0.20.
Bredden på ett kort är satt till 100%. Bredden på kortet styrs av bredden på "behållaren" som kortet befinner sig i.
Egenskap | Attribut | Beskrivning | Typ | Förvalt värde |
---|---|---|---|---|
href | href | [DEPRECATED] Den här egenskapen kommer tas bort i framtida versioner av styleguide, det korrekta sättet är att göra rubriken i navigeringskortet som en länk. | string | - |
imgRef | img-ref | referens till en bild | string | - |
extraClass | extra-class | Lägg till extra klasser i parent elementet string t.ex. extra-class="classnamn1 classnamn2" | string | - |
size | size | Storlek på komponenten, möjliga storlekar är 'medium' och 'small'. | string | medium |
Ska du ta med din fyrbenta kamrat på vägarna i sommar? Kom ihåg att det är viktigt med raster, vatten minst var sjätte timme och att aldrig lämna din hund i en varm bil.
<div style="max-width: 50%">
<!-- komponenten börjar här -->
<jv-nav-card img-ref="bild" size="medium">
<img slot="bild" alt="Bild på en hund" src="/images/18.7a4c6ec717c7885141651f80/1634219693168/hunden-bil.jpg">
<a class="c-nav-card__content--heading" href="https://jordbruksverket.se/djur/hastar-och-sallskapsdjur/hundar/transportera-hundar">
Lämna aldrig kvar hunden i en varm bil
</a>
<div class="c-nav-card__content--main">
<p>
Ska du ta med din fyrbenta kamrat på vägarna i sommar? Kom ihåg att det är viktigt med raster,
vatten minst var sjätte timme och att aldrig lämna din hund i en varm bil.
</p>
</div>
</jv-nav-card>
<!-- ---- -->
</div>
Då behöver du ha koll på vilka regler som gäller för att ta med djur, växter, mat och andra produkter till eller från Sverige. Reglerna finns för att skydda våra djur och växter från smittsamma sjukdomar.
<div style="max-width: 33%">
<!-- komponenten börjar här -->
<jv-nav-card img-ref="bild" size="small">
<img slot="bild" alt="Tåg resa" src="/images/18.7a4c6ec717c78851416520a9/1634219711627/resa-med-tag.jpg">
<a class="c-nav-card__content--heading" href="https://jordbruksverket.se/for-dig-som/ska-ut-och-resa">
Ska du ut och resa i sommar?
</a>
<div class="c-nav-card__content--main">
<p>
Då behöver du ha koll på vilka regler som gäller för att ta med djur, växter, mat och andra
produkter till eller från Sverige. Reglerna finns för att skydda våra djur och växter från
smittsamma sjukdomar.
</p>
</div>
</jv-nav-card>
<!-- ---- -->
</div>