The sidebar of a news or magazine site and the grid it lives in. NewsColumns: main column + 20rem sidebar that stacks under the main column on narrow containers; its asideSticky tail (an ad, sections) sticks below the header once the rest has scrolled by. Widgets: FollowCounts (followers per network, compact and locale-formatted, one link per row), PopularPosts (numbered or thumbnails), RecentComments (who commented on which story), CategoryCounts (sections with story counts) and SidebarWidget for your own. Server components.
Installation
The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";
Usage
import { NewsColumns, FollowCounts, PopularPosts, RecentComments, CategoryCounts, AdSlot } from "@vamos-ui/react/blocks";
<NewsColumns asideLabel="More from the Ledger"
aside={<>
<FollowCounts title="Stay connected" accounts={[{ network: "youtube", href, count: 22900, unit: "subscribers", action: "Subscribe" }]} />
<PopularPosts title="Most read" posts={mostRead} />
<RecentComments title="Recent comments" comments={comments} />
</>}
asideSticky={<><AdSlot size="rectangle" /><CategoryCounts title="Sections" categories={sections} /></>}>
{modules}
</NewsColumns>Examples
Columns with a sticky tail
A whole sidebar taller than the screen can't stick usefully; only asideSticky does. Offset: --news-sticky-offset (default 4.5rem, the section bar).
City
View allThe night tram returns: council votes to run the coast line until 2 a.m.
A twelve-month trial starts in March. Shift workers at the hospital and the port pushed for it for three years.
Port orders four electric cranes and a shore-power berth
The 61-million-euro package is the largest since the container terminal opened.
Latest
- Sea & coast
Seagrass meadows are back in the bay, divers count
Volunteer surveys find twice the cover of 2021 along the eastern shore.
- Football
Late header settles the coast derby in front of a record crowd
Liman Spor climb to second after a 2–1 win under the new floodlights.
- Housing
Rents near the waterfront rose 31 per cent in a year. Who still lives there?
We knocked on 140 doors on three streets to find out.
- Music
The warehouse festival sells out in nine minutes
Organisers promise a second weekend and a ballot for residents.
API
NewsColumns
| Prop | Type | Default |
|---|---|---|
children / aside / asideSticky / asideLabel / asideStartMain column, sidebar, sticky tail, sidebar name, sidebar on the start side. | ReactNode / string / boolean | — |
FollowCounts
| Prop | Type | Default |
|---|---|---|
accountsnetwork: any BrandName (x, instagram, facebook, youtube, linkedin, tiktok…). Opens in a new tab (announced). | { network; href; count; unit?; action? }[] | — |
PopularPosts
| Prop | Type | Default |
|---|---|---|
posts / variant / limitOrdered list; default 5 items. | NewsPost[] / "numbered" | "thumbs" / number | — |
RecentComments
| Prop | Type | Default |
|---|---|---|
commentshref points at the comment anchor. | { author; postTitle; postHref; href?; excerpt?; at? }[] | — |
CategoryCounts
| Prop | Type | Default |
|---|---|---|
categoriesCount is visible as a number and read as “271 stories”. | { label; href; count }[] | — |
SidebarWidget
| Prop | Type | Default |
|---|---|---|
title / href / headingLevel / childrenSmall-caps heading on a rule + any content. | … | — |