## Feature Examples
### Structure
- description: Component consists of two main containers:\ - `` - a parent container that accepts image or video content via \`media\` prop.\ - `` - child container that accepts items that should be displayed on top of a media as child elements.
- example:
```jsx
Area for the media content
}
>
Area for overlay elements
;
```
### Overlay content placement
- description: Control the position of overlay elements with placement prop. It supports 5 positions:\ - \`top-start\`\ - \`top-end\`\ - \`middle\`\ - \`bottom-start\`\ - \`bottom-end\`
- example:
```jsx
}>
Top Start
Top EndMiddle
Bottom Start
Bottom End
;
```
### Initial overlay skin
- description: Control initial overlay type with \`skin\` prop. It supports 3 skins:\ - \`none\` (default) - use when no visual overlay is required.\ - \`gradient\` - use it when relevant data needs to be visible in a default state of the element.\ - \`dark\` - use it when media underneath is less important, e.g. as a last item in galleries with a total number or images on top.
- example:
```jsx
NoneGradientDark;
```
### Hover overlay skin
- description: Control hover overlay type with \`hoverSkin\` prop. It supports 3 skins:\ - \`none\` (default) - use for static media items.\ - \`gradient\` - use it when hovered item must remain visible, but overlaid content needs a contrast.\ - \`dark\` - use it to bring the maximum contrast of relevant content on interactive element hover.
- example:
```jsx
NoneGradientDark;
```
### Overlay content visibility
- description: Specify when overlay content should be revealed for the user with visible prop. It supports 3 values:\ - \`default\` (default) - use it to hide overlay content on element hover.\ - \`hover\` - use it to reveal overlay content on element hover.\ - \`always\` - use it to display overlay content all the time.
- example:
```jsx
Visible in initial state
Visible on hover
Always visible
;
```
### Border radius
- description: Define border radius in pixels with \`borderRadius\` prop. Get rid of a default border radius with \`removeRoundedBorders\` prop.
- example:
```jsx
;
```
### Custom media element
- description: Pass a custom \`media\` element with media prop.
- example:
```jsx
}
>
Item Title
;
```
### Drag handle
- description: Use a compound `` component for reorderable components. Actions should be placed at the top right corner in this scenario.
- example:
```jsx
}
>
;
```
## Common Use Case Examples
### Social media gallery
- description: Use media overlay to place identifying data, such as logo or video duration on top of a media item.
- example:
```jsx
02:32
01:21
00:43
;
```
### Item lists
- description: Use media overlay to list down visual items, such as dishes, that can be edited, marked as favourite or interacted with in any other way.
- example:
```jsx
() => {
const Controls = () => [
,
}
>
,
];
return (
New!
Breakfast toast
Popular
Lemon Ricotta Pasta
Spanish Paella
);
};
```
### Image gallery
- description: Use media overlay to place static data on top of an image, e.g. to place a counter indicating how many more images there are.
- example:
```jsx
{}} media="TravelExample5.jpg">
+128
;
```
### Content edit
- description: Use media overlay to store actions related to that media element, such as edit, refresh or delete.
- example:
```jsx
}>Change Image
;
```
### Reordable list
- description: Use middle placement at the center to position recordable element indication. This function should use a compound `` component.
- example:
```jsx
() => {
const Media = ({ img }) => (
}
>
);
return (
);
};
```
### Video Player
- description: Use MediaOverlay as a video player by setting \`isVideo\` prop to true and providing a video source via \`videoSrc\` prop. The component will automatically display play/pause controls and handle video playback.
- example:
```jsx
Big Buck Bunny
02:15
;
```