Partial Component

Iframe

The Iframe partial is a responsive wrapper for an embedded third-party frame, for example a registration or donation form. The iframe fills the available width and lazy-loads; the embedded page's own layout is responsive inside it.

Manifest

json

{
  "name": "iframe",
  "type": "partial",
  "styles": ["iframe.css"],
  "scripts": [],
  "requires": []
}

Configuration

yaml

iframe:
  src: 'https://example.com/embed'
  title: 'Accessible frame title'
  allow: '' # optional permissions policy, e.g. 'payment'

Configuration Options

Property	Type	Required	Default	Description
`src`	string	Yes	-	The embed URL
`title`	string	Yes	-	Accessible title for the frame
`allow`	string	No	-	Optional permissions policy (e.g.`payment`for embedded payment forms)

Example

Below, the iframe partial is used through the multi-media section withmediaType: iframe, embedding an external page next to a text column:

Embedded Frame

The frame to the side embedshttps://example.com/with an accessible title. The iframe lazy-loads, so it does not delay the initial page render.

Notes

The embedded site must allow framing; pages that sendX-Frame-Optionsor a restrictiveframe-ancestorspolicy will not display
Always provide atitleso screen readers can announce the frame's purpose
Use theallowproperty to grant permissions the embedded page needs, such aspayment
The partial is used by the multi-media and hero-slider sections viamediaType: iframe