Gå till slutet av bannern
Gå till början av bannern

Ikoner - Inera

Hoppa till slutet på meta-data
Gå till början av metadata

Du visar en gammal version av den här sidan. Visa nuvarande version.

Jämför med nuvarande Visa sidhistorik

« Föregående Version 12 Nästa »



Ikoner

Ineras ikonbibliotek är framtaget för att tillhandahålla tydliga ikoner som kännetecknar Ineras varumärkesprofil. Tjänster under Ineras varumärke använder primärt dessa varumärkesspecifika och egenritade ikoner. Ikonbiblioteken för varumärkena Inera och 1177 Vårdguiden innehåller samma grundikoner, men med respektive profilfärger.

Ikoner är primärt mörkturkosa (secondary-dark). Sekundärt kan brown-light användas.

Grid och specifikation

  • 40 x 40 px arbetsyta

  • 1.5 px linjetjocklek

  • 2 px hörnradie

  • Linjens ändar ska vara rundade

  • Avskurna linjer behöver inte ha rundat avslut

  • Använd samma färg på hela ikonen.

Undantag - övriga ikoner

Varumärkesspecifika ikoner ska alltid användas i första hand, men i vissa specifika fall kan ikoner från Googles Material Design användas. Det gäller exempelvis om ett större antal ikoner snabbt behöver tas fram och det inte finns möjlighet eller budget för att ta fram nya varumärkesspecifika ikoner. I dessa fall hänvisar vi till Google material designs ikonbibliotek. Använd koner med ramlinje (ej fyllda).

Stäm av med UX-ramverket om dessa ska användas.

Exempel (ska uppdateras)

EJ UPPDATERAT

Några exempel på hur vi använder ikoner med hjälp av Fontello eller som SVG filer inbäddade i CSS koden.


Favikoner

Ineras använder den grafiska symbolen aka “avocadon” som favikon.

Do’s and Don’ts

  • Använd primärt ikoner från Ineras ikonbibliotek.

Tillgänglighet

Även för ikoner, som utgör en form av grafiskt element på sidan, gäller samma kriterier som för bilder generellt under WCAG 2.1 Nivå AA. Se riktlinjer under Tillgänglighet.

  • Alternativ text (ALT-text) när ikonen saknar kompletterande text.

  • Tillräcklig storlek för en klickbar yta (om ikonen är klickbar)

  • Tillräcklig kontrast mellan ikon och bakomliggande element

Material

Ikoner

Här finns ikonerna i Ineras ikonbibliotek (svg):

Här finns favikoner som används för Inera (png, svg):


Övriga ikoner

Här hittar du ikoner från Google Material designs ikonbibliotek:

Google Material design ikonbibliotek

Research på komponenten

-

Relaterade resurser/komponenter

  • Komponentbiblioteken i Figma/Sketch

Status

Status

EJ UPPDATERAT I CSS

Publicerad

2020-01-18

Senast uppdaterad

2020-01-20

  • Inga etiketter