Styleguide

Kort

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

Design och språk

När du ska använda kort

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

Innehåll i kortet

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.

Alternativa komponenter

Komponent och kod

Komponenten driftsattes första gången i version 15.2.7.

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

Parametrar på kort

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

-

extraClass

extra-class

Lägg till extra klasser i parent elementet string t.ex. extra-class="classnamn1 classnamn2"

string

-

size

size

Storleken på kortet. OBS ändrar bara fontstorleken bredden på kortet styrs i "behållaren" kortet befinner sig i.

string

'medium'

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.
HTML 
<div class="container-grid" style="max-width: 50%;">
   <!-- komponenten börjar här -->
   <jv-card>
    <div class="c-card__main">
      <div class="c-card__main--img">
        <img style="max-width: 100%;" alt="Bild på en katt" src="/images/18.3f5783ca17a0d6fa37e7953f/1623912882050/katt_sally.png">
      </div>
      <div class="c-card__main--content">
        <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>
      </div>
    </div>
   </jv-card>
   <!-- ---- -->
</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.
HTML 
<div style="width: 33%; min-width: 200px">
   <!-- komponenten börjar här -->
   <jv-card size="small">
    <div class="c-card__main">
      <div class="c-card__main--img">
        <img style="max-width: 100%;" alt="Bild på en katt" src="/images/18.3f5783ca17a0d6fa37e7953f/1623912882050/katt_sally.png">
      </div>
      <div class="c-card__main--content">
        <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>
      </div>
    </div>
   </jv-card>
   <!-- ---- -->
</div>

Exempel

Hästregistret

Adress

c/o CoMock 12

Mockgatan 12

55555 Mockköping

E-post

mock@mock.se
HTML 
<div style="max-width: 50%">
  <jv-card>
    <div class="c-card__main">
      <div class="c-card__main--content">
        <h3 class="c-card__heading">Hästregistret</h3>
        <div class="form-content--readonly-block">
          <p class="header">Adress</p>
          <p id="co-adress-2" class="content"> c/o CoMock 12 </p>
          <p id="utdelningsadress-2" class="content"> Mockgatan 12 </p>
          <p id="postnummer-postort-2" class="content"> 55555 Mockköping </p>
        </div>
        <div class="form-content--readonly-block">
          <p class="header">E-post</p>
          <p id="e-post-2" class="content">mock@mock.se</p>
        </div>
      </div>
    </div>
    <div class="c-card__footer">
      <div class="c-card__footer--content mobile-fullwidth">
        <button type="button" class="c-btn c-btn--primary c-btn--medium">Lägg till</button>
        <button type="button" class="c-btn c-btn--medium">Redigera</button>
        <button type="button" class="c-btn c-btn--medium">Ta bort</button>
      </div>
    </div>
  </jv-card>
</div>

Senast publicerad

Sidansvarig för sidan är Styleguide