Card
Kort
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
- Yarn
- pnpm
npm install @midas-ds/components
yarn add @midas-ds/components
pnpm add @midas-ds/components
import { Card } from '@midas-ds/components'
API
| Namn | Typ | Standard | Beskrivning |
|---|---|---|---|
| image | { source: string; description: string; } | - | Optional image displayed at the top of card |
| background | boolean | false | Sets background to predetermined color |
| 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. |