Hoppa till huvudinnehåll

Card

Kort
Storybook

Komponent som används för att gruppera flera olika typer av relaterad 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ändning​

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.

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.

<Card>
  <CardHeader heading='Inköpslista' />
  <CardBody>
    <Text>
      <ul>
        <li>3 Apelsiner</li>
        <li>5 bananer</li>
        <li>2 Kiwi</li>
      </ul>
    </Text>
  </CardBody>
  <CardActions>
    <Button
      variant='secondary'
      icon={Pen}
    >
      Redigera
    </Button>
    <Button
      variant='tertiary'
      icon={Trash2}
    >
      Ta bort
    </Button>
  </CardActions>
</Card>

Inköpslista

  • 3 Apelsiner
  • 5 bananer
  • 2 Kiwi

Kort med bild​

Använd <CardImage> för att visa en bild på kortet. Bilden ska antingen ligga överst eller direkt under <CardHeader> om den ligger överst.

<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​

Ett kort kan innehålla en meny för sekundära handlingar. 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'
      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 vi använda <CardLink> 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.

Dina uppgifter

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

Client Side Routing​

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