---
name: Image Content Twin
menu: Patterns
parent: Modules
route: /patterns/image-content-twin
---

# Image Content Twin

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

## Variants

`ImageContentTwin` has two variants -

- **plain** - One and two column layout with plain images

- **curved** - One and two column layout with curved images

### Plain variant

#### Examples

```specimen-react
responsive: true
---

<PageContainer size="marketing">
<ImageContentTwin
  variant="plain"
  wideImagePosition="right"
  narrowImagePosition="below"
  imageSrc="https://storage.googleapis.com/static.bulb.co.uk/design/images/home.png"
  content={
    <Vspace spacing="saturn">
      <Heading level="h2" size="hippo">
        Get paid for the energy you generate at home
      </Heading>
      <Vspace>
        <Text>
          The government's Feed-in Tariff scheme (FIT) finishes on 31st March,
          so we're going to create our own product to pay people who export
          energy to the grid.
        </Text>
      </Vspace>
    </Vspace>
  }
/>
</PageContainer>
```

### Curved variant

```specimen-react
<PageContainer size="marketing">
<ImageContentTwin
  variant="curved"
  wideImagePosition="right"
  narrowImagePosition="below"
  imageSrc="https://storage.googleapis.com/static.bulb.co.uk/design/images/unicorns.png"
  content={
    <Vspace spacing="saturn">
      <Heading level="h2" size="hippo">
        Get paid for the energy you generate at home
      </Heading>
      <Vspace>
        <Text>
          The government's Feed-in Tariff scheme (FIT) finishes on 31st March,
          so we're going to create our own product to pay people who export
          energy to the grid.
        </Text>
      </Vspace>
    </Vspace>
  }
/>
</PageContainer>
```

## Configuration

`variant: 'curved' | 'plain'`

`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

`wideImagePosition: 'right' | 'left'`

```specimen-react
<ImageContentTwin variant="plain" wideImagePosition="right" imageSrc="https://storage.googleapis.com/static.bulb.co.uk/design/images/home.png" content={<p>example content</p>} />
```

```specimen-react
<ImageContentTwin variant="plain" wideImagePosition="left" imageSrc="https://storage.googleapis.com/static.bulb.co.uk/design/images/home.png" content={<p>example content</p>} />
```

`narrowImagePosition: 'below' | 'above'`

```specimen-react
responsive: true
---
<PageContainer size="marketing">
<ImageContentTwin variant="plain" wideImagePosition="right" narrowImagePosition="below"  imageSrc="https://storage.googleapis.com/static.bulb.co.uk/design/images/home.png" content={ <Vspace><h2>Some heading</h2><Vspace><p>example content</p></Vspace></Vspace>} />
</PageContainer>
```

```specimen-react
responsive: true
---
<PageContainer size="marketing">
<ImageContentTwin variant="plain" wideImagePosition="right" narrowImagePosition="above"  imageSrc="https://storage.googleapis.com/static.bulb.co.uk/design/images/home.png" content={<Vspace><h2>Some heading</h2><Vspace><p>example content</p></Vspace></Vspace>} />
</PageContainer>
```

## Content guidelines

![No more than two lines for a title.
No more than one paragraph for body text. ](ImageTwinContentGuidelines.png)
