Styleguide

Navigeringskort

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.

Design och språk

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

  • huvudrubrik

Navigeringskortet kan även innehålla

  • underrubrik
  • media, till exempel foton och andra grafiska element
  • beskrivande text
  • en knapp.

Alternativa komponenter

Komponent och kod

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.

Paramterar på navigeringskort

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

Medium

Bild på en hund Lämna aldrig kvar hunden i en varm bil

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.

HTML 
<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>

Small

Tåg resa Ska du ut och resa i sommar?

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.

HTML 
<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>

Senast publicerad

Sidansvarig för sidan är Styleguide