General

Iframe

Iframe wrapper with responsive desktop and mobile heights and a required accessible title.

Overview

Iframe is the <iframe> wrapper for any embed that needs a controlled, responsive height. Pass the required src and accessible title, then tune the rendered height per breakpoint with desktopHeight (default 500px) and mobileHeight (default 600px); the heights bind to the iframe via v-bind CSS, so the embed swaps at the sm breakpoint without inline styles.

Key Business & UX Benefits

A required title prop forces an accessible screen-reader label on every embed, keeping third-party content compliant by default.
Per-breakpoint heights mean embedded media never collapses on mobile or stretches awkwardly on desktop, protecting layout stability across devices.
A consistent wrapper class anchors theme overrides such as max-width clamps or border radius without re-templating every embed call site.

Usage

Iframe Default

<Iframe
    src="https://example.com/embed/abc"
    title="Featured video"
    :desktop-height="500"
    :mobile-height="600"
  />

Feature List

Required `title` prop forces an accessible screen-reader label on every embed
Responsive height with separate `mobileHeight` (default 600px) and `desktopHeight` (default 500px) props swapped at the `sm` breakpoint
`v-bind`-driven CSS computes the height from props directly, no inline-style overrides needed
Single `.iframe` class anchors theme overrides such as max-width clamps or border radius

API Reference

Prop	Default	Type
`src`required		`string`
`title`required		`string` Accessible title announced to screen readers.
`desktopHeight`	`500`	`number` Rendered height at desktop breakpoints, in pixels.
`mobileHeight`	`600`	`number` Rendered height at mobile breakpoints, in pixels.

Edit this pageorReport an issue

Icon

Size-optimized icon variants with automatic resolution ensuring recognizability at small, medium, and large sizes.

Image Contrast Overlay

Gradient or solid overlay that keeps text readable over images.