Multi Media

A section component that renders text content alongside media. Supports seven media types: image, video, audio, icon, Lottie animations, a second text block, and embedded frames with flexible layout options.

Image Properties

Property	Type	Required	Description
`image.src`	string	Yes	Path to the image file
`image.alt`	string	Yes	Alternative text for accessibility
`image.caption`	string	No	Optional caption displayed below the image

Audio Properties

Property	Type	Required	Description
`audio.bgImage`	string	No	Background image displayed with audio player
`audio.ogg`	string	One required*	Path to OGG audio file
`audio.mpeg`	string	One required*	Path to MP3 audio file

*At least one audio format must be provided

Video Properties

Property	Type	Required	Description
`video.inSitu`	boolean	No	Display inSitu (true) or in modal (false)
`video.src`	string	Yes	Video source ('youtube', 'vimeo', or 'cloudinary')
`video.id`	string	Yes	Video ID for YouTube/Vimeo
`video.cloudname`	string	Conditional	Required for Cloudinary videos only
`video.tn`	string	Yes	Thumbnail image path for modal display

Icon Properties

Property	Type	Required	Description
`icon.icon`	string	Yes	Icon identifier from the icon library
`icon.title`	string	Yes	Icon title for accessibility
`icon.url`	string	No	Optional link URL for the icon

Lottie Animation Properties

Property	Type	Required	Description
`lottie.src`	string	Yes	Path to Lottie JSON animation file
`lottie.control.autoplay`	boolean	No	Start animation automatically (default: true)
`lottie.control.loop`	boolean	No	Loop the animation (default: true)

Text Example

Two Text Columns, One Section

The media slot can hold a second text block

With the text media type, the media slot renders a second text block from the mediaText field instead of an image or video. The result is a two-column text layout that pairs related content side by side, such as a description beside detailed specifications, or two policies that belong together. Below the switch threshold the columns stack, exactly like every other media type.

The Main Text Column

Glass card styling, CTAs included

The main text column keeps its glass card treatment and may carry CTAs, while the mediaText column reads as plain prose. Use the main column for the content you want to emphasize and the media slot for its quieter companion. Markdown formatting works in both columns.

Browse All Sections

Text Media Properties

Property	Type	Required	Description
`mediaText`	object	Yes	Standard text block (leadIn, title, titleTag, subTitle, prose) rendered in the media slot

Iframe Properties

Property	Type	Required	Description
`iframe.src`	string	Yes	The embed URL
`iframe.title`	string	Yes	Accessible title for the frame
`iframe.allow`	string	No	Permissions policy, e.g. 'payment' for donation/checkout embeds

Configuration

yaml

- sectionType: multi-media
  containerTag: aside
  isReverse: false
  # more settings

  text:
    leadIn: 'Image Example'
    title: Rich Visual Content with Images
    titleTag: 'h2'
    subTitle: 'Enhance your message with compelling visuals'
    prose: Images are the cornerstone of visual storytelling on the web...
  ctas:
    - url: 'https://metalsmith.io'
      label: 'Learn More'
      isButton: true
      buttonStyle: 'primary'
  mediaType: image # may be 'audio', 'icon', 'lottie', 'image', 'video', 'text', or 'iframe',
  image:
    # image properties
  audio:
    # audio properties
  icon:
    # icon properties
  lottie:
    # lottie properties
  video:
    # video properties
  mediaText:
    # second text block, when mediaType is 'text'
  iframe:
    # embedded frame properties, when mediaType is 'iframe'

Configuration Options

Layout Settings

Property	Type	Required	Description
`isReverse`	boolean	No	Reverse the media/text layout (default: false)
`mediaType`	string	Yes	Type of media ('image', 'video', 'audio', 'icon', 'lottie', 'text', 'iframe')

Content

Property	Type	Required	Description
`text`	object	No	Standard text block with leadIn, title, subtitle, and prose
`text.isCentered`	boolean	No	Centers the text content within its container
`ctas`	array	No	Array of call-to-action buttons or links

Notes

Image, video, audio, icon, and Lottie animation support
Two-column text layouts via a second text block ('text')
Embedded frames for forms, maps, and other embeds ('iframe')
YouTube, Vimeo, and Cloudinary integration
Viedeo modal overlays or inSitu embedding
Audio players with background images
Scalable vector icons from comprehensive library
JSON-based animations with playback controls