A newspaper-style news magazine homepage built with Bootstrap 6 for a fictional daily called The Northgate Herald. It has a classic masthead, a three-column front page, desk tabs, opinion columns, reader proof and a subscription section.
How it works
Everything lives inside .nh-page, which pins data-bs-theme="light" and re-maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-primary-contrast, --bs-control-checked-bg and friends) to the Herald red, so every btn-solid theme-primary, badge and checkbox follows the brand.
- Top bar and masthead:
.nh-topbarshows today's date, written byscript.jswithtoLocaleDateString(). "Search" opens the search dialog. - Navbar:
navbar lg:navbar-expandwith<dialog class="drawer drawer-start">holding the section links. Below 1024px the toggler opens the drawer; wider, the links sit in a centred row. "More" opens a.menuwithmenu-item-icon. The script syncsaria-expandedon the toggler and closes the drawer after a link is chosen. - Front page:
.nh-front-gridis one column on mobile (lead story first) and a ruled 1 : 2 : 1 grid from 1024px: briefs,.nh-leadwith a photo, and a numbered.nh-mostlist. - From our desks:
nav nav-underlinetabs (data-bs-toggle="tab") switch four.tab-panepanels of.nh-storycards in agrid md:grid-cols-3layout. - Opinion and trust: columnist cards with
avatar avatar-lg, then a dark.nh-trustband with a<dl>of stats and reader quotes. - Subscribe: a
btn-groupofbtn-checkradios swaps prices fromdata-nh-monthly/data-nh-yearlyand announces the change in a live region. The Morning Brief form usesdata-bs-validate, a Combobox for the edition and a.checkbox; submit is simulated and opens.nh-toastwithToast.getOrCreateInstance(). - Search:
<dialog class="dialog">with aform-adornfield that filters the trending list as you type.
Customization
- Change
--nh-red,--nh-paperand--nh-inkon.nh-pageinstyle.css; update the--bs-primary-*overrides beside them. - Swap fonts via
--nh-serifand--nh-sans. - Edit
data-nh-monthlyanddata-nh-yearlyon each.nh-priceto set your prices. - Replace the
setTimeoutin the.nh-formsubmit handler withfetch()to your newsletter endpoint. - In the search form submit handler, redirect to your real search page.
- Add or remove
.tab-panepanels (and their tab buttons) to match your desks. - Delete
.nh-opinionor.nh-trustfor a shorter page.
The photos come from Unsplash; replace them with your own images.
Accessibility
A skip link jumps to #nh-main; The drawer and search dialog are native <dialog> elements with labelled titles. Tabs use role="tab" and aria-selected, the ticker is a labelled region, price changes are announced through aria-live, and the toast uses role="status". Focus rings use the brand red, and smooth scrolling is turned off under prefers-reduced-motion.
Bootstrap 6 notes
Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). lg:navbar-expand with a Drawer replaces navbar-expand-lg and navbar-collapse, Menu replaces Dropdown, <dialog class="dialog"> replaces Modal, btn-solid theme-primary replaces btn-primary, form-field and .check replace mb-3 and form-check, and Combobox is new in v6. The Combobox logs a harmless "more than one instance" message in alpha.1, and the chosen edition stays after reset.
