Docs

Preview

Display live URL previews with switchable device views (desktop, tablet, mobile). Shows websites or web applications in an iframe with device-specific dimensions and responsive controls.
Overview   Basic Preview   Preview With Specific Device   Full-Width Preview   Embedded Map Example   CSP Configuration   Production Configuration   Development Configuration   Embedding Restrictions   Device Dimensions   Responsive Visibility   Container Constraints   Security   Arguments   Background Type   Heading Type  

Overview  

Basic Preview  

The preview content block renders a live URL preview in an iframe with device switcher controls. By default, it displays in desktop view.

Hugo on Wikipedia
Live preview of the Hugo static site generator Wikipedia page
yml 
- _bookshop_name: preview
  heading:
    title: Hugo on Wikipedia
    content: Live preview of the Hugo static site generator Wikipedia page
  url: "https://en.wikipedia.org/wiki/Hugo_(software)"

Preview With Specific Device  

Set the device argument to specify which device view to display by default. Options are desktop, tablet, or mobile.

Tablet Preview
Opens in tablet view (672×896)
yml 
- _bookshop_name: preview
  heading:
    title: Tablet Preview
    content: Opens in tablet view (672×896)
  url: "https://en.wikipedia.org/wiki/Hugo_(software)"
  device: tablet

Full-Width Preview  

Use cover: true and fluid: true for a full-width preview layout, ideal for showcasing responsive designs.

Full-Width Preview
Responsive design showcase
yml 
- _bookshop_name: preview
  heading:
    title: Full-Width Preview
    content: Responsive design showcase
  background:
    color: body-tertiary
    subtle: true
  width: 12
  cover: true
  fluid: true
  url: "https://en.wikipedia.org/wiki/Hugo_(software)"
  device: desktop

Embedded Map Example  

The preview component works well with embeddable content like OpenStreetMap  . This example demonstrates a full-width preview with custom background styling.

Embedded Map
OpenStreetMap embed URL - specifically designed for iframes
yml 
- _bookshop_name: preview
  heading:
    title: "Embedded Map"
    content: "OpenStreetMap embed URL - specifically designed for iframes"
  background:
    color: body-tertiary
    subtle: true
  width: 12
  cover: true
  fluid: false
  url: "https://www.openstreetmap.org/export/embed.html?bbox=-0.1,51.5,-0.08,51.52"
  device: desktop

CSP Configuration  

The preview component embeds external URLs in iframes, which requires appropriate Content Security Policy (CSP) configuration.

Production Configuration  

For production environments, explicitly allow the domains you want to embed in your config/production/params.toml:

[modules.hinode.csp]
    frame-src = [
        "https:",                        # Allow all HTTPS sources
        "example.com",                   # Specific domain
        "*.yourdomain.com",              # Wildcard subdomain
        "*.googletagmanager.com",
        "player.cloudinary.com",
        "www.youtube-nocookie.com",
        "www.youtube.com",
        "player.vimeo.com"
    ]

Development Configuration  

For local development, allow HTTP sources in your config/development/params.toml:

[modules.hinode.csp]
    frame-src = [
        "http:",                         # Allow all HTTP for localhost
        "https:",
        "*.googletagmanager.com",
        "player.cloudinary.com",
        "www.youtube-nocookie.com",
        "www.youtube.com",
        "player.vimeo.com"
    ]

This allows embedding localhost sites during development while maintaining security in production.

Embedding Restrictions  

Important: Many websites prevent iframe embedding using X-Frame-Options or CSP headers:

  • Sites with X-Frame-Options: DENY will not load (e.g., Google, Facebook, Twitter)
  • Sites with X-Frame-Options: SAMEORIGIN only allow same-origin embedding
  • Sites with frame-ancestors CSP directive control who can embed them

Best practices:

  • Use the preview component for sites you control or that explicitly allow embedding
  • Test URLs in development before deploying
  • Provide fallback links when embedding may fail
  • Use embeddable alternatives (e.g., youtube-nocookie.com instead of youtube.com)

Device Dimensions  

The preview component uses fixed widths and flexible heights:

  • Desktop: 1200px width (fixed)
  • Tablet: 672px width (fixed)
  • Mobile: 375px width (fixed)

Heights adapt to available viewport space:

height: calc(100vh - controls - navbar - margins)
min-height: 400px

Content within panels scrolls vertically when it exceeds the panel height.

Responsive Visibility  

