Leadin Block

The Leadin Block makes for an engaging start to a page or article. It pairs a headline with a photo in a number if different layouts. You can think of it much like a cover or opening spread of whats to come.

Features

  • Seven Layouts: Each layout displays the text content and supporting visual in a different order and orientation for maximum flexibility.
  • Layout Specific Options: Several Layouts have options specific to that layout. For example Side By Side has a unique option for change which side the text and visual apear on.
  • Video Support: Video can be used as the key visual for this block, but is intended as a short background loop (or cinemagraph) that plays constantly, rather then a narrative video for the user to actively engage with. videos can be hosted in the media library, vimeo, or youtube.
  • Media positioning: Since this block is fully responsive and will automatically crop the given visual to best fit the browser size, but this option allows you to prioritize a section of the image so as to keep it from being cropped off.
    Additional Prepress Features:     If used along side the BU Prepress plugin, this block will also house a metabar containing author info, publication date, and share tools.
  • Color Options: This allows you to adjust the colors used through out the block.
  • URL: This allows you to have the entire block link out elsewhere.

When to use this block

Since the Leadin Blocks acts as an opening to the page, you wanna make sure to use it at the top. Be sure to check Visually Hide Titles?, since the Block will house the title.

Examples

Are You Eating the Best Chicken Sandwich?
Image with Text Overlay
Public Art Is All Over Boston University. Stop and Appreciate It
Text Over Horizontal Image
Leave No Trace Producer to Speak at COM’s Cinemathèque Tonight
Vertical Image and Text Side By Side

Fields

  • Media composes the primary visual of the block.In most layouts the media chosen will be cropped to best accommodate the layout. You can use a static image or video housed in the media library. In addition you can also use a video from Vimeo or Youtube. Keep in mind, a video in this case is meant to act more as an animated background visual (or cinemagraph), then a narrative video for the user to actively engage with. As such the video will continuously loop with no playback controls.
  • Headline is the primary piece of text and should be kept brief and concise. It’s treated similarly to a H1 heading elsewhere on the site.
  • Subhead is a secondary piece of text and serves to give additional context to the headline. It’s treated as an H4 tag through the rest of the site.
  • Caption serves primary to credit the media on the banner. Its exact placement will vary depending on the layout, but will often be in close proximity to the bottom of the image.

Layouts

Default (uncropped unscaled)

This layouts present the media followed by the text content one after the other spaning across to the page margins. The image will be uncropped and as such a a tall vertical image will run long.

Default Alternate Order

This layout is similar to the first but renders the text followed by the image.

Text over Horizontal Image & Horizontal Image over Text

These layouts work similar to the first two, except the image is cropped to fit as a Horizontal band. Depending on the site wide styling, the image will span the width of the page.

Layout specific Options

  • Video Options: if using a video as a media, you can choose to have the video appear uncropped.

Overlapping Text

This layout presents the image above text, sizing and cropping the image, similarly to Horizontal Image Over Text. The text though, is partially overlapped across the bottom of the image.

Layout specific Options

  • Boxed Text: Choose if the image is framed in a box. The color of which can be specified in Color Settings.

Image with Text Overlay

This layout overlaps the text completely over the image.

Layout specific Options

  • Horizontal and Vertical Text Positioning: choose which portion of the image the text is anchored to.
  • Boxed Text: Choose if the image is framed in a box. The color of which can be specified in Color Settings.

Vertical Image and Text Side  By Side

Rather than stacking the image and text, this layout renders them side by side.

Layout specific Options

  • Flip Order: Allows you to have the text to the right of the image or vice-versa.
  • Wide Layout: depending on the Site theme, this option allows the blocks width to span past the page margins.
  • Boxed Text: Choose if the image is framed in a box. The color of which can be specified in Color Settings.