Card

npm install @entur/layout

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

Komponenter

Varianter

NavigationCard

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

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

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.

Props

NavigationCard

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

Denne komponenten har ingen props

BaseCard

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

Denne komponenten har ingen props