Hoppa till huvudinnehåll

Card

Kort
Storybook

Komponent som samlar logiskt relaterad information om ett ämne i en visuellt distinkt och avgränsad enhet. Ett kort består alltid av minst två olika typer av innehåll: en rubrik och därutöver något mer, till exempel en bild, en text, metadata eller en knapp. Syftet är vanligtvis att ge en kortfattad representation av ett ämne och leda användaren vidare till mer detaljerad information.

import { Card, CardHeader, CardBody, Text } from '@midas-ds/components'
<Card>
  <CardHeader heading='Sven Svensson' />
  <CardBody>
    <Text>Sven är en designer på Migrationsverket</Text>
  </CardBody>
</Card>

Sven Svensson

Sven är en designer på Migrationsverket

Användningsområden​

Kort passar särskilt bra i följande två situationer:

  • Samlingar av objekt, till exempel artiklar, produkter, personer eller inlägg
  • Dataöversikter och dashboards

Samlingar av objekt​

Om du vill visa en samling objekt av samma typ med återkommande innehållsdelar bör du i första hand överväga en lista, särskilt om det är viktigt att användaren ska kunna jämföra objekten. Är objekten mer heterogena eller innehåller bilder, kan kort vara ett lämpligt val.

När kort används bör de struktureras i en grid-layout som gör det enkelt för användaren att läsa av samlingen. Det underlättas av att korten placeras i raka kolumner och rader. En utmaning med grid-layouter är varierad höjd på korten. Är variationen liten kan du fylla ut med whitespace så att korten får samma höjd och innehållet linjerar. Är variationen stor kan det behövas en maxhöjd i kombination med trunkering av texter.

Dataöversikter och dashboards​

I en dataöversikt eller en dashboard kan kort användas för att dela upp och presentera olika datamängder i separata, lättöverskådliga enheter. Varje kort representerar ett avgränsat informationsområde, vilket gör det enkelt för användaren att snabbt få en överblick och identifiera det som är relevant. Kort i dashboards behöver inte ha samma storlek. Anpassa storleken efter innehållet, till exempel kan ett nyckeltal rymmas i ett litet kort medan ett diagram eller en tabell kan kräva mer utrymme. Använd ett grid-layout för att skapa ordning och struktur.

Varianter​

Kort med handlingar​

<CardActions> används för att gruppera kortets primära handlingar. Om kortet har många möjliga handlingar lägger vi de två eller tre mest relevanta handlingarna på kortet och övriga i en Meny. För att säkerställa att användare som använder hjälpmedel t.ex. skärmläsare ska få en tydlig förståelse för kortets handlingar är det lämpligt att inkludera kortets rubrik i handlingens aria-label.

<Card>
  <CardHeader heading='Inköpslista' />
  <CardBody>
    <Text>
      <ul>
        <li>3 bananer</li>
        <li>2 meloner</li>
        <li>4 kiwi</li>
        <li>2 citroner</li>
      </ul>
    </Text>
  </CardBody>
  <CardActions>
    <Button
      variant='secondary'
      aria-label='Redigera inköpslista'
      icon={Pen}
    >
      Redigera
    </Button>
    <Button
      variant='tertiary'
      aria-label='Ta bort inköpslista'
      icon={Trash2}
    >
      Ta bort
    </Button>
  </CardActions>
</Card>

Inköpslista

  • 3 bananer
  • 2 meloner
  • 4 kiwi
  • 2 citroner

Kort med bild​

Använd <CardImage> för att visa en bild på kortet. Om bilden är den tydligaste identifieraren kan den placeras först, annars placeras rubriken alltid överst och bilden direkt under.

<Card>
  <CardImage
    src={imgSrc}
    alt='Illustration av en ung man'
  />
  <CardHeader heading='Sven Svensson' />
  <CardBody>
    <Text>Sven är en designer på Migrationsverket</Text>
  </CardBody>
</Card>
Illustration av en ung man

Sven Svensson

Sven är en designer på Migrationsverket

Sven Svensson

