iFrame

Introduction

The iFrame component is used to embed external content such as maps, forms, or media players into a page. It provides consistent aspect ratio control to ensure the embedded content displays responsively across screen sizes.

Component Structure

Variants

There are five variants based on aspect ratio.

1. 1/1

Aspect ratio 1:1

2. 4/3

Aspect ratio 4:3

3. 3/2

Aspect ratio 3:2

4. 16/9

Aspect ratio 16:9. This is the default.

5. Freeform

Uses the iframe's natural height with no enforced ratio.

Props

Field	Data Type	Requirement	Description	Note
iFrame Ratio	String	Required	The aspect ratio of the embedded frame.	Options: 16/9, 3/2, 4/3, 1/1, Freeform. Defaults to 16/9.
iFrame Fullscreen Option	Boolean	Optional	Whether to allow the embedded content to be viewed in fullscreen mode.	Defaults to true.

Slots

Field	Data Type	Requirement	Description	Note
iFrame Title	String	Required	An accessible title for the embedded frame, read by screen readers.	Describe the content of the embedded frame (e.g., "Campus map", "Contact form").
iFrame URL	String	Required	The URL of the content to embed.	Ensure the source allows embedding via iframe.