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.

<Card
  title='Ananas'
  content='Tropisk frukt med taggigt skal'
  image={{
    description: 'Tropisk frukt med taggigt skal',
    source:
      'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Pineapple_and_cross_section.jpg/640px-Pineapple_and_cross_section.jpg',
  }}
  link={{ href: '#', children: 'Läs mer om denna frukt' }}
  headingTag='h2'
/>

Ananas

Tropisk frukt med taggigt skal

Läs mer om denna frukt

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'

API

Name	Type	Default	Description
image	{ source: string; description: string; }	-	Optional image displayed at the top of card
background	boolean	false	Sets background to predetermined color @deprecated Not supported since v5.0.0
title *	string	-	Header as h1 for the component rendered below image if there is one
content *	string	-	Content as p element for the component
link *	LinkProps<(<C extends React.ElementType = (props: any) => any>({ children, standalone, stretched, icon: IconComponent, className, as, ...rest }: LinkProps<C>) => Element)>	-	Props for when card element is clicked
headingTag	ElementType<any, keyof IntrinsicElements>	'h1'	Adjust the tag to be used for the header
customImageComponent	ReactElement<any, string | JSXElementConstructor<any>>	-	Custom image component to be used instead of the default img tag
customLinkComponent	ElementType<any, keyof IntrinsicElements>	-	Custom link component to be used instead of the default a tag. For example your client side router link.