## Feature Examples
### Background
- description: Define a gallery item's background using one of the following:\ - \`backgroundImageUrl\` - use it to pass a link to the background image source file.\ - \`backgroundImageNode\` - use it to pass a custom component as a background.
- example:
```jsx
primaryActionProps={{
label: 'Button',
}}
/>
primaryActionProps={{
label: 'Button',
}}
/>
;
```
### Image placement
- description: Specify the placement of the background image using one of the following: \- `top` (default) - Places the background image on top of the footer, as a ``. \- `side` - Places the image in the footer, to the left of the title/subtitle.
- example:
```jsx
;
```
### Title
- description: Give more context to a card with following props:\ - \`title\` - use it for a short and descriptive card title.\ - \`subtitle\` - use it for a short caption to provide more narrative.
- example:
```jsx
;
```
### Badge
- description: Emphasise item status with a \`badge\`. Use it to promote new items or highlight ones that require attention.
- example:
```jsx
Badge}
/>
;
```
### Actions
- description: Define primary and secondary actions for an item with \`primaryActionProps\` and \`secondaryActionProps\`. This component is an interactive element so primary action is mandatory, while the secondary button is optional.
- example:
```jsx
;
```
### Draggable
- description: Control if the component is draggable with these properties: - `draggable`: Enables drag behavior and shows an interactive drag handle on the card. - `dragDisabled`: Disables dragging when draggable is enabled, keeping the drag handle visible but non-interactive.
- example:
```jsx
() => (
);
```
### Settings menu
- description: Allow users to act on a specific item by providing a `settingsMenu`. Popover menu can contain any required number of actions inside of it.
- example:
```jsx
() => (
(
)}
>
}
/>
}
/>
} />
}
/>
}
/>
);
```
### Size
- description: Control the size of the card. It supports 2 sizes: \- `small`. Use this size if the card is stretched to less than 200px. \- `medium` (default). This size is supposed to be used if the card is stretched to more than or equal 200px in the container. Note that if `imagePlacement="side"` is enabled, the size prop will change the size of the image.
- example:
```jsx
;
```
### Suffix
- description: Define a component (commonly icon) to be added to the footer. Use `showSuffixOnHover` to make it appear only when hovering over the card.
- example:
```jsx
}
/>
}
showSuffixOnHover
/>
;
```
### Skin
- description: Control the look of the card border with `skin` prop. \- `standard` (default) shows a shadow around the card \- `outlined` gives a one pixel border around the card
- example:
```jsx
;
```
### Skin visibility
- description: Control if the `skin` should be visible at all times or only on hover with `skinVisibility` prop.
- example:
```jsx
;
```
## Common Use Case Examples
### Product list
- description: Use `` to list down visual items, such as dishes, blog posts, products or their collections. These lists are commonly accompanied by an `` component at the end of the list which allows users to add a new item to the grid.
- example:
```jsx
() => {
const dishes = [
{
id: 'breakfast-soup',
imageSrc:
'https://images.unsplash.com/photo-1547592166-23ac45744acd?auto=format&fit=crop&w=1200&q=80',
title: 'Breakfast Soup',
subtitle: '$7.89',
badgeText: 'New',
badgeSkin: 'success',
},
{
id: 'lemon-ricotta-pasta',
imageSrc:
'https://images.unsplash.com/photo-1555949258-eb67b1ef0ceb?auto=format&fit=crop&w=1200&q=80',
title: 'Lemon Ricotta Pasta',
subtitle: '$15.99',
badgeText: 'Popular',
badgeSkin: 'standard',
},
] as const;
return (
}
dataHook="new-dish-button"
>
New Dish
}
/>
{dishes.map((dish) => (
|
{dish.title}}
subtitle={dish.subtitle}
badge={{dish.badgeText}}
primaryActionProps={{ label: 'Edit' }}
settingsMenu={
(
)}
>
}
/>
}
/>
}
/>
}
/>
}
/>
}
/>
|
))}
|
);
};
```