MediaAndContent

The MediaAndContent component composes a piece of media (usually an image) with text based content.

Props

Name	Type	Default	Description
`children`	`React.ReactNode`		Content.
`media`	`React.ReactNode`		Media.
`prependMedia`	`React.ReactNode`		Content prepended to the media.
`largeGutter`	`boolean`	`false`	When enabled, the content column is narrower and there is an additional 1 column gap between the columns.
`reverse`	`boolean`	`false`	Reverse the order of the columns. This does not affect the order for small viewports.

Usage


<MediaAndContent media={<p style={{ backgroundColor: 'pink', height: 300 }}>Media.</p>}>
  <p>Hello, I am some content.</p>
  <p>and some more&hellip;</p>
</MediaAndContent><MediaAndContent media={<p style={{ backgroundColor: 'pink', height: 300 }}>Media.</p>}>
  <p>Hello, I am some content.</p>
  <p>and some more&hellip;</p>
</MediaAndContent>

Reverse


<MediaAndContent media={<p>Media.</p>} reverse>
  <p>Hello, I am some content.</p>
</MediaAndContent><MediaAndContent media={<p>Media.</p>} reverse>
  <p>Hello, I am some content.</p>
</MediaAndContent>

Large gutter


<MediaAndContent media={<p>Media.</p>} largeGutter>
  <p>Hello, I am some content.</p>
</MediaAndContent><MediaAndContent media={<p>Media.</p>} largeGutter>
  <p>Hello, I am some content.</p>
</MediaAndContent>

Large gutter reverse


<MediaAndContent media={<p>Media.</p>} largeGutter reverse>
  <p>Hello, I am some content.</p>
</MediaAndContent><MediaAndContent media={<p>Media.</p>} largeGutter reverse>
  <p>Hello, I am some content.</p>
</MediaAndContent>

Prepended content


<MediaAndContent
  media={<p>Media.</p>}
  prependMedia={<p>Content prepended to media.</p>}
>
  <p>Hello, I am some content.</p>
</MediaAndContent><MediaAndContent
  media={<p>Media.</p>}
  prependMedia={<p>Content prepended to media.</p>}
>
  <p>Hello, I am some content.</p>
</MediaAndContent>