Hero Editorial
A newspaper front page as a hero: masthead, serif headline, drop-cap columns and a captioned photo.
- Type: Hero section
- Styles: Light, Minimal
- Licence: Charcoal UI Pro
About Hero Editorial
Hero Editorial turns your first screen into a front page: a masthead, today's date, a serif headline, a standfirst with an accent rule, two columns of body copy with a drop cap and a captioned photograph. It makes a product feel considered and worth reading, not just scanning.
It is a full-width hero section for React and Tailwind CSS 4, in a light and minimal style. Preview it at any width above, then install it with one command.
When to use Hero Editorial
- Fintech, legal and accounting products that need gravitas.
- Magazines, newsletters and publishers.
- Architecture and design practices.
- Founder-led brands with a story to tell.
How it is built
The headline rises in once and respects reduced motion, the drop cap is pure CSS on the first paragraph, and every line of text, the photo and the caption are props.
It is composed from Button, so installing it also installs those components, and you can restyle each one the same way you would on its own.
Goes well with Hero Editorial
Hero Editorial is part of 5 full templates, so you can see it in a finished page.
- Plinth template: Buildings, told like stories.
- Copyhouse template: Words that sell, from one writer.
- Fieldnotes template: Long reads, beautifully set.
- Ledger template: Bookkeeping that reads like a newspaper.
- Quadrangle template: Programmes, people and open days.
- Hero Ember: A dark React hero section with drifting embers, an announcement pill and two CTAs
- Hero Split: A split React hero: copy on the left, a live product window with stats and a chart
- Hero Rotating: A React hero with a rotating headline word, email capture and avatar proof
- Hero Terminal: A developer React hero with light beams on a grid and a typing terminal
- Button: An animated React button with six variants, spring press feedback and a width-stable loading state
Install Hero Editorial
npx shadcn@latest add @charcoal/hero-editorialHero Editorial is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- Can I use my own masthead font?
- Yes. The masthead and headline use the serif token, so swap the font in your theme and the whole front page follows.
- Does Hero Editorial work with Next.js?
- Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
- Can I change the copy and colours?
- Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.
Built from
- Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.