Fieldnotes: Online magazine template
Long reads, beautifully set.
For magazines and editorial sites: an editorial front-page hero, a lead story with most-read, a filterable story grid, contributors, a newsletter archive and a big footer.
About the Fieldnotes template
Fieldnotes is for long reads. A front-page hero for the cover story, a lead story with a most-read list, a filterable archive grid, contributors and a weekly newsletter make reading the point.
Long reads, beautifully set. It is a complete online magazine landing page for React and Tailwind CSS 4, assembled from 7 Charcoal UI sections.
Who Fieldnotes is for
- Online magazines.
- Brand journals.
- Photo and audio publications.
- Non-profit newsrooms.
What is inside
7 sections, top to bottom:
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Editorial: A newspaper front page as a hero: masthead, serif headline, drop-cap columns and a captioned photo.
- Blog Featured: Magazine front with a serif lead story, a column of more stories and a numbered most-read list.
- Blog Grid: Blog index where the newest post runs wide, the rest sit in a grid and tag chips filter them.
- Team Grid: Remote team grid: big initials over a duotone photo of each person's city, with bios on hover.
- Newsletter Issues: Newsletter landing block: subscribe form with reader count beside an archive of recent issues.
- Footer Newsletter: Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.
How it is built
Serif headings are switched on for the whole page. Every section is a separate Charcoal UI section, so you can reorder, remove or restyle any of them, and the accent colour is one CSS variable on the page wrapper.
Install Fieldnotes
npx shadcn@latest add @charcoal/fieldnotesTemplates are part of Charcoal UI Pro. One seat covers all 100 templates, 107 sections and 300 Pro components. The command installs the page and every section and component it uses, so it runs the moment it lands.
Frequently asked questions
- Can I use Fieldnotes for a client site?
- Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
- Is Fieldnotes a Next.js template?
- It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.
Sections in this template
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Editorial: A newspaper front page as a hero: masthead, serif headline, drop-cap columns and a captioned photo.
- Blog Featured: Magazine front with a serif lead story, a column of more stories and a numbered most-read list.
- Blog Grid: Blog index where the newest post runs wide, the rest sit in a grid and tag chips filter them.
- Team Grid: Remote team grid: big initials over a duotone photo of each person's city, with bios on hover.
- Newsletter Issues: Newsletter landing block: subscribe form with reader count beside an archive of recent issues.
- Footer Newsletter: Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.