## 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
;
```
### Settings menu
- description: Allow users to act on a specific item by providing a settings menu.
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 renderCardGalleryItem = ({ imageSrc, title, subtitle, badge }) => (
{title}}
subtitle={subtitle}
settingsMenu={
(
)}
>
}
/>
}
/>
}
/>
} />
}
/>
}
/>
);
return (
}>
New Dish
}
/>
{renderCardGalleryItem({
imageSrc: 'FoodExample1.jpg',
title: 'Breakfast Toast',
subtitle: '$7.89',
badge: (
New
),
})}
|
{renderCardGalleryItem({
imageSrc: 'FoodExample2.jpg',
title: 'Lemon Ricotta Pasta',
subtitle: '$15.99',
badge: (
Popular
),
})}
|
|
);
};
```