> For the complete documentation index, see [llms.txt](https://shinedezign.gitbook.io/shark-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shinedezign.gitbook.io/shark-documentation/overview/media-banner.md).

# Media banner

<table data-header-hidden><thead><tr><th width="281"></th><th></th></tr></thead><tbody><tr><td>Section visibility</td><td>Select from the options to select the visibility of this section:<br>-Always<br>-Small devices only(On selecting this, the section will be visible on mobile devices only.)<br>-Large devices only</td></tr><tr><td>Enable full width</td><td>Select this checkbox to enable full width of the section.</td></tr><tr><td>Enable parallax</td><td>Select this checkbox to enable the parallax.</td></tr><tr><td>Enable content parallax</td><td>Select this checkbox to enable the content parallax. It will be applicable only when parallax is enabled.</td></tr><tr><td>Image</td><td>Choose any image.</td></tr><tr><td>Video</td><td>Choose any video.</td></tr><tr><td>Desktop height</td><td>Choose the desktop height from the following options:<br>-350px<br>-550px<br>-750px<br>-Fullscreen</td></tr><tr><td>Mobile height</td><td>Choose the mobile height from the following options:<br>-300px<br>-400px<br>-500px</td></tr><tr><td><h4>Text</h4></td><td><strong>Heading</strong><br>Add heading text.<br><em>(Note: To highlight the text with a different color, simply wrap it in bold.)</em><br><br><strong>Heading size</strong><br>Select the heading size from the H1-H6 options.<br><br><strong>Heading tag</strong><br>Choose the heading tag from H1-H6 for SEO purposes.<br><br><strong>Description</strong><br>Add any text to appear as the description.</td></tr><tr><td>Button</td><td><strong>Style</strong><br>Choose the button style from the following options:<br>-Solid<br>-Outline<br>-Link<br><br><strong>Text</strong><br>Enter the button text.<br><br><strong>Link</strong><br>Enter the button link.<br><br><strong>Size</strong><br>Choose the button size from the following options:<br>-Small<br>-Medium<br>-Large<br>-Regular</td></tr><tr><td><h4>Content</h4></td><td>(<em>Note: Desktop and mobile positions are not applicable with the content parallax.</em>)<br><br><strong>Desktop width</strong><br>Choose from small, medium or large to determine the desktop content width.<br><br><strong>Desktop position</strong><br>Choose from top, middle or bottom to determine the desktop position.<br><br><strong>Mobile position</strong><br>Choose from top, middle or bottom to determine the mobile position.<br><br><strong>Desktop alignment</strong><br>Choose from left, center or right to determine the desktop content alignment.<br><br><strong>Mobile alignment</strong><br>Choose from left, center or right to determine the mobile content alignment.</td></tr><tr><td>Colors</td><td><p><strong>Heading</strong><br>Choose the heading text color.<br><br><strong>Heading highlight</strong></p><p>Choose any color for the highlighted heading color.<br><br><strong>Description</strong><br>Choose the description text color.<br><br><strong>Banner overlay</strong><br>Choose the overlay color for the banner.<br><br><strong>Banner overlay opacity</strong><br>Adjust the range bar to determine the overlay opacity.</p></td></tr><tr><td>Button</td><td><strong>Background</strong><br>Choose any color for the button background.<br><br><strong>Text</strong><br>Choose any color for the button text.<br><br><strong>Border</strong><br>Choose any color for the button border.<br><br><strong>Hover background</strong><br>Choose any hover color for the button background.<br><br><strong>Hover text</strong><br>Choose any hover color for the button text.<br><br><strong>Hover border</strong><br>Choose any hover color for the button border.</td></tr></tbody></table>