Kort med tittel
Et kort samler innhold som hører sammen.
Stilguide
Alt på denne siden hentes rett fra tokens og de ekte komponentene. Endrer du noe der, endres det her.
Farger: semantiske
Disse brukes i komponentene. Fargeprøven viser modusen siden står i nå.
--color-backgroundBakgrunnen på hele sidenLys #f6f6f7 · Mørk #101014--color-surfaceBakgrunn på kort og flater som ligger oppå sidenLys #ffffff · Mørk #1e1d25--color-textVanlig tekstLys #16151b · Mørk #e3e3e8--color-text-mutedDempet tekst, for eksempel hjelpetekstLys #55545f · Mørk #c9c9d1--color-borderTynne linjer og kanterLys #e3e3e8 · Mørk #3a3944--color-primaryCTA-knapp: bakgrunnLys #2a49a6 · Mørk #2a49a6--color-primary-hoverCTA-knapp når musa er overLys #17273e · Mørk #9cc1f4--color-on-primaryTekst på CTA-knappenLys #ffffff · Mørk #ffffff--color-secondarySekundærknapp: bakgrunnLys #e0ecfc · Mørk #17273e--color-secondary-hoverSekundærknapp når musa er overLys #eeeef1 · Mørk #26252e--color-on-secondaryTekst på sekundærknappenLys #2a49a6 · Mørk #9cc1f4--color-linkLenker: mørk tekst, understreket. I kurs: kursfargen (sterk).Lys #16151b · Mørk #e3e3e8--color-focusFokusring: mørk (lys i mørk modus). I kurs: kursfargen (sterk).Lys #16151b · Mørk #e3e3e8--color-dangerFeilmeldingerLys #c0362c · Mørk #f2827a--color-successBekreftelserLys #1f7a4a · Mørk #5fcf8f--color-surface-mutedDempet flate, for eksempel merkelapperLys #eeeef1 · Mørk #26252e--color-accentFremhevingsfarge, for eksempel kanten på et fremhevet kortLys #f2c94c · Mørk #f2c94c--color-accent-surfaceBakgrunn på fremhevede merkelapperLys #fdf1c7 · Mørk #4a3d12--color-on-accent-surfaceTekst på fremhevede merkelapperLys #16151b · Mørk #fdf1c7--color-border-strongKant rundt skjemafelt (minst 3:1 mot bakgrunnen)Lys #6a6977 · Mørk #6a6977--color-info-surfaceBakgrunn på info-beskjedLys #f6f6f7 · Mørk #16151b--color-success-surfaceBakgrunn på vellykket-beskjedLys #e3f4ea · Mørk #173a28--color-danger-surfaceBakgrunn på feilbeskjedLys #fbe5e3 · Mørk #4a1f1c--color-warning-surfaceBakgrunn på advarselLys #fdf1c7 · Mørk #4a3d12--color-progress-trackBakgrunnen i fremdriftsstolpenLys #e3e3e8 · Mørk #3a3944--color-progress-fillFylt del av fremdriftsstolper: svart (lys i mørk modus), lik i alle kursLys #16151b · Mørk #e3e3e8--color-status-progressStatusprikk: påbegyntLys #2a49a6 · Mørk #9cc1f4--color-danger-hoverFarlig knapp når musa er overLys #9e2a22 · Mørk #f6a39d--color-on-dangerTekst på farlig knappLys #ffffff · Mørk #101014--color-inverse-surfaceMørk flate, f.eks. toastLys #16151b · Mørk #e3e3e8--color-on-inverse-surfaceTekst på mørk flateLys #f6f6f7 · Mørk #101014--color-backdropBakteppe bak dialogerLys #16151b80 · Mørk #000000b3--color-field-borderGrå kant rundt felt, avkrysningsbokser og valg (minst 3:1) – lik i alle kursLys #8a8994 · Mørk #8a8994--color-field-border-hoverMørkere grå kant når musen er overLys #3a3944 · Mørk #c9c9d1--color-ctaPrimærknapp: svart (lys i mørk modus)Lys #16151b · Mørk #f6f6f7--color-cta-hoverPrimærknapp når musen er overLys #3a3944 · Mørk #e3e3e8--color-on-ctaTekst og ikon på primærknappen (over 6:1)Lys #ffffff · Mørk #101014--color-field-surfaceVeldig lys grå bakgrunn inni skjemafeltLys #fafafb · Mørk #16151b--color-disabled-surfaceBakgrunn på ting som ikke kan brukes nåLys #eeeef1 · Mørk #26252e--color-on-disabledTekst på ting som ikke kan brukes nåLys #55545f · Mørk #8a8994--color-text-subtleLys grålilla tekst: plassholder, hjelpetekst og ikoner i felt (minst 4,5:1)Lys #6e6488 · Mørk #9d94b5--color-surface-sunkenLys grå flate i et kort, med hvite kort inniLys #f6f6f7 · Mørk #101014--color-on-kursSvart på kursfargen (f.eks. logoen i kursikonet). Lik i lys og mørk modus, fordi kursfargene er like lyse i begge.Lys #16151b · Mørk #16151b--color-segmented-trackSporet bak valgene i SegmentedControlLys #eeeef1 · Mørk #26252e--color-segmented-thumbKnotten som viser hva som er valgtLys #ffffff · Mørk #3a3944--color-on-segmented-thumbTekst på valgt knott (over 10:1)Lys #16151b · Mørk #f6f6f7--color-on-segmented-trackTekst på valg som ikke er valgt (over 6:1)Lys #55545f · Mørk #c9c9d1--color-verdict-passValget «bestått/ingen feil» i VerdictChoice – tydelig grønn flate med sort tekstLys #5fcf8f · Mørk #1f7a4a--color-verdict-failValget «ikke bestått/feil» i VerdictChoice – tydelig rosa flate med sort tekstLys #f6a39d · Mørk #9e2a22--color-continueFortsett-knappen: samme svart/hvit som hovedknappeneLys #16151b · Mørk #f6f6f7--color-continue-hoverFortsett-knappen ved hoverLys #3a3944 · Mørk #e3e3e8--color-on-continueTekst på Fortsett-knappenLys #ffffff · Mørk #101014Farger: temaer
Hvert verktøy er et tema. Temaet bytter bare disse fargene: hovedfarge, lys flate og sterk farge.
--color-kurs-lillaKursfarge lilla: hovedfarge (merke, fremheving)Lys #c8b4f7 · Mørk #c8b4f7--color-kurs-lilla-surfaceKursfarge lilla: lys flate (valgt steg, toppfelt)Lys #f0e7ff · Mørk #2a2145--color-kurs-lilla-strongKursfarge lilla: sterk variant til ikoner, kanter og fremdrift (over 6:1)Lys #5238b6 · Mørk #c8b4f7--color-kurs-gulKursfarge gul: hovedfarge (merke, fremheving)Lys #ecb716 · Mørk #ecb716--color-kurs-gul-surfaceKursfarge gul: lys flate (valgt steg, toppfelt)Lys #faeabd · Mørk #2d2611--color-kurs-gul-strongKursfarge gul: sterk variant til ikoner, kanter og fremdrift (over 6:1)Lys #604e18 · Mørk #e3e3e8--color-kurs-gul-backgroundKursfarge gul: grålig sandfarget sidebakgrunn bak kortene (f.eks. prosjektsiden)Lys #e5e5dc · Mørk #101014--color-kurs-gul-cardKursfarge gul: lys grå flate på kortene som står på kurs-gul-backgroundLys #f6f6f7 · Mørk #1e1d25--color-kurs-blaKursfarge bla: hovedfarge (merke, fremheving)Lys #9cc1f4 · Mørk #9cc1f4--color-kurs-bla-surfaceKursfarge bla: lys flate (valgt steg, toppfelt)Lys #e0ecfc · Mørk #17273e--color-kurs-bla-strongKursfarge bla: sterk variant til ikoner, kanter og fremdrift (over 6:1)Lys #2a49a6 · Mørk #9cc1f4--color-kurs-ferskenKursfarge fersken: hovedfarge (merke, fremheving)Lys #f6b26b · Mørk #f6b26b--color-kurs-fersken-surfaceKursfarge fersken: lys flate (valgt steg, toppfelt)Lys #fdf0e2 · Mørk #33210f--color-kurs-fersken-strongKursfarge fersken: sterk variant til ikoner, kanter og fremdrift (over 6:1)Lys #7c3b16 · Mørk #f6b26bFarger: basis
Råverdiene. Bruk dem ikke direkte i komponenter – bruk de semantiske.
--color-white#ffffff--color-violet-50#f0e7ff--color-violet-100#e2d4ff--color-violet-200#c8b4f7--color-violet-300#a790ea--color-violet-400#8669d6--color-violet-600#5238b6--color-violet-700#432c99--color-violet-800#34227a--color-violet-900#2a2145--color-violet-950#1f1933--color-neutral-25#fafafb--color-neutral-50#f6f6f7--color-neutral-100#eeeef1--color-neutral-200#e3e3e8--color-neutral-300#c9c9d1--color-neutral-400#8a8994--color-neutral-500#6a6977--color-neutral-600#55545f--color-neutral-700#3a3944--color-neutral-800#26252e--color-neutral-850#1e1d25--color-neutral-900#16151b--color-neutral-950#101014--color-red-100#fbe5e3--color-red-300#f6a39d--color-red-400#f2827a--color-red-600#c0362c--color-red-700#9e2a22--color-red-900#4a1f1c--color-green-100#e3f4ea--color-green-400#5fcf8f--color-green-600#1f7a4a--color-green-900#173a28--color-yellow-100#fdf1c7--color-yellow-400#f2c94c--color-yellow-900#4a3d12--color-mauve-50#f1eef8--color-mauve-300#b3abc7--color-mauve-350#9d94b5--color-mauve-400#8a80a3--color-mauve-500#6e6488--color-mauve-800#3f3a4a--color-mauve-900#2b2735--color-gold-50#faeabd--color-gold-300#ecb716--color-gold-800#604e18--color-gold-950#2d2611--color-sand-200#e5e5dc--color-blue-50#e0ecfc--color-blue-300#9cc1f4--color-blue-800#2a49a6--color-blue-950#17273e--color-peach-50#fdf0e2--color-peach-300#f6b26b--color-peach-800#7c3b16--color-peach-950#33210f--color-overlay-50#16151b80--color-overlay-70#000000b3Typografi
Montserrat brukes til overskrifter, Inter til brødtekst.
--font-size-h1 · 1.953remHovedoverskrift (31 px)
--font-size-h2 · 1.5625remUnderoverskrift (25 px)
--font-size-h3 · 1.25remOverskrift nivå 3 (20 px)
--font-size-lead · 1.25remIngress, litt større brødtekst
--font-size-h4 · 1.125remOverskrift nivå 4, f.eks. korttitler (18 px)
--font-size-body · 1remBrødtekst
--font-size-small · 0.875remLiten tekst, knapper og etiketter
--font-size-caption · 0.75remSmåtekst og bildetekster
--font-size-micro · 0.6875remEkstra liten tekst (11 px) – bare i Kopier-knappen på prompts
Avstander
--space-xs · 4px--space-s · 10px--space-m · 20px--space-l · 24px--space-xl · 32px--space-2xl · 48px--space-3xl · 64px--space-label · 10px--space-inset-box · 24pxAvstander som vokser med skjermen
Luft rundt store deler av siden vokser jevnt fra mobil til PC. Luft inni små ting og mellom ting bruker den faste skalaen over.
--space-fluid-section · 32px til 48pxLuft over og under en seksjon: 32 px på mobil, 48 px på PCHjørnerundinger
--radius-sSmå rundinger, for eksempel tagger--radius-mKnapper og skjemafelt--radius-lKort--radius-fullHelt runde former, for eksempel pilleknapper--radius-controlPilleform på knapper, felt, nedtrekkslister og chips--radius-fieldHjørner på tekstfelt, meldingsfelt, nedtrekkslister og datofeltKnapp
To varianter. Kan være en knapp eller en lenke som ser ut som en knapp.
Flere knappetyper
Stille knapp uten bakgrunn, farlig knapp til Slett og Nullstill, og små knapper til verktøylinjer og rader.
Stille og farlig
Små
Knapper med ikon
Ikonet får samme farge som knappeteksten. En knapp med bare ikon må ha en aria-label, så skjermlesere vet hva den gjør.
Ikon foran teksten
Ikon etter teksten
Bare ikon
Ikon
Fra Tabler Icons. Ikonet får samme farge som teksten rundt. Finn flere navn på tabler.io/icons.
--icon-size-s · 16px, --icon-size-m · 20px, --icon-size-l · 24pxKort
Kort uten tittel – bare innhold.
Kort med knapp
Kort kan inneholde andre komponenter.
Valg
To eller flere valg der ett er valgt om gangen. Bruk piltastene for å bytte når du har tabbet hit.
Trekkspill
En rad med pil som åpner og lukker innhold. Flere etter hverandre deler skillelinje.
Hva er et token?
En navngitt verdi, for eksempel en farge eller en avstand. Komponentene bruker bare tokens.
Hvordan lages et nytt tema?
Et tema bytter hovedfarge, lys flate og sterk farge. Resten er likt.
Virker alt i mørk modus?
Ja. Hver farge har en verdi for lys og en for mørk modus.
Vurdering
Svarvalg for hvert krav. Det valgte får fylt radioknapp, farget kant og bakgrunn – aldri bare farge.
Meny, dialog og beskjeder
Mer-meny, bekreftelse før noe ikke kan angres, toast, kopier-knapp og lagringsstatus.
Lagret i kontoen din Lagrer … Kunne ikke lagre. Prøver igjen …
Oversikt og rapport
Ringdiagram, kravkort, «Fortsett»-kort og prosjektrader til oversiktssider.
- Bestått: 12
- Ikke bestått: 3
- Ikke aktuelt: 2
- Igjen: 18
1.1.1Nivå AIkke-tekstlig innholdBestått1.4.3Nivå AAKontrast (minimum)2 feil funnetIkke bestått1.2.2Nivå ATeksting (forhåndsinnspilt)Ikke aktuelt1.3.1Nivå AInformasjon og relasjonerIkke vurdert
- Lunde FrisørÅpen nå
Valg i liste
Kryss av for noen krav, så dukker valglinjen opp nederst.
Tabell
| Bilde | Dårlig alt-tekst | Bra alt-tekst |
|---|---|---|
| Logo | logo.png | Lunde Frisør |
| Pil i knapp | pil | Neste side |
| Pyntebilde | bilde av blomst | (tom – skjules for skjermlesere) |
Avkrysning og radioknapper
Samme kant og hover som tekstfeltene. Valgt blir fylt med tekstfargen.
Oppgaveliste
Legg til, kryss av og slett oppgaver, og se hvor mange som gjenstår.
Oppgaver
Ingen oppgaver ennå. Skriv den første i feltet over.
Case og artikkel
Bilde med bildetekst, sitat og artikkeltekst med god linjebredde.
Et kort sitat som løfter fram én viktig tanke.
Dette er artikkeltekst. Linjene blir aldri lengre enn at de er lette å lese, og avsnittene har jevn luft mellom seg.
En mellomtittel
Mellomtitler får mer luft over seg enn under, så de hører sammen med teksten de innleder.
- Lister får riktig innrykk
- og litt luft mellom punktene.
Og lenker er understreket og har synlig fokus.
Steg og fremdrift
Til verktøy som går gjennom kapitler eller steg.
Kapitler
FerdigPåbegyntIkke startet
Kapittel 1 av 11
Krav 4 av 35
Beskjeder
Fire varianter. Hver har ikon og tekst, så betydningen ikke bare vises med farge.
Tre mål, ikke ett
Skill mellom forretningsmål, brukermål og suksesskriterium.
Alle krav er testet
Du kan nå lage rapporten.
2 problemer er ikke koblet
Koble dem til en innsikt, så holder den røde tråden.
Krav 1.4.3 er ikke bestått
Teksten på knappen har for lav kontrast.
Temaer
Hvert verktøy har sin egen farge i rammen: merket, toppfeltet, valgt steg og fremdriften. Knapper, lenker, felt og statusfarger er like i alle temaene.
WCAG-sjekken
gulOppstartsboka
lillaDesignsystem i kode
blaKnappetilstander
Vanlig, laster og kan ikke brukes.
Felt som ikke kan brukes
Dempet bakgrunn og tekst. WCAG krever ikke kontrast på ting som ikke kan brukes.
Chips
Små av/på-knapper, for eksempel til å filtrere. Valgt blir mørk og får hake.
Søk med forslag, flervalg og dato
Skriv «derm» i søkefeltet. Piltastene flytter i listene, Esc lukker.
Språk(valgfritt)
Skjema
Tekstfelt og nedtrekksliste. Felt som ikke må fylles ut, merkes «(valgfritt)». Feilmeldinger står under feltet med ikon, ikke bare i rødt.
Jeg svarer deg på denne adressen.
Skriv inn et telefonnummer med 8 siffer.
Fortell kort hva du trenger hjelp til.
Søkefelt
Forstørrelsesglass og «Søk» i dempet grå. Runde hjørner skiller det fra vanlige tekstfelt.
Faner
Toppmeny der siden du står på er markert med en strek under. Skjermlesere får beskjed om hvilken side som er valgt.
Sjekkliste i fremhevet kort
Satt sammen av Kort (fremhevet), CheckboxCard, Kbd, Code og Badge.
Før du publiserer
Sjekk disse tingene før siden går ut. Kryss av etter hvert.
Tab
4,5:1FremhevetKommer senerePanel med liste
Ramme med fast tittel og innhold som kan rulles. Når lista har fokus, kan den rulles med piltastene.
Krav i WCAG 2.2
Rull for å se alle1. Mulig å oppfatte
- 1.1.1Ikke-tekstlig innhold
- 1.2.1Bare lyd og bare video (forhåndsinnspilt)
- 1.2.2Teksting (forhåndsinnspilt)
- 1.3.1Informasjon og relasjoner
- 1.3.2Meningsfylt rekkefølgeKommer senere
- 1.3.3Sensoriske egenskaperKommer senere
- 1.4.3Kontrast (minimum)Kommer senere
2. Mulig å betjene
- 2.1.1Tastatur
- 2.4.7Synlig fokus
- 2.5.8Målstørrelse (minimum)Kommer senere
Kommer senereNy
Seksjon
Hver del av denne siden er en Seksjon: tittel, ingress og innhold med fast luft rundt.
Header og Footer
Toppen og bunnen av denne siden er Header- og Footer-komponentene.