DownloadList

Demos

Default

Fullscreen
import { Download, DownloadList, Image } from 'marketing-ui'

function Demo() {
  return (
    <DownloadList>
      <Download
        description='Blickfang – das markante Gebäude mit den Fassadenfarben Schwarz und Gelb ist schon von weitem sichtbar. Foto: Sonax'
        label='Download'
        href='//downloads.ctfassets.net/myziqoe43fa7/58qWmTwYh8dJTTuAw6Vgtk/b895eefd2d576e5b9939cdc407bfa355/ZIP_-_SONAX_Kalkentfernung.zip'
        target='_blank'
        image={
          <Image
            data-image-size='download-image'
            src='https://images.ctfassets.net/myziqoe43fa7/2zpD0Wo918uKosvbaUJDBk/7eca6a3e37287b3338451ff3192c4db9/SONAX_Kalkentfernung_6.jpg'
          />
        }
      />
      <Download
        description='Blickfang – das markante Gebäude mit den Fassadenfarben Schwarz und Gelb ist schon von weitem sichtbar. Foto: Sonax'
        label='Download'
        image={
          <Image
            data-image-size='download-image'
            src='https://images.ctfassets.net/myziqoe43fa7/2zpD0Wo918uKosvbaUJDBk/7eca6a3e37287b3338451ff3192c4db9/SONAX_Kalkentfernung_6.jpg'
          />
        }
      />
      <Download
        description='Blickfang – das markante Gebäude mit den Fassadenfarben Schwarz und Gelb ist schon von weitem sichtbar. Foto: Sonax'
        label='Download'
        image={
          <Image
            data-image-size='download-image'
            src='https://images.ctfassets.net/myziqoe43fa7/2zpD0Wo918uKosvbaUJDBk/7eca6a3e37287b3338451ff3192c4db9/SONAX_Kalkentfernung_6.jpg'
          />
        }
      />
      <Download
        description='Blickfang – das markante Gebäude mit den Fassadenfarben Schwarz und Gelb ist schon von weitem sichtbar. Foto: Sonax'
        label='Download'
        image={
          <Image
            data-image-size='download-image'
            src='https://images.ctfassets.net/myziqoe43fa7/2zpD0Wo918uKosvbaUJDBk/7eca6a3e37287b3338451ff3192c4db9/SONAX_Kalkentfernung_6.jpg'
          />
        }
      />
    </DownloadList>
  )
}

export default Demo

No image

Fullscreen
import { Download, DownloadList } from 'marketing-ui'

function Demo() {
  return (
    <DownloadList variant='noImage'>
      <Download
        variant='noImage'
        label='Reinigungsleitfaden Außen und Innen'
        href='//downloads.ctfassets.net/myziqoe43fa7/58qWmTwYh8dJTTuAw6Vgtk/b895eefd2d576e5b9939cdc407bfa355/ZIP_-_SONAX_Kalkentfernung.zip'
        target='_blank'
        fileSize='5MB'
        fileType='PDF'
      />
      <Download
        label='Druckpumpzerstäuber Navigator'
        variant='noImage'
        fileSize='5MB'
        fileType='PDF'
      />
      <Download
        label='Pad Navigator'
        variant='noImage'
        fileSize='5MB'
        fileType='PDF'
      />
      <Download
        label='Druckpumpzerstäuber Navigator'
        variant='noImage'
        fileSize='5MB'
        fileType='PDF'
      />
    </DownloadList>
  )
}

export default Demo

Props