HTML Block

HTML Block renders a trusted iframe URL or a small HTML/script embed inside an isolated Luna frame. The live block above uses the embed field, so the example is the real HTML Block rather than a screenshot.

Properties

Properties separates the embed source from its display and permission settings. If both source fields are populated, HTML / Script Embed takes precedence over Iframe URL.

Iframe URL

Paste a direct, embeddable HTTPS URL. A normal website URL may refuse framing through its security headers, so verify the exact source in the published View.

HTML / Script Embed

Paste only trusted, minimal markup or provider embed code. This field overrides Iframe URL. Never place secrets, private tokens, or unreviewed third-party code in browser-delivered markup.

Size

Small, Medium, and Large map to 280px, 420px, and 560px outside a section grid. Inside a grid, the authored frame controls the visual height.

Allow Fullscreen

Enable fullscreen only when the embedded experience genuinely supports it. The live example leaves it off because the static fragment has no fullscreen interaction.

Layout

HTML is grid-only and frame-driven, with a documented starting frame of 12 columns by 8 rows. The demo spans the article width and keeps an intentional eight-row frame at every breakpoint, with one free section row below it.

Behavior

Embed Code overrides URL. Provider policies, browser sandboxing, content security rules, and network availability can affect the result, so exercise the real View instead of assuming every source can be framed.

Style Panel

[review] missing image

The Style Panel targets the outer Frame only; styling inside a third-party iframe remains controlled by its source.

Frame

Frame exposes spacing, background, borders, and effects in the Default state. Hover is disabled, which keeps the embed boundary stable and predictable.

Motion

HTML supports standard block entrance effects. Keep motion brief, avoid delaying access to embedded controls, and respect reduced-motion preferences inside any code you control.

Property summary

• Iframe URL — direct source used when Embed Code is empty.

• HTML / Script Embed — trusted markup that overrides the URL.

• Size — Small, Medium, or Large outside grid layout.

• Allow Fullscreen — grants fullscreen capability to supported embeds.

• Animation Effects — entrance motion applied to the outer block.

Responsive behavior

Choose intentional frame proportions at desktop, tablet, and mobile; frame-driven blocks are not auto-shrunk from DOM height.

Verify 1440px, 991px, and 375px Views for clipping, scrollbars, readable content, and horizontal overflow.

Accessibility

• Give the embedded experience a clear accessible name when the provider supports one.

• Confirm keyboard focus can enter and leave embedded controls without a trap.

• Do not use the embed as the only source of essential information unless it is reliably accessible.

• Keep fullscreen and motion optional.

Best practices

• Prefer standard Luna blocks for ordinary text, media, buttons, forms, and layout.

• Use the smallest trusted fragment or URL that satisfies the integration.

• Document provider requirements and test failure or blocked-embed states.

Common mistakes

• Pasting a normal page URL that blocks iframe rendering.

• Using both source fields without realizing Embed Code wins.

• Embedding secrets or unreviewed scripts.

• Letting the frame clip controls at tablet or mobile widths.

• Treating a frame-driven block as content-driven and shrinking it automatically.

Quick recipe

Add HTML to a dedicated section, choose either a direct iframe URL or trusted embed code, select the appropriate size behavior, enable fullscreen only when needed, style the Frame, then verify the real embed at all three breakpoints.