Thinkport

Lorem ipsum

Dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

Consetetur sadipscing

Elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

ItemGrid

Grid-Layout

Minimales Beispiel für die ItemGrid-Komponente.

Codebeispiel

<ItemGrid
  items={[
    { title: 'Lorem ipsum', description: 'Dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.', icon: 'tabler:star' },
    { title: 'Consetetur sadipscing', description: 'Elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.', icon: 'tabler:rocket' },
  ]}
  columns={3}
/>

Wiki-Dokumentation Quellcode

Lorem ipsum

Dolor sit amet

Consetetur sadipscing

Elitr, sed diam

Bild-Klassen steuern

classes.image

Die Bildhöhe und weitere Styles werden über classes.image gesteuert (z. B. h-32, object-contain, Padding/Rounding). Es gibt keine separate Prop für die Bildhöhe.

Codebeispiel

<ItemGrid
  items={[
    { title: 'Lorem ipsum', description: 'Dolor sit amet', image: { src: '/assets/images/default.png', alt: 'Lorem ipsum' } },
    { title: 'Consetetur sadipscing', description: 'Elitr, sed diam', image: { src: '/assets/images/default.png', alt: 'Consetetur sadipscing' } },
  ]}
  columns={3}
  classes={{ image: 'h-32 object-contain bg-gray-50 p-2 rounded-md' }}
/>

Wiki-Dokumentation Quellcode