SearchF
July 8, 2026/Intermediate/Blog & News

Newsroom Card

A structural variant of the News band: a scroll-wiped section header above a self-contained bordered card. Inside, a two-column split — a featured article (image on top, text below) on the left and a compact list of square-thumbnail rows on the right — that collapses to a single stacked column at narrow widths. Row rules 'draw' in on scroll; hover micro-interactions in CSS. Data-driven, reuses the News content shape.

Live Demo ↗

Preview

News

    Source

    import NewsroomCard from "./index.jsx";
import { newsroomBand } from "../demo-data.js";
import styles from "./demo.module.css";

export default function NewsroomCardDemo() {
  return (
    <div className={styles.page}>
      <div className={styles.spacer} />
      <NewsroomCard content={newsroomBand} />
      <div className={styles.spacer} />
    </div>
  );
}

    Dependencies

    • gsap
    • @gsap/react

    Related Components

    3W AGO
    Newsroom Bandblog-news
    3MO AGO
    Blog Grid Revealblog-news
    3MO AGO
    Article Gridblog-news