ContentSlider

Demos

Slider only

Fullscreen
import {
  ContentSlider,
  ContentSliderItem,
  ContentTile,
  Image,
} from 'marketing-ui'

function Demo() {
  return (
    <ContentSlider>
      {new Array(10).fill(1).map(() => {
        return (
          <ContentSliderItem>
            <ContentTile
              backgroundImage={
                <Image
                  data-image-size='content-tile-background-image'
                  src='https://res.cloudinary.com/sonax-gmbh/image/fetch/v1758195920/https://images.ctfassets.net/myziqoe43fa7/5kAMct2dRyzFqRcNY3xHeg/f1b3fea53c5477f3ea4e30b61f80a318/SONAX_SmokeEx_2.jpg'
                />
              }
              headline='How to Take Care of Your Interior.'
              copy='Your car is more than just a way to get around. It’s a trusted companion – standing by your side in the moments that matter. Keeping it clean isn’t about perfection. It’s about taking care of a good friend.'
              link='Read more'
            />
          </ContentSliderItem>
        )
      })}
    </ContentSlider>
  )
}

export default Demo

No background image

Fullscreen
import {
  ContentSlider,
  ContentSliderItem,
  ContentTile,
  Image,
} from 'marketing-ui'

function Demo() {
  return (
    <ContentSlider
      tagline='The right care, made easy.'
      copy='Whether you’re new to car care or already experienced, we help you find the right solution for your problem.'
      action={<a href='#'>Show all</a>}
    >
      {new Array(10).fill(1).map(() => {
        return (
          <ContentSliderItem>
            <ContentTile
              backgroundImage={
                <Image
                  data-image-size='content-tile-background-image'
                  src='https://res.cloudinary.com/sonax-gmbh/image/fetch/v1758195920/https://images.ctfassets.net/myziqoe43fa7/5kAMct2dRyzFqRcNY3xHeg/f1b3fea53c5477f3ea4e30b61f80a318/SONAX_SmokeEx_2.jpg'
                />
              }
              headline='How to Take Care of Your Interior.'
              copy='Your car is more than just a way to get around. It’s a trusted companion – standing by your side in the moments that matter. Keeping it clean isn’t about perfection. It’s about taking care of a good friend.'
              link='Read more'
            />
          </ContentSliderItem>
        )
      })}
    </ContentSlider>
  )
}

export default Demo

Single

Fullscreen
import {
  ContentSlider,
  ContentSliderItem,
  ContentTile,
  Image,
} from 'marketing-ui'

function Demo() {
  return (
    <ContentSlider
      backgroundImage={
        <Image
          data-image-size='content-slider-background-image'
          src='https://res.cloudinary.com/sonax-gmbh/image/fetch/v1762172882/https://images.ctfassets.net/myziqoe43fa7/3x7j6lwUucmP3jRnXenksG/84dd8cbd5a91de69ce6d72b16cefde94/SNX__GREENFORREST__LANDING.png'
        />
      }
      tagline='The right care, made easy.'
      copy='Whether you’re new to car care or already experienced, we help you find the right solution for your problem.'
    >
      <ContentSliderItem>
        <ContentTile
          variant='horizontal'
          backgroundImage={
            <Image
              data-image-size='content-tile-background-image-horizontal'
              src='https://res.cloudinary.com/sonax-gmbh/image/fetch/v1758195920/https://images.ctfassets.net/myziqoe43fa7/5kAMct2dRyzFqRcNY3xHeg/f1b3fea53c5477f3ea4e30b61f80a318/SONAX_SmokeEx_2.jpg'
            />
          }
          headline='How to Take Care of Your Interior.'
          copy='Your car is more than just a way to get around. It’s a trusted companion – standing by your side in the moments that matter. Keeping it clean isn’t about perfection. It’s about taking care of a good friend.'
          link='Read more'
        />
      </ContentSliderItem>
    </ContentSlider>
  )
}

export default Demo

Double

Fullscreen
import {
  ContentSlider,
  ContentSliderItem,
  ContentTile,
  Image,
} from 'marketing-ui'

function Demo() {
  return (
    <ContentSlider
      backgroundImage={
        <Image
          data-image-size='content-slider-background-image'
          src='https://res.cloudinary.com/sonax-gmbh/image/fetch/v1762172882/https://images.ctfassets.net/myziqoe43fa7/3x7j6lwUucmP3jRnXenksG/84dd8cbd5a91de69ce6d72b16cefde94/SNX__GREENFORREST__LANDING.png'
        />
      }
      tagline='The right care, made easy.'
      copy='Whether you’re new to car care or already experienced, we help you find the right solution for your problem.'
    >
      {new Array(2).fill(1).map(() => {
        return (
          <ContentSliderItem>
            <ContentTile
              backgroundImage={
                <Image
                  data-image-size='content-tile-background-image'
                  src='https://res.cloudinary.com/sonax-gmbh/image/fetch/v1758195920/https://images.ctfassets.net/myziqoe43fa7/5kAMct2dRyzFqRcNY3xHeg/f1b3fea53c5477f3ea4e30b61f80a318/SONAX_SmokeEx_2.jpg'
                />
              }
              headline='How to Take Care of Your Interior.'
              copy='Your car is more than just a way to get around. It’s a trusted companion – standing by your side in the moments that matter. Keeping it clean isn’t about perfection. It’s about taking care of a good friend.'
              link='Read more'
            />
          </ContentSliderItem>
        )
      })}
    </ContentSlider>
  )
}

export default Demo

Multiple

Fullscreen
import {
  ContentSlider,
  ContentSliderItem,
  ContentTile,
  Image,
} from 'marketing-ui'

function Demo() {
  return (
    <ContentSlider
      backgroundImage={
        <Image
          data-image-size='content-slider-background-image'
          src='https://res.cloudinary.com/sonax-gmbh/image/fetch/v1762172882/https://images.ctfassets.net/myziqoe43fa7/3x7j6lwUucmP3jRnXenksG/84dd8cbd5a91de69ce6d72b16cefde94/SNX__GREENFORREST__LANDING.png'
        />
      }
      tagline='The right care, made easy.'
      copy='Whether you’re new to car care or already experienced, we help you find the right solution for your problem.'
      action={<a href='#'>Show all</a>}
    >
      {new Array(10).fill(1).map(() => {
        return (
          <ContentSliderItem>
            <ContentTile
              backgroundImage={
                <Image
                  data-image-size='content-tile-background-image'
                  src='https://res.cloudinary.com/sonax-gmbh/image/fetch/v1758195920/https://images.ctfassets.net/myziqoe43fa7/5kAMct2dRyzFqRcNY3xHeg/f1b3fea53c5477f3ea4e30b61f80a318/SONAX_SmokeEx_2.jpg'
                />
              }
              headline='How to Take Care of Your Interior.'
              copy='Your car is more than just a way to get around. It’s a trusted companion – standing by your side in the moments that matter. Keeping it clean isn’t about perfection. It’s about taking care of a good friend.'
              link='Read more'
            />
          </ContentSliderItem>
        )
      })}
    </ContentSlider>
  )
}

export default Demo

Props