Featured Content Hero

Usage

Featured Content Hero highlights exactly three pieces of site content — posts, pages, or any other public post type — in an asymmetric hero layout. The first piece spans half the row on desktop; the other two share the remaining half. Each tile shows a background photo with a white copy card anchored to the bottom that links through to the selected content.

Use it on homepages, landing pages, or section headers when you want to steer visitors toward specific articles, services, or landing destinations without building a custom hero from scratch.

Display options

Select the Featured Content Hero block for settings that apply to every piece:

• Height — viewport height for each tile on large screens (5–100%, default 50). Mobile uses a fixed 50vh minimum height regardless of this value.
• Corners — Rounded (default) or Sharp. Rounded mode adds gutter spacing between stacked tiles on mobile and horizontal gap on desktop.
• Link Text — shared call-to-action label for all three tiles (default Read More). Leave empty to hide the link line.
• Link Style — Understated (default), Button, Alternate, or Hollow. Shown when Link Text has a value.
• Headline Style — Customizer typography preset for headlines (default h2). Visual only — tag stays h2.
• Subheadline Style — Customizer preset for subheadlines (default h4). Visual only — tag stays h4.

Pieces

The Pieces repeater always holds three entries — add or edit each row in the block sidebar under Content Select:

• Content — pick any public post type (pages, posts, custom types, etc.). Required for front-end output on that tile.
• Headline — optional override. When empty, the selected post's title is used.
• Subheadline — optional supporting line above the headline in the copy card.
• BG Image — optional custom background photo. When empty, the block uses the post's featured image, or a theme palette fallback (Primary, Secondary, Accent) when no thumbnail exists.
• Background Origin — nine-position grid for cropping custom BG Image photos (default center). Shown when BG Image is set. Featured-image fallbacks always use center crop.

Each tile's copy card links to the selected post's permalink. The link text and style come from the parent Display Options, not from individual pieces.

Front-end behavior

On desktop (xlg and up), tiles sit in a single row: one half-width hero plus two quarter-width companions. On smaller viewports, tiles stack full width.

Copy appears in a white card at the bottom of each tile with subheadline (when set), headline, and optional link text. Background images use object-cover fill via the theme's image-bg pattern.

Block width

Featured Content Hero supports Wide and Full alignment and defaults to Wide. Rounded corners add extra horizontal padding when the block is Full width.

Tips

• Fill all three Pieces rows — the repeater requires exactly three entries.
• Override Headline when the post title is too long for the tile card.
• Add BG Image when the post's featured image is not the right crop for a tall hero tile.
• For magazine-style multi-slide storytelling, use Lookbook or Storyboard Slider instead. For one shared copy panel with a cycling photo gallery, use Photo Block Slider.