Where the widgets go

<div class="p234-tabs" role="tablist" aria-label="Feed">
  <button class="p234-tabs__tab" role="tab" aria-selected="true" type="button">Latest</button>
  <button class="p234-tabs__tab" role="tab" aria-selected="false" type="button">Politics <span class="p234-tabs__count">42</span></button>
  <button class="p234-tabs__tab" role="tab" aria-selected="false" type="button">Business <span class="p234-tabs__count">31</span></button>
  <button class="p234-tabs__tab" role="tab" aria-selected="false" type="button">Markets <span class="p234-tabs__count">18</span></button>
</div>
<div class="p234-tabpanel" role="tabpanel">
  <a class="p234-story p234-story--thumb" href="#">
    <span class="p234-kicker" data-section="markets">Market intelligence</span>
    <h3 class="p234-story__headline">Pump prices are running 25 per cent above the last official figure</h3>
    <div class="p234-meta"><span class="p234-meta__source">Plus234Feed</span><span class="p234-meta__dot">&middot;</span><span>2 hours ago</span><span class="p234-coverage">6 sources</span></div>
    <img class="p234-story__media" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Crect width='160' height='90' fill='%23ddd8cf'/%3E%3C/svg%3E" alt="" width="160" height="90">
  </a>
  <a class="p234-story p234-story--thumb" href="#">
    <span class="p234-kicker" data-section="politics">Politics</span>
    <h3 class="p234-story__headline">Senate passes the 2027 appropriation bill at second reading</h3>
    <div class="p234-meta"><span class="p234-meta__source">Channels Television</span><span class="p234-meta__dot">&middot;</span><span>4 hours ago</span></div>
    <img class="p234-story__media" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Crect width='160' height='90' fill='%23ddd8cf'/%3E%3C/svg%3E" alt="" width="160" height="90">
  </a>
  <a class="p234-story p234-story--thumb" href="#">
    <span class="p234-kicker" data-section="world">World</span>
    <h3 class="p234-story__headline">Canada releases list of 36 countries whose citizens can apply</h3>
    <div class="p234-meta"><span class="p234-meta__source">IRCC</span><span class="p234-meta__dot">&middot;</span><span>yesterday</span><span class="p234-coverage">12 sources</span></div>
    <img class="p234-story__media" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Crect width='160' height='90' fill='%23ddd8cf'/%3E%3C/svg%3E" alt="" width="160" height="90">
  </a>
  <div class="p234-pagination">
    <p class="p234-pagination__status">Showing 3 of 248 stories</p>
    <button class="p234-btn p234-btn--secondary" type="button">Load 20 more</button>
  </div>
</div>

<div style="display:grid;gap:var(--p234-space-6);grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))">
  <a class="p234-story p234-story--card" href="#">
    <img class="p234-story__media" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 270'%3E%3Crect width='480' height='270' fill='%23ddd8cf'/%3E%3C/svg%3E" alt="" width="480" height="270">
    <span class="p234-kicker" data-section="business">Business</span>
    <h3 class="p234-story__headline">UBA board approves nine-month financials</h3>
    <div class="p234-meta"><span>NGX filing</span></div>
  </a>
  <a class="p234-story p234-story--card" href="#">
    <img class="p234-story__media" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 270'%3E%3Crect width='480' height='270' fill='%23ddd8cf'/%3E%3C/svg%3E" alt="" width="480" height="270">
    <span class="p234-kicker" data-section="sport">Sport</span>
    <h3 class="p234-story__headline">Super Eagles name a 23-man squad</h3>
    <div class="p234-meta"><span>NFF</span></div>
  </a>
  <a class="p234-story p234-story--card" href="#">
    <img class="p234-story__media" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 270'%3E%3Crect width='480' height='270' fill='%23ddd8cf'/%3E%3C/svg%3E" alt="" width="480" height="270">
    <span class="p234-kicker" data-section="world">World</span>
    <h3 class="p234-story__headline">Qatar names two categories of eligible residents</h3>
    <div class="p234-meta"><span>Gulf Times</span></div>
  </a>
</div>