The component automatically shows or hides device previews based on viewport width only:

  • Small screens (< 768px): Mobile preview only
  • Medium screens (768px-1199px): Tablet and mobile previews
  • Large screens (≥ 1200px): All three previews

Height does not affect panel visibility - panels adjust their height to fit the viewport, and content scrolls if needed.

Buttons for hidden device views are automatically hidden from the control bar, and the active view automatically switches when a panel becomes unavailable.

Container Constraints  

Desktop preview (1200px width) works best with:

  • fluid: true or width: 12 for full-width layouts
  • Container-xxl or larger for proper display

Security  

The preview component includes iframe sandboxing for security:

sandbox="allow-scripts allow-same-origin allow-forms allow-popups"

This restricts iframe capabilities while allowing:

  • JavaScript execution (allow-scripts)
  • Access to same-origin resources (allow-same-origin)
  • Form submissions (allow-forms)
  • Opening popups/new windows (allow-popups)

Arguments  

The content block supports the following arguments:

Name Type Required Default Comment
_bookshop_name string Alias for _bookshop_name.
_ordinal int Zero-based position of the bookshop component within the page’s component hierarchy.
background background, string Background style of the section.
cover bool true Flag indicating if the element should be rendered fullscreen.
device select desktop Device view to display by default in preview component. Determines the initial iframe dimensions and active tab. Supported values: [desktop, tablet, mobile].
fluid bool true Flag to set the section container to fluid design, else the section is limited to xxl.
heading Heading Heading of the content block, including a preheading and content element.
id string Unique identifier of the current element.
justify select start Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
overlay-mode select Overlay mode of the element, overrides the site’s general configuration. Supported values: [light, dark, none].
theme select Color theme to apply to the element. Supported values: [light, dark].
url string, template.URL Address of the link destination, either a local reference or an external address. Include the scheme when referencing an external address, such as https://google.com. Local references may include an optional anchor link such as blog/bootstrap-elements/#docs.
width int 8 Column width of the element. For embedded elements, the width is relative to the parent’s container.
Name Type Required Default
_bookshop_name string
Alias for _bookshop_name.
_ordinal int
Zero-based position of the bookshop component within the page’s component hierarchy.
background background, string
Background style of the section.
cover bool true
Flag indicating if the element should be rendered fullscreen.
device select desktop
Device view to display by default in preview component. Determines the initial iframe dimensions and active tab. Supported values: [desktop, tablet, mobile].
fluid bool true
Flag to set the section container to fluid design, else the section is limited to xxl.
heading Heading
Heading of the content block, including a preheading and content element.
id string
Unique identifier of the current element.
justify select start
Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
overlay-mode select
Overlay mode of the element, overrides the site’s general configuration. Supported values: [light, dark, none].
theme select
Color theme to apply to the element. Supported values: [light, dark].
url string, template.URL
Address of the link destination, either a local reference or an external address. Include the scheme when referencing an external address, such as https://google.com. Local references may include an optional anchor link such as blog/bootstrap-elements/#docs.
width int 8
Column width of the element. For embedded elements, the width is relative to the parent’s container.

Background Type  

Name Type Required Default Comment
backdrop string Background image with a mask to improve contrast.
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
subtle bool Apply subtle theme colors.
Name Type Required Default
backdrop string
Background image with a mask to improve contrast.
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select
Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
subtle bool
Apply subtle theme colors.

Heading Type  

Name Type Required Default Comment
align select start Alignment of the headline, content, or icon. Supported values: [start, center, end].
arrangement select above Arrangement of the preheading, either left or above the header. On smaller screens, the preheading is always placed on top. Supported values: [above, first].
content string, template.HTML Section content displayed below the title.
preheading string Preheading of the section heading.
size int 4 Display size of the headline.
title string, hstring.RenderedString, hstring.HTML, template.HTML Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
width int 8 Column width of the element. For embedded elements, the width is relative to the parent’s container.
Name Type Required Default
align select start
Alignment of the headline, content, or icon. Supported values: [start, center, end].
arrangement select above
Arrangement of the preheading, either left or above the header. On smaller screens, the preheading is always placed on top. Supported values: [above, first].
content string, template.HTML
Section content displayed below the title.
preheading string
Preheading of the section heading.
size int 4
Display size of the headline.
title string, hstring.RenderedString, hstring.HTML, template.HTML
Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
width int 8
Column width of the element. For embedded elements, the width is relative to the parent’s container.
On this page