Card

Kort

Storybook

Komponent som är en yta med plats för information och åtgärder relaterat till ett specifikt ämne. Kort används primärt för att presentera innehåll på ett visuellt tilltalande sätt samt länka till innehållet.

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

import { Card } from '@midas-ds/components'

<Card>Kort</Card>

Kort

Användning

Kort börjar med en grundläggande komponent som endast definerar kortytan. Sedan finns flertalet underkomponenter som kan användas för att flexibelt bygga upp kortet med olika innehåll.

Komponent	Beskrivning
<CardContent>	Läggs runt content i ett kort.
<CardTitle>	Bidrar med konsekvent style för titel på kort.
<CardActions>	Skapar en yta för knappar eller annat som användaren kan klicka på på kortet.
<CardImage>	Används för att visa media på kortet.
<CardActionArea>	Gör hela kortytan klickbar.
<CardLink>	Läggs runt <CardTitle> för att skapa en länk.

import { Card, CardContent, CardTitle, Text } from '@midas-ds/components'

<Card>
  <CardContent>
    <CardTitle>Här är en titel</CardTitle>
    <Text>Här är lite innehåll</Text>
  </CardContent>
</Card>

Här är en titel

Här är lite innehåll

Titel

Titeln har alltid samma storlek rent grafiskt och är som standard en <h2> men för korrekt semantik kan den ändras med elementType. I exemplet nedan har titeln samma grafiska utseende som innan men beroende på vart kortet används kan semantiken behöva justeras.

<Card>
  <CardContent>
    <CardTitle
      elementType='h3'
    >
      Här är en titel
    </CardTitle>
    <Text>Här är lite innehåll</Text>
  </CardContent>
</Card>

Actions

<CardActions> används för att gruppera knappar eller andra interaktiva element i kortet. Det är viktigt att tänka på att inte överbelasta kortet med för många knappar, utan istället fokusera på de mest relevanta åtgärderna.

import { Card, CardContent, CardActions, CardTitle, Button, Text } from '@midas-ds/components'

<Card>
  <CardContent>
    <CardTitle>Här är en titel</CardTitle>
    <Text>Här är lite innehåll</Text>
    <CardActions>
      <Button
        variant='icon'
        icon={Pen}
      >
        Ändra
      </Button>
      <Button
        variant='icon'
        icon={X}
      >
        Avbryt
      </Button>
    </CardActions>
  </CardContent>
</Card>

Här är en titel

Här är lite innehåll

Primär action

Ett kort kan även ha en primär action 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.

import { Card, CardTitle, Text, CardActions, Button, CardActionArea } from '@midas-ds/components'
import { Pen, X } from 'lucide-react'

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

Länk

Det går även bra att kombinera standalone Link med card för att få en hel klickbar yta om kortet ska länka till något snarare än att göra något på sidan.

import { Card, CardTitle, Text, CardActions, Link } from '@midas-ds/components'

<Card>
  <CardContent>
    <CardLink>
      <CardTitle>Här är en titel</CardTitle>
    </CardLink>
    <Text>Här är lite innehåll</Text>
  </CardContent>
</Card>

Dina uppgifter

Här är lite innehåll

Media

<CardImage> används för att visa bilder på kortet.

import { Card, CardImage, CardContent, CardTitle, Text } from '@midas-ds/components'

<Card>
  <CardImage
    src='https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Pineapple_and_cross_section.jpg/640px-Pineapple_and_cross_section.jpg'
    alt='Ananas'
  />
  <CardContent>
    <CardLink href='#'>
      <CardTitle>Dina uppgifter</CardTitle>
    </CardLink>
    <Text>Namn: Namn Namnsson</Text>
  </CardContent>
</Card>

Dina uppgifter

Namn: Namn Namnsson

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>

API

Name	Type	Default	Description
horizontal	boolean	-	Stack content in card vertical or horizontal
children *	ReactNode	-	Card content, usually wrap with CardContent