Kort

Du kan använda kort när du vill göra det enklare för att användaren att få en överblick av innehållet genom att dela upp information i olika kategorier.

Design och språk

Kortet kan innehålla olika delar och komponenter beroende på behov,

Kortet ska alltid innehålla en

  • huvudrubrik

Kortet kan innehålla

  • underrubrik
  • media, till exempel foton och andra grafiska element
  • beskrivande text
  • knappar
  • länkar.

Komponent och kod

Bredden på ett kort är satt till 100%, bredden på ett kort styrs av bredden på "behållaren" som kortet befinner sig i.

Parametrar på modalt fönster

Egenskap

Attribut

Beskrivning

Typ

Förvalt värde

imgRef

img-ref

(Optional) Referens till en eller flera bilder som ska visas i ett kort.

string

-

Medium

 

Bild på en katt

Styleguide

Du kan använda styleguiden både om du startar ett nytt utvecklingsprojekt och om du redan har ett befintligt. Vissa standardsystem är inte kompatibla med styleguidens CSS och då kan du i stället efterlikna designen på styleguidens komponenter. Behöver du en komponent som inte finns i styleguiden så hör av dig till styleguide-teamet.

<div class="row justify-content-start">
  <div class="col-lg-6 col-md-6 col-sm-12">
    <!-- komponenten börjar här -->
    <jv-card img-ref="image">
      <img slot="image" alt="Bild på en katt" src="/images/200.3f5783ca17a0d6fa37e79891/1623912986155/katt_sally.png">
      <h3 class="c-card__heading">Styleguide</h3>
      <p>Du kan använda styleguiden både om du startar ett nytt utvecklingsprojekt och
        om du redan har ett befintligt. Vissa standardsystem är inte kompatibla med
        styleguidens CSS och då kan du i stället efterlikna designen på styleguidens
        komponenter. Behöver du en komponent som inte finns i styleguiden så hör av dig
        till styleguide-teamet.</p>
    </jv-card>
    <!-- ---- -->
  </div>
</div>

Small

Bild på en katt

Styleguide

Du kan använda styleguiden både om du startar ett nytt utvecklingsprojekt och om du redan har ett befintligt. Vissa standardsystem är inte kompatibla med styleguidens CSS och då kan du i stället efterlikna designen på styleguidens komponenter. Behöver du en komponent som inte finns i styleguiden så hör av dig till styleguide-teamet.

<div class="row justify-content-start">
  <div class="col-lg-4 col-md-8 col-sm-12">
    <!-- komponenten börjar här -->
    <jv-card img-ref="image">
      <img slot="image" alt="Bild på en katt" src="/images/200.3f5783ca17a0d6fa37e79891/1623912986155/katt_sally.png">
      <h3 class="c-card__heading">Styleguide</h3>
      <p>Du kan använda styleguiden både om du startar ett nytt utvecklingsprojekt och
        om du redan har ett befintligt. Vissa standardsystem är inte kompatibla med
        styleguidens CSS och då kan du i stället efterlikna designen på styleguidens
        komponenter. Behöver du en komponent som inte finns i styleguiden så hör av dig
        till styleguide-teamet.</p>
    </jv-card>
    <!-- ---- -->
  </div>
</div>

Kort utan bild

Styleguide

Du kan använda styleguiden både om du startar ett nytt utvecklingsprojekt och om du redan har ett befintligt. Vissa standardsystem är inte kompatibla med styleguidens CSS och då kan du i stället efterlikna designen på styleguidens komponenter. Behöver du en komponent som inte finns i styleguiden så hör av dig till styleguide-teamet.

<jv-card>
   <h3 class="c-card__heading">Styleguide</h3>
   <p>Du kan använda styleguiden både om du startar ett nytt utvecklingsprojekt och
      om du redan har ett befintligt. Vissa standardsystem är inte kompatibla med
      styleguidens CSS och då kan du i stället efterlikna designen på styleguidens
      komponenter. Behöver du en komponent som inte finns i styleguiden så hör av dig
      till styleguide-teamet.</p>
</jv-card>

Kort med knapp och bild

Bild på en katt

Katten Pete

<div class="row justify-content-start">
  <div class="col-lg-6 col-md-8 col-sm-12">
    <!-- komponenten börjar här -->
    <jv-card img-ref="image">
      <img slot="image" alt="Bild på en katt" src="/images/18.3f5783ca17a0d6fa37e79542/1623912889798/pete.png">
      <h3 class="c-card__heading">Katten Pete</h3>
      <div class="c-space--m"></div>
      <button class="c-btn--medium">Redigera</button>
      <button class="c-btn-text--medium">Ta bort</button>
    </jv-card>
    <!-- ---- -->
  </div>
</div>

Kort med endast knappar

Leka i en låda

<jv-card>
  <h3 class="c-card__heading">Leka i en låda</h3>
  <div class="c-space--m"></div>
  <button class="c-btn--medium">Lägg till beteende</button>
  <button class="c-btn--medium">Redigera</button>
  <button class="c-btn-text--medium"><span class="sjv-i-prickmeny" style="font-size: 1em; margin: 0"></span></button>
</jv-card>

Senast publicerad 2021-06-17

Sidansvarig för sidan är Styleguide