Image Content Twin

ImageContentTwin is a container component with both one and two column layout to render text content and an image.

Examples

Configuration

imageSrc: string

alt?: string

imageSources: { media: string; srcSet: string; type: string; height: number; width: number; }[]

A set of images (srcset) that will allow the browser to choose between on a viewport

image: React.ReactNode

A custom image component

wideImagePosition: 'right' | 'left'

narrowImagePosition: 'below' | 'above'

narrowImageHasPadding?: boolean

Removes narrow padding when set to false (Defaults to true)

borderRadius?: Theme['radii']

Applies a border-radius to the image when set. Defaults to no border-radius being applied.

Content guidelines

No more than two lines for a title. No more than one paragraph for body text.