Gå til hovedinnhold
KOMPONENTER

Contrast

npmv2.2.0

Contrast er en invertert versjon av profilen vår og kan brukes for å skape et visuelt hierarki på siden.

npm install @entur/layout
@import '@entur/layout/dist/styles.css';

Komponenter

Contrast

import { Contrast } from '@entur/layout';
NavnTypeBeskrivelse
className?string

Ekstra klassenavn

as?string | React.ElementType

An override of the default HTML tag. Can also be another React component.

ref?any

UseContrast

import { useContrast } from '@entur/layout';

Denne komponenten har ingen props

Returnerer true om man er wrappet av en Contrast.

Retningslinjer for bruk

Contrast er en invertert versjon av profilen vår og kan brukes for å skape et visuelt hierarki på siden. Forskjeller tiltrekker blikket og Contrast gir oss muligheten å presentere et oppsett på en måte som informerer brukene om hvilke handlinger og interaksjoner som er viktige, og hvilke som er sekundære.

Contrast er en effektiv måte å gi fokus på bestemte elementer i designet og for å fange brukernes oppmerksomhet. Riktig bruk av Contrast på ulike seksjoner kan være et effektfullt grep som kan bidra til intuitiv navigering og mer brukervennlig side. I tillegg kan Contrast seksjoner redusere mengden lys, som gjør det lettere for øynene å se på skjermen. Contrast kan også forbedre lesbarheten på avstand og ved ulike lysforhold.

Rediger denne siden på Bitbucket