Designsystemet Flutter

Utseende

DsCard ​

Kort for å gruppere relatert innhold med valgfrie underseksjoner og klikkbarhet.

Bruk ​

Når bør du bruke DsCard? ​

  • For å gruppere relatert innhold visuelt, f.eks. en artikkelforhåndsvisning.
  • For klikkbare enheter som navigerer til en detaljside.
  • Når du trenger en strukturert layout med header, innhold og footer.

Når bør du unngå DsCard? ​

  • For enkle tekstblokker uten visuell avgrensning — bruk vanlige tekstelementer.
  • For interaktive handlinger — bruk DsButton i stedet.
  • For navigasjonslister — bruk dedikerte navigasjonskomponenter.

Eksempler ​

Grunnleggende kort ​

DsCard — interaktiv forhåndsvisning
Åpne i nytt vindu ↗
dart
DsCard(
  child: DsCardBlock(
    child: DsParagraph(text: 'Enkelt kortinnhold.'),
  ),
)

Kort med seksjoner ​

dart
DsCard(
  elevated: true,
  onTap: () => naviger(),
  child: Column(
    children: [
      DsCardHeader(child: DsHeading(text: 'Tittel', level: DsHeadingLevel.sm)),
      DsCardBlock(child: DsParagraph(text: 'Kortinnhold her.')),
      DsCardFooter(child: DsButton(onPressed: () {}, child: Text('Les mer'))),
    ],
  ),
)

Kort med skygge ​

dart
DsCard(
  elevated: true,
  child: DsCardBlock(
    child: DsParagraph(text: 'Kort med skygge for visuell dybde.'),
  ),
)

Retningslinjer ​

  • Bruk DsCardHeader, DsCardBlock og DsCardFooter for konsistent struktur.
  • Bruk elevated for å skille kortet visuelt fra bakgrunnen.
  • Unngå for mye innhold i ett kort — del heller opp i flere kort.

Tekst ​

  • Bruk korte, beskrivende titler i header-seksjonen.
  • Hold innholdsteksten konsis og fokusert.

Har du innspill til denne komponenten? Send innspill på GitHub