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

href länk

string

'#'

imgRef

img-ref

referens till en bild

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.

<div class="row justify-content-start">
  <div class="col-lg-6 col-md-6 col-sm-12">
     <!-- komponenten börjar här -->
     <jv-nav-card img-ref="kattBild" size="medium" href="https://jordbruksverket.se/djur/hastar-och-sallskapsdjur/hundar/transportera-hundar">
        <img slot="kattBild" alt="Bild på en hund" src="/images/18.7a4c6ec717c7885141651f80/1634219693168/hunden-bil.jpg">
        <h3 class="c-nav-card__content--heading"> Lämna aldrig kvar hunden i en varm bil </h3>
        <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>
           <span class="c-btn--medium c-nav-card__button" aria-hidden="true"> Transportera hundar </span>
        </div>
     </jv-nav-card>
     <!-- ---- -->
   </div>
</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.

<div class="row justify-content-start">
  <div class="col-lg-4 col-md-8 col-sm-12">
    <!-- komponenten börjar här -->
     <jv-nav-card img-ref="kattBild" size="small" href="https://jordbruksverket.se/for-dig-som/ska-ut-och-resa">
        <img slot="kattBild" alt="Tåg resa" src="/images/18.7a4c6ec717c78851416520a9/1634219711627/resa-med-tag.jpg">
        <h3 class="c-nav-card__content--heading"> Ska du ut och resa i sommar? </h3>
        <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>
           <span class="c-btn--small c-nav-card__button" aria-hidden="true">
              För dig som ska ut och resa
           </span>
        </div>
     </jv-nav-card>
     <!-- ---- -->
  </div>
</div>

Senast publicerad

Sidansvarig för sidan är Styleguide