ULTRAKIT · WIDGET #149

The front-page block of blogs, magazines and news sites: 13 arrangements, 8 overlay styles, 6 hover effects, category tabs, a “Breaking” label, numbered stories and swipe on phones — all from your real posts.

13 layouts8 overlayscategory tabsspotlight sliderexpanding panelsswipe on phones
NEWS SITE · FRONT PAGE

Big story on the left, four beside it, a pulsing “Breaking” label and tabs that swap the whole block by section.

big left + 4 smallclassic gradientcategory tabslive label

Top stories

View all news
TECH BLOG · HOMEPAGE

The big story on the left and four stacked strips on the right, on frosted glass, numbered like a “trending” list.

big left + 4 stripsfrosted glassnumbersaccent bar heading

Trending in tech

TRAVEL MAGAZINE · COVER

The lead story stands tall in the center with two on each side; centered titles inside a thin frame feel like a printed magazine.

big centercentered + framecurtain wipebottom-center text

Wander

LIFESTYLE BLOG · HOME

Bento arrangement with clean white text boxes sitting on the photos — calm and very readable.

bentowhite boxlift on hover

This week

DESIGN STUDIO · JOURNAL

Mosaic with tall edges; every photo is tinted in its category’s color and brightens on hover.

mosaicduotonecategory colors
BUSINESS NEWS · SECTION PAGE

A wide hero on top with four stories below. Photos stay black and white until you point at one.

wide hero + 4black & whitefriendly dates

Markets & Business

MAGAZINE · MOST READ

Five tall columns, big outlined numbers, just the title until you hover — and the other stories dim so the one you point at stands out.

5 tall columnsreveal on hoverdim the othersnumbers
PHOTO BLOG · ESSAYS

Five columns stepped up and down like a gallery wall, with text on top.

5 staggered columnstop-left textslight turn on hover
BLOG · EDITOR’S PICKS

Hover (or tap) a panel and it opens wide to show the story. On phones it becomes a vertical accordion.

expanding panelscolor tintnumbers
NEWS SITE · SECTION BLOCKS

Two mirror-image arrangements for section fronts. Try the first on a phone: it becomes a swipeable row.

2 on top + 33 on top + 2glass + boxswipe on phones

Technology

More tech

Weekend reads

THREE STEPS

Made for blogs, magazines, news sites and company journals.

1

Choose the posts

Latest, a category, a tag, most commented, random — or hand-pick five by ID.

2

Pick an arrangement

13 layouts from classic hero + grid to spotlight slider and expanding panels.

3

Style the overlay

8 overlay styles, 6 hover effects, category colors, tabs, labels and numbers.