Cards

Cards används både som navigationskort i redaktionellt innehåll och som behållare för olika typer av innehåll eller information.

Open

1177

 

Open

Inera

 

Innehållsförteckning

Komponentkällor

1177

Inera

Designspecifikation

Navigation card - klickbara kort

På sektionssidor och samlingssidor används en navigering på själva sidan, ett navigation card, för att få en bra överblick av underliggande sidor i strukturen. Navigeringen kan visas som brickor eller som lista (där enbart rubrik syns). Detta val görs via ikoner ovanför komponenten. På sektionssidor används brickor med länkar. På samlingssidor används brickor med beskrivande text. 

Brickorna kan innehålla en beskrivande text eller länkar. Brickorna kan även innehålla bilder, som då placeras ovanför rubriken. 

Navigationskorten är av typen “Interactive card”, vilket betyder att hela kortet görs klickbart/interaktivt och har en hover-effekt när muspekaren förs över kortet.

Figma

• 1177 (invånare)

• 1177 (vårdpersonal)

• Inera

1177
För navigering till artikelsidor och med syfte att informera och inspirera används röd färgskala. För navigering som används till verktyg och profession används blå färgskala. 

Expanderbara kort

Kort kan användas tillsammans med komponenten Expandable för att skapa expanderbara kort med information i en eller flera nivåer.

Kort som behållare för innehåll

Ett kort kan också användas fristående, som behållare för information. Kortet används då som bakgrund och kan innehålla olika typer av information eller komponenter i syfte att exempelvis gruppera eller sektionera innehåll. För tjänster som följer 1177:s varumärke kan kortet kan användas med eller utan färgad linje i överkant. För Inera kan både beige kort och vita kort med kantlinje användas.

Focus card

endast 1177

Focus card används som behållare för olika typer av innehåll eller information med extra vikt för att få användarens fokus. Det är en variant av kort som kan användas för mer statisk information. Kortet har ram, färgad bakgrund och innehåller inte ikoner. Focus card finns enbart för 1177 då det finns varianter som fyller syftet idag för Inera (vit bakgrund, kantlinje).

• Neutralt kort: använd vanligt card, ej interaktivt. Vitt med ram.

• Invånare: rosa kort med röd kantlinje (primary90 / primary30).

• Profession/vårdpersonal: blått kort med blå kantlinje (accent95 / accent30).
  
  

I mobila gränssnitt

Det ska vara responsiv design vid förstorning eller vid användning av liten skärm, så att det inte uppstår scroll i både höjd- och sidled.

Tillgänglighet

WCAG-kriteriet 1.4.11
Kontrast på icke-textobjekt: Grafik, så som ikoner, komponenter och andra informationsbärande grafiska element ska ha kontrast värde på minst 3.0:1. (Nivå AA)

WCAG-kriteriet 1.4.3
Kontrast på text: Se till att liten text har ett kontrastvärde av minst 4.5:1 mot bakgrunden, och stor text minst 3.0:1. (Nivå AA)

2.4.3 Fokusordning
Om det finns något fokusbart element inuti komponenten: Om man kan navigera stegvis på en webbsida och navigeringsordningen påverkar betydelse eller användning, så ska fokusbara komponenter få fokus i en ordning som bevarar betydelse och användning. (Nivå A) Se till att fokus/tab-ordningen är logisk.

2.1.1 Tangentbordsnavigering:
Se till att det går att hantera all funktionalitet med enbart tangentbord, alla interaktiva element ska vara nåbara med tangentbord. Många gånger kan man navigera med tangentbord till en drop-down meny men sedan så kan inte undermenyalternativen nås, så se till att allt är nåbart och är tillgängliga via tangentbord samt att användaren inte kan fastna.

4.1.2 Namn, roll, värde:
För alla komponenter i ett användargränssnitt (inklusive, men inte begränsat till formulärelement, länkar och komponenter skapade med script), kan namnet och rollen automatiskt tydliggöras. Status, egenskaper och värden som kan anges av användaren kan bli automatiskt tydliggjord, och meddelande om ändringar i dessa komponenter finns åtkomliga för användarprogram, inklusive hjälpmedel. (Nivå A)

2.4.6 Rubriker och ledtexter/etiketter:
Rubriker och ledtexter/etiketter beskriver ämne eller syfte. (Nivå AA) Beskrivande rubriker, ledtexter och etiketter(labels/headings) hjälper användarna att förstå en sidas innehåll och syfte.

WCAG-kriteriet 1.1.1
Beskriv med text det som inte är text: Om bilder eller andra informationsbärande grafiska objekt visas på sidan så ska det finnas en alt-text så även skärmläsare kan förstå vad det är. Om bilden/grafiska objektet enbart är dekorativt och inte förmedlar någon form av information eller är kompletterande till innehållet så behövs inte en alt-text den kan då lämnas tom med: alt=””. (Nivå A)

WCAG-kriteriet 1.4.4
Det ska gå att förstora texten utan att innehåll går sönder: Det ska vara möjligt att förstora texten dubbelt så stort utan att innehåll går sönder eller försvinner (alternativt kunna zooma in 200% i browser). Text ska inte överlappa eller döljas bakom andra komponenter.

WCAG-kriteriet 1.4.10
Flexibel layout vid förstorning eller användning av liten skärm: Det ska vara responsiv design vid förstorning eller vid användning av liten skärm. Ner till 320 pixlar så ska det inte uppstå scroll i två dimensioner (lodrätt & vågrätt). Om inte responsiv design är möjligt för mobil så görs en mobilanpassad version.

WCAG-kriteriet 1.3.4
Innehåll presenteras rätt oavsett skärmens riktning: Innehållet ska kunna visas både som stående eller liggande vy.

WCAG-kriteriet 2.4.7:
Markera tydligt vilket fält eller element som är i fokus: Se till att fokusramen syns när användaren tabbar till elementet, samt att kontrasten på fokusramen uppnår mist 3:1 i kontrastvärde.

Feedback

Hjälp oss att förbättra den här komponenten genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.