# `PhiaUi.Components.Layout.Cover`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/layout/cover.ex#L1)

Full-bleed image or video background with content overlay.

Creates a hero section or banner with a background media element and
centered content on top. Supports image and video backgrounds with
configurable overlay darkness and content positioning.

## Examples

    <.cover src="/images/hero.jpg" height={:full}>
      <h1 class="text-4xl font-bold text-white">Welcome</h1>
    </.cover>

    <.cover video_src="/videos/bg.mp4" overlay={:gradient} height={:viewport}>
      <div class="text-center text-white">
        <h2 class="text-5xl font-bold">Watch the demo</h2>
      </div>
    </.cover>

## Height presets

| Height      | CSS                |
|-------------|--------------------|
| `:sm`       | `h-48`             |
| `:md`       | `h-64`             |
| `:lg`       | `h-96`             |
| `:full`     | `h-full`           |
| `:viewport` | `min-h-dvh`        |

# `cover`

Renders a full-bleed cover section with background media and overlay.
## Attributes

* `src` (`:string`) - Background image URL. Defaults to `nil`.
* `video_src` (`:string`) - Background video URL. Defaults to `nil`.
* `video_type` (`:string`) - Video MIME type. Defaults to `"video/mp4"`.
* `height` (`:atom`) - Height preset. Defaults to `:lg`. Must be one of `:sm`, `:md`, `:lg`, `:full`, or `:viewport`.
* `overlay` (`:atom`) - Overlay style over the background media. Defaults to `:dark`. Must be one of `:none`, `:light`, `:dark`, or `:gradient`.
* `overlay_opacity` (`:atom`) - Overlay opacity level. Defaults to `:md`. Must be one of `:sm`, `:md`, or `:lg`.
* `position` (`:atom`) - Vertical alignment of the content. Defaults to `:center`. Must be one of `:top`, `:center`, or `:bottom`.
* `class` (`:string`) - Additional CSS classes. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.
## Slots

* `inner_block` (required) - Content overlaid on the background.

---

*Consult [api-reference.md](api-reference.md) for complete listing*