## 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', }, ]; return ( } dataHook="new-dish-button"> New Dish } /> {dishes.map((dish) => ( {dish.title}} subtitle={dish.subtitle} badge={{dish.badgeText}} primaryActionProps={{ label: 'Edit' }} settingsMenu={ ( )} > } /> } /> } /> } /> } /> } /> ))} ); }; ```