## 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 End Middle 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 None Gradient Dark ; ``` ### 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 None Gradient Dark ; ``` ### 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 ; ``` ### 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 ```