List

Demos

Default

Fullscreen
import {
  Badge,
  Icon,
  Image,
  Link,
  List,
  ListItem,
  PlainButton,
} from 'marketing-ui'
import { IconArrowsRepeat } from 'icons'

function Demo() {
  return (
    <List
      pagination={
        <PlainButton
          iconStart={<Icon i={IconArrowsRepeat} />}
          label='Load more'
        />
      }
    >
      <ListItem
        headline='Basic & Expert Combo Seminar.'
        copy='With the Basic & Expert Seminar bundle, you’ll learn all the essential fundamentals and hands-on tech-niques for using our professional products correctly in your daily work.'
        action={<Link label='Learn more' />}
        tagline={<Badge label='399,00€' />}
        image={
          <Image
            data-image-size='list-item-image'
            src='https://res.cloudinary.com/sonax-gmbh/image/fetch/v1758195920/https://images.ctfassets.net/myziqoe43fa7/4Fg0JzIeD2uNk81nHniywO/19bb68f3d130c9166287a6e1079ce94e/6258355ab944-sx_awb_exzenterpolieren_flex_hybridwollpad_seminar_detailing_de.png'
          />
        }
      />
      <ListItem
        headline='Basic & Expert Combo Seminar.'
        copy='With the Basic & Expert Seminar bundle, you’ll learn all the essential fundamentals and hands-on tech-niques for using our professional products correctly in your daily work.'
        action={<Link label='Learn more' />}
        tagline={<Badge label='399,00€' />}
        image={
          <Image
            data-image-size='list-item-image'
            src='https://res.cloudinary.com/sonax-gmbh/image/fetch/v1758195920/https://images.ctfassets.net/myziqoe43fa7/4Fg0JzIeD2uNk81nHniywO/19bb68f3d130c9166287a6e1079ce94e/6258355ab944-sx_awb_exzenterpolieren_flex_hybridwollpad_seminar_detailing_de.png'
          />
        }
      />
      <ListItem
        headline='Basic & Expert Combo Seminar.'
        copy='With the Basic & Expert Seminar bundle, you’ll learn all the essential fundamentals and hands-on tech-niques for using our professional products correctly in your daily work.'
        action={<Link label='Learn more' />}
        tagline={<Badge label='399,00€' />}
        image={
          <Image
            data-image-size='list-item-image'
            src='https://res.cloudinary.com/sonax-gmbh/image/fetch/v1758195920/https://images.ctfassets.net/myziqoe43fa7/4Fg0JzIeD2uNk81nHniywO/19bb68f3d130c9166287a6e1079ce94e/6258355ab944-sx_awb_exzenterpolieren_flex_hybridwollpad_seminar_detailing_de.png'
          />
        }
      />
    </List>
  )
}

export default Demo

Props