Styling with Carbon Design

[Cslamonde]

I'm building an e-commerce web app and I'm having a challenge structuring fetched data into columns and rows using carbon design. How do I add a picture, information like price, category and description together with a buttons that are responsive in every device.
@metonym

[metonym]

This is a fairly broad question but I'm happy to link some resources for you to get started.

For displaying data in "columns and rows," I would recommend starting with the DataTable component to see if it fits your needs. It accepts data in a tabular format and supports the basics functions you would expect from a table, like sorting, filtering, expansion, pagination etc..

The Carbon Tutorial for Svelte has a an example component that you can reference. It fetches data in the onMount hook and then renders a paginated table with the response.

[Cslamonde]

Lemme narrow it down. If you visit the Alibaba website, you'll see how the data has been displayed. If you scroll through the products, you can see a lit bit of the information like a picture, a brief description and the price. In addition, it is responsive. How can I achieve that?

[Cslamonde]

@metonym, Is there a card component in v.11?

[metonym]

The closest would be the Tile component.

[Cslamonde]

Thanks