KOMPONENTER

Card

npmv2.3.19

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

Tittel

Link

Innhold

KompaktEkstern lenke

Komponenter

NavigationCard

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

Navn	Type	Default-verdi	Beskrivelse
`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.
`title`	`string`		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';

Navn	Type	Default-verdi	Beskrivelse
`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.