Hero Layouts

6 above-the-fold hero variants for homepage top sections. From compact grids to full news feed layouts.

HeroThreeColumnGrid

Hero

Hero + 3 cols + latest section. Was: featured-type1.hbs

<HeroThreeColumnGrid featured={posts.slice(0, 6)} latest={posts.slice(6, 10)} />

HeroTwoColumnGrid

Hero

Hero + 4 text-only cards + latest section. Was: featured-type2.hbs

<HeroTwoColumnGrid featured={posts.slice(0, 5)} latest={posts.slice(5, 9)} />

HeroWithRows

Hero

Hero + 4 stacked rows + latest. Was: featured-type3.hbs

<HeroWithRows featured={posts.slice(0, 5)} latest={posts.slice(5, 9)} />

HeroSidebarLayout

Hero

3-col sidebar hero + latest. Was: featured-type4.hbs

<HeroSidebarLayout featured={posts.slice(0, 6)} latest={posts.slice(6, 12)} />

HeroNewsFeed

Hero

Full news feed: left sidebar (10) + center (4) + latest section. The most complex hero variant.

<HeroNewsFeed sidebarPosts={posts.slice(0, 10)} centerPosts={posts.slice(10, 14)} latest={posts.slice(14, 18)} />

HeroNewsFeedV2

Hero

News feed variant with reversed columns: center (hero+grid) on left, sidebar on right.

<HeroNewsFeedV2 sidebarPosts={posts.slice(0, 6)} centerPosts={posts.slice(6, 10)} latest={posts.slice(10, 14)} />

HeroNewsFeed3Col

Hero

Three-column news feed: left sidebar (18) + center (5) + right ad sidebar.

<HeroNewsFeed3Col sidebarPosts={posts.slice(0, 18)} centerPosts={posts.slice(18, 23)} />

HeroNewsFeedV2_3Col

Hero

Three-column reversed: left ad sidebar + center (5) + right sidebar headlines (14).

<HeroNewsFeedV2_3Col sidebarPosts={posts.slice(0, 14)} centerPosts={posts.slice(14, 19)} />