<div class="p234-ticker">
  <a class="p234-ticker__item" href="#"><span class="p234-ticker__name">NGX ASI</span><span class="p234-ticker__value">98,247</span><span class="p234-delta" data-direction="up">0.3%</span></a>
  <a class="p234-ticker__item" href="#"><span class="p234-ticker__name">USD/NGN</span><span class="p234-ticker__value">1,512.40</span><span class="p234-delta" data-direction="down">0.8%</span></a>
  <a class="p234-ticker__item" href="#"><span class="p234-ticker__name">Brent</span><span class="p234-ticker__value">72.15</span><span class="p234-delta" data-direction="up">1.1%</span></a>
  <a class="p234-ticker__item" href="#"><span class="p234-ticker__name">Petrol, Lagos</span><span class="p234-ticker__value">&#8358;1,345</span><span class="p234-delta" data-direction="up">2.4%</span></a>
</div>

<div style="display:grid;gap:var(--p234-space-6);grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))">
  <div class="p234-tile">
    <span class="p234-tile__label">Dollar to naira &middot; official</span>
    <span class="p234-tile__figure">1,512.40</span>
    <span class="p234-delta" data-direction="down">0.8% today</span>
  </div>
  <div class="p234-tile">
    <span class="p234-tile__label">Dollar to naira &middot; parallel</span>
    <span class="p234-tile__figure">1,585.00</span>
    <span class="p234-delta" data-direction="up">0.4% today</span>
  </div>
</div>

<div style="max-width:20rem">
  <p class="p234-kicker" style="color:var(--p234-color-ink-muted);border-top:var(--p234-border-thick) solid var(--p234-color-ink);padding-top:var(--p234-space-4)">Also today</p>
  <a class="p234-story p234-story--compact" href="#">
    <span class="p234-kicker" data-section="business">Business</span>
    <h3 class="p234-story__headline">UBA board approves nine-month unaudited financials</h3>
    <div class="p234-meta"><span>NGX filing</span><span class="p234-meta__dot">&middot;</span><span>1 hour ago</span></div>
  </a>
  <a class="p234-story p234-story--compact" href="#">
    <span class="p234-kicker" data-section="world">World</span>
    <h3 class="p234-story__headline">Canada releases list of 36 countries</h3>
    <div class="p234-meta"><span>IRCC</span><span class="p234-meta__dot">&middot;</span><span>yesterday</span></div>
  </a>
  <a class="p234-story p234-story--compact" href="#">
    <span class="p234-kicker" data-section="markets">Markets</span>
    <h3 class="p234-story__headline">BUA Foods shifts Q3 board meeting by one day</h3>
    <div class="p234-meta"><span>NGX filing</span><span class="p234-meta__dot">&middot;</span><span>2 days ago</span></div>
  </a>
</div>

<div class="p234-strip">
  <div class="p234-strip__track">
    <a class="p234-strip__item" href="#">
      <span class="p234-kicker" data-section="markets">Analysis</span>
      <h3 class="p234-strip__title">The four month gap between official and real petrol prices</h3>
      <div class="p234-meta"><span>Plus234Feed</span></div>
    </a>
    <a class="p234-strip__item" href="#">
      <span class="p234-kicker" data-section="politics">Explainer</span>
      <h3 class="p234-strip__title">What the 2027 appropriation bill actually changes</h3>
      <div class="p234-meta"><span>Plus234Feed</span></div>
    </a>
    <a class="p234-strip__item" href="#">
      <span class="p234-kicker" data-section="world">Guide</span>
      <h3 class="p234-strip__title">Work permit routes open to Nigerian applicants</h3>
      <div class="p234-meta"><span>Plus234Feed</span></div>
    </a>
    <a class="p234-strip__item" href="#">
      <span class="p234-kicker" data-section="business">Filing</span>
      <h3 class="p234-strip__title">Nine month results, every listed bank</h3>
      <div class="p234-meta"><span>NGX</span></div>
    </a>
  </div>
</div>

<ul class="p234-linkgrid">
  <li><a href="#">Politics <span class="p234-linkgrid__count">420 stories</span></a></li>
  <li><a href="#">Business <span class="p234-linkgrid__count">388 stories</span></a></li>
  <li><a href="#">Markets <span class="p234-linkgrid__count">210 stories</span></a></li>
  <li><a href="#">World <span class="p234-linkgrid__count">176 stories</span></a></li>
  <li><a href="#">Sport <span class="p234-linkgrid__count">151 stories</span></a></li>
  <li><a href="#">Entertainment <span class="p234-linkgrid__count">98 stories</span></a></li>
</ul>

<div style="display:flex;gap:var(--p234-space-3);flex-wrap:wrap;margin-bottom:var(--p234-space-6)">
  <a class="p234-tag" href="#">Fuel subsidy</a>
  <a class="p234-tag" href="#">Canada visa</a>
  <a class="p234-tag" href="#">NGX</a>
  <a class="p234-tag" href="#">Super Eagles</a>
  <a class="p234-tag" href="#">Appropriation bill</a>
