Gå til hovedinnhold
KOMPONENTER

Card

npmv2.2.0

Cards er flater som viser innhold og handlinger om et emne som man ønsker å fremheve på en side.

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

NavigationCard-props

Komponenter

import { NavigationCard } from '@entur/layout';
NavnTypeDefault-verdiBeskrivelse
as?string | React.ElementType'a'

HTML-elementet eller React-komponenten som lager NavigationCard An override of the default HTML tag. Can also be another React component.

titlestring

Tittelen/teksten som står i CardBox

titleIcon?ReactNode

Valgfritt ikon som står over tittelen

className?string

Ekstra klassenavn

compact?boolean false

Lager en mer kompakt NavigationCard, uten ikon og beskrivende tekst

children?ReactNode

Beskrivelse under tittel, om ikke “compact” er valgt

externalLink?boolean false

Legger til et ikon for å symbolisere at kortet har en ekstern lenke

NavigationCard kan brukes gjerne på landingssider for å gi oversiktlige linker til forskjellige undersider. NavigationCard skal ha en beskrivende tekst under tittelen, og gjerne et beskrivende ikon. Bruk helst eksempelet over, og ha 1.5rem/24px mellom hvert NavigationCard.

NavigationCard med compact-propen kan brukes på samme måte, men heller om man vil bruke mindre plass, eller ikke har en beskrivende tekst til tittelen. Ettersom denne ikke har forflyttning ved hover, så kan du bruke lavere verdier for spacing mellom boksene.

BaseCard

import { BaseCard } from '@entur/layout';
NavnTypeDefault-verdiBeskrivelse
as?string | React.ElementType"div"

HTML-elementet eller React-komponenten som lager Card An override of the default HTML tag. Can also be another React component.

className?string

Ekstra klassenavn

BaseCard er komponenten som NavigationCard bygger seg oppå, og kan også brukes direkte, om man skulle ha behov stylingen som BaseCard er "kjent" for.

Retningslinjer for bruk

Cards er flater som viser innhold og handlinger om et emne som man ønsker å fremheve på en side. Card gir et kort sammendrag av innholdet, og lenker videre til en ny side med ytterligere detaljer. Den skal være enkel å skanne etter relevant informasjon. Card kan for eksempel brukes som navigasjon til et underliggende nivå, der man gjør et uttrekk av innholdet fra menyen som presenteres på en landingsside.

NavigationCard skal ha en beskrivende tekst under tittelen. Teksten bør være kort og konsis, på max 3 linjer. Ikon i et card er valgfritt, men bruker du ikoner, bør de være selvforklarende. NavigationCard med compact-propen kan brukes på samme måte, men heller om man vil bruke mindre plass eller ikke har en beskrivende tekst til tittelen.

Rediger denne siden på Bitbucket