PhiaUi.Components.Layout.Cover (phia_ui v0.1.17)

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`

Summary

Functions

cover(assigns)

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

Functions

cover(assigns)

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.