</div>
<a class="p234-story p234-story--compact" href="#">
  <span class="p234-kicker" data-section="markets">Markets</span>
  <h3 class="p234-story__headline">NGX closes higher as banking stocks lead the rally</h3>
  <div class="p234-meta"><span>NGX</span><span class="p234-meta__dot">&middot;</span><span>today</span></div>
</a>

<div class="p234-tabs" role="tablist" aria-label="Platform">
  <button class="p234-tabs__tab" role="tab" aria-selected="true" type="button">X</button>
  <button class="p234-tabs__tab" role="tab" aria-selected="false" type="button">Google</button>
</div>
<div class="p234-tabpanel" role="tabpanel">
  <div class="p234-directory">
    <a class="p234-directory__row" href="#"><span class="p234-directory__name">#AppropriationBill</span><span class="p234-directory__detail">Politics</span><span class="p234-directory__value">48.2k</span></a>
    <a class="p234-directory__row" href="#"><span class="p234-directory__name">Super Eagles</span><span class="p234-directory__detail">Sport</span><span class="p234-directory__value">31.9k</span></a>
    <a class="p234-directory__row" href="#"><span class="p234-directory__name">Fuel price</span><span class="p234-directory__detail">Markets</span><span class="p234-directory__value">22.4k</span></a>
  </div>
</div>

<div class="p234-banner">
  <div class="p234-banner__body">
    <p class="p234-banner__title">The Daily Brief</p>
    <p class="p234-banner__text">The day's stories in one email, every weekday morning.</p>
    <div class="p234-banner__actions">
      <a class="p234-btn" href="#">Subscribe</a>
      <a class="p234-btn p234-btn--secondary" href="#">See a sample</a>
    </div>
  </div>
  <button class="p234-banner__dismiss" type="button" aria-label="Dismiss">&times;</button>
</div>

<div class="p234-share">
  <span class="p234-share__label">Follow us on</span>
  <a class="p234-share__btn" href="#">WhatsApp</a>
  <a class="p234-share__btn" href="#">Telegram</a>
  <a class="p234-share__btn" href="#">X</a>
</div>

<div class="p234-strip">
  <div class="p234-strip__track">
    <a class="p234-poster" href="#" style="flex:0 0 7rem">
      <img class="p234-poster__img" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3Crect width='200' height='300' fill='%23c9c3b8'/%3E%3C/svg%3E" alt="" width="200" height="300">
      <p class="p234-poster__title">A Film Title</p>
      <p class="p234-poster__meta">In cinemas</p>
    </a>
    <a class="p234-poster" href="#" style="flex:0 0 7rem">
      <img class="p234-poster__img" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3Crect width='200' height='300' fill='%23c9c3b8'/%3E%3C/svg%3E" alt="" width="200" height="300">
      <p class="p234-poster__title">Another Title</p>
      <p class="p234-poster__meta">Coming 12 Dec</p>
    </a>
    <a class="p234-poster" href="#" style="flex:0 0 7rem">
      <img class="p234-poster__img" src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3Crect width='200' height='300' fill='%23c9c3b8'/%3E%3C/svg%3E" alt="" width="200" height="300">
      <p class="p234-poster__title">A Third Title</p>
      <p class="p234-poster__meta">Streaming</p>
    </a>
  </div>
</div>

<header class="p234-masthead" style="position:static">
  <div class="p234-masthead__bar">
    <a class="p234-masthead__brand" href="#">
      <span class="p234-masthead__mark">+234</span>
      <span class="p234-masthead__tagline">Nigeria, in numbers and in context</span>
    </a>
    <nav class="p234-masthead__nav" aria-label="Main">
      <a href="#" aria-current="page">News</a>
      <a href="#">Markets</a>
      <a href="#">Cost of living</a>
      <a href="#">Elections</a>
    </nav>
    <div class="p234-masthead__actions">
      <button class="p234-masthead__icon" type="button" aria-label="Search">&#9906;</button>
      <a class="p234-btn p234-btn--secondary" href="#">Sign in</a>
    </div>
  </div>
  <nav class="p234-subnav" aria-label="Sections">
    <ul>
      <li><a href="#" aria-current="page">Top stories</a></li>
      <li><a href="#">Politics</a></li>
      <li><a href="#">Business</a></li>
      <li><a href="#">World</a></li>
      <li><a href="#">Sport</a></li>
    </ul>
  </nav>
</header>