@inkdes-email/card

Card component for email.

Installation

# pnpm
pnpm add @inkdes-email/card

# npm
npm install @inkdes-email/card

# yarn
yarn add @inkdes-email/card

Quick start

import { Text } from "@inkdes-email/components";
import { Card } from "@inkdes-email/card";

export default function EmailTemplate() {
  return <>
      <Card 
        header={<Text>Some header</Text>}
        content={<Text>Some content</Text>}
        footer={<Text>Some footer</Text>}
        headerBackgroundColor='#fff'
        contentBackgroundColor='#fff'
        footerBackgroundColor='#fff'
        borderRadius='24px' 
        padding='12px 15px'
        width='100%'
        spacing='20px' 
     />
  </>
}

Props

| Name | Type | Required | Default | Description | | -------- | --------------- | -------- | ------- | ----------- | | header | React.ReactNode | No | — | | | dir | "ltr" | "rtl" | No | Comes from wrapping Html component's dir context prop which is ltr | Text direction | | spacing | string | No | Comes from wrapping Html component's defaultSpacing context prop which is 20px | Spacing bottom, by default comes from Html defaultSpacing prop | | content | React.ReactNode | No | — | | | footer | React.ReactNode | No | — | | | headerBackgroundColor | string | No | #fff | — | | contentBackgroundColor | string | No | #fff | — | | footerBackgroundColor | string | No | #fff | — | | borderRadius | string | No | 24px | — | | padding | string | No | `` | inner padding | | width | string | No | 100% | |

License

MIT © iClasser