RichtextMedia

Demos

Image right

Fullscreen
import { CtaButton, Image, Prose, RichtextMedia } from 'marketing-ui'

function Demo() {
  return (
    <RichtextMedia
      imageAlignment='right'
      image={
        <Image
          data-image-size='richtext-media-image'
          src='https://res.cloudinary.com/sonax-gmbh/image/fetch/v1762172882/https://images.ctfassets.net/myziqoe43fa7/3x7j6lwUucmP3jRnXenksG/84dd8cbd5a91de69ce6d72b16cefde94/SNX__GREENFORREST__LANDING.png'
        />
      }
      heading='Frost Defense with Forest Sense.'
      copy={
        <Prose>
          <strong>Pine? We’ve got you covered. Winter? Bring it on.</strong>
          {' '}
          {`With crystal-clear visibility and reliable performance, you'll stay safe through every snowy morning and icy night — thanks to our ready-to-use winter windshield cleaner, delivered in a bold 5-liter pack full of pine power`}
        </Prose>
      }
      action={<CtaButton>Discover more</CtaButton>}
    />
  )
}

export default Demo

Image left

Fullscreen
import { CtaButton, Image, Prose, RichtextMedia } from 'marketing-ui'

function Demo() {
  return (
    <RichtextMedia
      imageAlignment='left'
      image={
        <Image
          data-image-size='richtext-media-image'
          src='https://res.cloudinary.com/sonax-gmbh/image/fetch/v1762172882/https://images.ctfassets.net/myziqoe43fa7/3x7j6lwUucmP3jRnXenksG/84dd8cbd5a91de69ce6d72b16cefde94/SNX__GREENFORREST__LANDING.png'
        />
      }
      heading='Frost Defense with Forest Sense.'
      copy={
        <Prose>
          <strong>Pine? We’ve got you covered. Winter? Bring it on.</strong>
          {' '}
          {`With crystal-clear visibility and reliable performance, you'll stay safe through every snowy morning and icy night — thanks to our ready-to-use winter windshield cleaner, delivered in a bold 5-liter pack full of pine power`}
        </Prose>
      }
      action={<CtaButton>Discover more</CtaButton>}
    />
  )
}

export default Demo

Props