<Cards>
A card grid that renders records from a ListContext. An alternative to <Table> for list views — each record is displayed as a Cloudscape card with key-value pairs derived from the resource schema.
Usage
Use <Cards> inside <List> instead of the default <Table>.
<List>
<Cards />
</List>
Custom fields
Pass field components as children to control which fields appear on each card.
<List>
<Cards>
<TextField source="name" />
<CurrencyField source="price" currency="USD" />
<BadgeField source="status" />
</Cards>
</List>
Include / Exclude
<Cards include={['name', 'price']} />
Custom card rendering
Use renderItem to fully control each card's content.
<Cards
renderItem={(record) => (
<div>
<strong>{record.name}</strong>
<p>{record.description}</p>
</div>
)}
/>
Set as default list component
To use <Cards> as the default for a resource, set listComponent on the ResourceSchema:
<ResourceSchema name="products" listComponent={Cards}>
...
</ResourceSchema>
Props
| Prop | Type | Default | Description |
|---|