July 8, 2026IntermediateBlog & News
Newsroom Band
A newsroom band with three stacked parts: a scroll-wiped section header, one highlighted featured article (text column + large 3:2 image), and a list of compact article rows whose top rules 'draw' in on scroll. Data-driven, with a standalone variant for use as a full page. Reveals via GSAP ScrollTrigger; hover micro-interactions in CSS.
Preview
News
Source
import NewsroomBand from "./index.jsx";
import { newsroomBand } from "../demo-data.js";
import styles from "./demo.module.css";
export default function NewsroomBandDemo() {
return (
<div className={styles.page}>
<div className={styles.spacer} />
<NewsroomBand content={newsroomBand} />
<div className={styles.spacer} />
</div>
);
}
Dependencies
gsap@gsap/react
Related Components
3W AGO
Newsroom Cardblog-news
3MO AGO
Blog Grid Revealblog-news
3MO AGO
Article Gridblog-news