ETLondonDubaiTokyoSydneyLos Angeles68°FNew YorkNewsletter
Most read
Trending#Entertainment#Tech#Finance

No. 88 of 106

Hero Slider

The lead story slider with 14 layouts.

    On this page
  1. The first thing every visitor sees
  2. Big story left, what’s next on the right
  3. Neighbors peek in from the sides
  4. Words on one side, the work on the other
  5. A landing page hero with a mood
NEWSON · ELEMENT NO. 88

A hero slider for news homepages, magazines, stores and portfolios. Slides come from your posts or are built by hand — fourteen layouts, five soft transitions, swipe, keyboard and a pause button.

14 layouts5 transitionsposts or custom slidesautoplay + pauseswipe & keyboardlooping video slides
NEWS HOMEPAGE · TOP STORIES

The news layout pairs the slider with a headline list. Each headline fills up while its story is showing, and clicking one jumps straight to it. Here it shows today’s trending stories.

Example news site · fictional
The Harbor Ledger
Portland, Maine · Local news since 1998

Read counts are sample numbers seeded for the preview.

TRAVEL MAGAZINE · COVER STORIES

Center cards keep the next and previous stories in view, so readers know there’s more. Click a side card, swipe, or use the arrow keys.

INTERIOR DESIGN STUDIO · SERVICES

The split layout keeps text easy to read on a calm panel while the photo reveals with a soft curtain. These slides are built by hand — headline, text and two buttons each.

Hearth & Hue is a fictional example studio.

VACATION RENTALS · LANDING PAGE

Full-width slides with an accent color wash, centered text, a parallax slide transition and numbered picker. Each slide can have its own accent color.

Example rental brand; places are real US destinations, listings are fictional.

ARCHITECTURE PORTFOLIO · PROJECTS

The minimal layout puts a huge project number behind a bold title, with the photo on the right and “Prev / Next” as words. Made for studios and photographers.

Linea is a fictional example studio.

PHOTOGRAPHER · FULL SCREEN

The vertical layout slides upward with progress lines on the right — a natural fit for photographers and full-screen portfolio intros. Swipe up or down on phones.

Ella Rae Photography is a fictional example.

TECH & DESIGN BLOG · FEATURED

Thumbnails with titles under the slider show what’s coming next. The curtain transition reveals each new story from the side.

BAKERY · THIS WEEK

Each card slides off the top of the deck to show the next one — playful, compact and easy to swipe on a phone. Great for menus, offers and events.

  • 🥐 Fresh bakes every morning at 7
  • 📍 Example bakery in Asheville, North Carolina
  • 🛍️ Order ahead for pickup
SPORTS DAILY · LEAD + UP NEXT

The mosaic layout keeps the lead story big while the next three wait in photo tiles beside it. When the story changes, the whole column moves up together — readers always see what’s coming.

TECH NEWS · TODAY’S TOP FIVE

Five headlines stand in a numbered rail beside the photo. A thin bar fills next to the story that’s showing, and clicking any headline jumps straight to it.

WEEKLY MAGAZINE · COVER STORY

The magazine-cover layout prints your magazine’s name at the top, the date and issue number on the right and the headline in oversized serif type — like the cover on a newsstand.

The Sunday Edit is a fictional magazine name.

GAMING & ENTERTAINMENT · REVIEWS

The center story faces the reader while its neighbors turn away in 3D, like a shelf of game boxes. Click a side card, swipe, or use the arrow keys.

TRAVEL & FILM MAGAZINE · NOW SHOWING

Portrait cards line up in a strip. The current one opens wide with its story, the rest glide along behind it — made for travel, film and fashion magazines.

BUSINESS MAGAZINE · FEATURES

Text sits on a calm color panel with a slanted edge, the photo slowly zooms on the right and a big outline number counts the stories. On phones the panel rises from the bottom.

TRY IT · TRANSITIONS

All five transitions are slow and soft on purpose. Visitors who ask their device for less motion get simple fades automatically.