Illustration av en ung man
Sven är en designer på Migrationsverket

Kort med meny​

Om kortet rymmer många handlingar kan de sekundära handlingarna placeras i en meny. För att skapa en meny i ett kort används Menu i <CardHeader> med en Button med variant='icon' och size='medium', med ikonen <EllipsisVertical> som trigger.

<Card>
  <CardHeader
    heading='Sven Svensson'
    subHeading='Designer på Migrationsverket'
  >
    <MenuTrigger>
      <Button
        aria-label='Menu'
        variant='icon'
        size='medium'
      >
        <EllipsisVertical size={20} />
      </Button>
      <MenuPopover>
        <Menu>
          <MenuItem id='spara'>Spara kontaktuppgifter</MenuItem>
          <MenuItem id='epost'>Skicka e-post</MenuItem>
        </Menu>
      </MenuPopover>
    </MenuTrigger>
  </CardHeader>
  <CardImage src={imgSrc} />
  <CardBody>
    <Text>Prata med Sven om du har frågor om design tokens</Text>
  </CardBody>
  <CardActions>
    <Button
      variant='secondary'
      aria-label='Boka möte med Sven Svensson'
      icon={Phone}
    >
      Boka möte
    </Button>
  </CardActions>
</Card>

Sven Svensson

Designer på Migrationsverket
Prata med Sven Svensson om du har frågor om design tokens

Länkkort​

I de flesta fall räcker texten på Link eller Link button för att beskriva var länken leder och vad de kan förvänta sig när de trycker på den. Men i de fall där användaren behöver mer information om var länken leder kan <CardLink> användas för att göra hela kortet till en länk.

<Card>
  <CardContent>
    <CardLink href='#'>
      <CardTitle>Min sida</CardTitle>
    </CardLink>
    <Text>På min sida kan du ändra dina uppgifter och se status på dina ansökningar</Text>
  </CardContent>
</Card>

Min sida

På min sida kan du ändra dina uppgifter och se status på dina ansökningar

Primär handling​

Ett kort kan även ha en primär handling med <CardActionArea> som är den mest relevanta åtgärden för kortet. Denna gör att hela ytan blir klickbar. En <CardActionArea> bör alltid innehålla en <CardTitle> för att ge en beskrivning av vad kortet innebär för skärmläsare.

<Card>
  <CardActionArea onPress={() => alert('Clicked!')}>
    <CardContent>
      <CardTitle>Dina uppgifter</CardTitle>
      <Text>Namn: Namn Namnsson</Text>
      <CardActions>
        <Button
          variant='icon'
          icon={Pen}
        >
          Ändra
        </Button>
        <Button
          variant='icon'
          icon={X}
        >
          Avbryt
        </Button>
      </CardActions>
    </CardContent>
  </CardActionArea>
</Card>

Horisontell layout​

Card stödjer även horisontell layout för att visa korten som en avlång rad. Detta kan vara användbart för att visa flera kort ovanpå varandra, som en lista med mycket detaljer och information. Använder du underkomponenterna för Card kommer dessa att justeras automatiskt när Card sätts i horisontellt läge.

<Card
  horizontal
>
  <CardContent>
    <CardTitle>Dina uppgifter</CardTitle>
    <Text>Namn: Namn Namnsson</Text>
    <CardActions>
      <Button
        variant='icon'
        icon={Pen}
      >
        Redigera
      </Button>
    </CardActions>
  </CardContent>
</Card>

Dina uppgifter

Namn: Namn Namnsson

Implementation​

Kortet byggs upp av flera underkomponenter.

KomponentBeskrivning
<CardHeader>Plats för rubrik och eventuell underrubrik. Måste alltid finnas på kortet
<CardBody>Wrapper för kortets huvudsakliga innehåll.
<CardActions>Skapar en yta för kortets handlingar.
<CardImage>Används för att visa en bild på kortet.
<CardLink>Läggs runt <CardTitle> för att skapa en länk.

Client Side Routing​

Läs mer om hur du kan använda komponenten med Client Side Routing.