ContentSlider

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;

import {
  ContentSlider,
  ContentSliderItem,
  ContentTile,
  Image,
  PlainButton,
} 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={<PlainButton size="small" label="Show all" />}
    >
      {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;

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;

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;

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;