Skip to main content

​
1. Install dependencies

Install the InkDes Email package locally and a few components. 
# pnpm
pnpm add @inkdes-email/components

# npm
npm install @inkdes-email/components

# yarn
yarn add @inkdes-email/components

​
2. Usage

import { Img } from "@inkdes-email/components";

export default function Email() {
  return <Img src="cat.jpg" alt="Cat" width={300} height={300} />;
}

​
Alignment & styling

<Img
  src="banner.png"
  alt="Banner"
  width={600}
  center
  direction="ltr"
  borderRadius="8px"
  spacing="20px"
/>

​
Props

NameTypeRequiredDefaultDescription
srcstringYes""Path or URL to the image
altstringNo”image”Alternate description for the image
widthnumber | stringNo—Image width. Numbers are treated as px in style
heightnumber | stringNo—Image height. Numbers are treated as px in style
centerbooleanNofalseCenters the image within the table cell
borderRadiusstringNo—Applied as CSS border-radius on the image
dir”ltr” | “rtl”NoComes from wrapping Html component’s dir context prop which is ltrText direction
spacingstringNoComes from wrapping Html component’s defaultSpacing context prop which is 20pxSpacing bottom, by default comes from Html defaultSpacing prop
paddingstringNo—Custom padding for container cell; overrides default bottom spacing. In plain mode, applied to the image style.
styleReact.CSSPropertiesNo—
plainbooleanNofalseReturns plain image without container and spacing
hrefstringNo-If you want to convert the image to be clickable