---
title: "Cards - Cloudscape Design System"
source: "https://cloudscape.design/components/cards/?tabId=playground&example=fully-selectable"
created: 2025-10-01
description: "Represents a collection of items."
---
- [Playground](https://cloudscape.design/components/cards/?tabId=playground)
- [Usage](https://cloudscape.design/components/cards/?tabId=usage)
## Configurator
## Code
This example uses [built-in internationalization](https://cloudscape.design/get-started/for-developers/internationalization/) to provide common UI strings. If you don't use this feature, you should provide the following properties:`ariaLabels`.
```jsx
import * as React from "react";
import Cards from "@cloudscape-design/components/cards";
import Box from "@cloudscape-design/components/box";
import SpaceBetween from "@cloudscape-design/components/space-between";
import Button from "@cloudscape-design/components/button";
import TextFilter from "@cloudscape-design/components/text-filter";
import Pagination from "@cloudscape-design/components/pagination";
import CollectionPreferences from "@cloudscape-design/components/collection-preferences";
export default () => {
const [
selectedItems,
setSelectedItems
] = React.useState([{ name: "Item 2" }]);
return (
<Cards
onSelectionChange={({ detail }) =>
setSelectedItems(detail?.selectedItems ?? [])
}
selectedItems={selectedItems}
ariaLabels={{
itemSelectionLabel: (e, i) => \`select ${i.name}\`,
selectionGroupLabel: "Item selection"
}}
cardDefinition={{
sections: [
{
id: "description",
content: item => item.description
},
{
id: "type",
content: item => item.type
}
]
}}
cardsPerRow={[
{ cards: 1 },
{ minWidth: 500, cards: 2 }
]}
entireCardClickable
items={[
{
name: "Item 1",
alt: "First",
description: "This is the first item",
type: "1A",
size: "Small"
},
{
name: "Item 2",
alt: "Second",
description: "This is the second item",
type: "1B",
size: "Large"
},
{
name: "Item 3",
alt: "Third",
description: "This is the third item",
type: "1A",
size: "Large"
},
{
name: "Item 4",
alt: "Fourth",
description: "This is the fourth item",
type: "2A",
size: "Small"
},
{
name: "Item 5",
alt: "Fifth",
description: "This is the fifth item",
type: "2A",
size: "Large"
},
{
name: "Item 6",
alt: "Sixth",
description: "This is the sixth item",
type: "1A",
size: "Small"
}
]}
loadingText="Loading resources"
selectionType="multi"
trackBy="name"
visibleSections={["description", "type"]}
empty={
<Box
margin={{ vertical: "xs" }}
textAlign="center"
color="inherit"
>
<SpaceBetween size="m">
<b>No resources</b>
<Button>Create resource</Button>
</SpaceBetween>
</Box>
}
filter={
<TextFilter filteringPlaceholder="Find resources" />
}
header={
<Header
counter={
selectedItems?.length
? "(" + selectedItems.length + "/10)"
: "(10)"
}
>
Common cards that are fully selectable
</Header>
}
pagination={
<Pagination currentPageIndex={1} pagesCount={2} />
}
preferences={
<CollectionPreferences
title="Preferences"
confirmLabel="Confirm"
cancelLabel="Cancel"
preferences={{
pageSize: 6,
visibleContent: [
"description",
"type",
"size"
]
}}
pageSizePreference={{
title: "Page size",
options: [
{ value: 6, label: "6 resources" },
{ value: 12, label: "12 resources" }
]
}}
visibleContentPreference={{
title: "Select visible content",
options: [
{
label: "Main distribution properties",
options: [
{
id: "description",
label: "Description"
},
{ id: "type", label: "Type" },
{ id: "size", label: "Size" }
]
}
]
}}
/>
}
/>
);
}
```
