Quadrangle: University template
Programmes, people and open days.
For universities, colleges and schools: an editorial front-page hero, programmes as a hover list, faculty, open-day schedule, campus tour booking, searchable FAQs and a newsletter footer.
About the Quadrangle template
Quadrangle is for colleges and schools. An editorial front-page hero, programmes as a hover list, faculty, open-day schedule, campus tour booking and a searchable admissions FAQ.
Programmes, people and open days. It is a complete university landing page for React and Tailwind CSS 4, assembled from 8 Charcoal UI sections.
Who Quadrangle is for
- Universities and colleges.
- Private schools.
- Graduate programmes.
- Summer schools.
What is inside
8 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.
- Features Hover List: Services as a big type list; hovering a row floats a photo beside the cursor.
- Team Grid: Remote team grid: big initials over a duotone photo of each person's city, with bios on hover.
- Event Schedule: Conference agenda with day tabs, track filters and bookmarks that build your own schedule.
- Contact Booking: Book-a-demo block: pick a day, pick a slot and confirm without leaving the page.
- FAQ Search: Help-centre FAQ with instant search, highlighted matches and topic chips.
- Footer Newsletter: Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.
How it is built
Open days use the agenda section by season. 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 Quadrangle
npx shadcn@latest add @charcoal/quadrangleTemplates 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 Quadrangle for a client site?
- Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
- Is Quadrangle 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.
- Features Hover List: Services as a big type list; hovering a row floats a photo beside the cursor.
- Team Grid: Remote team grid: big initials over a duotone photo of each person's city, with bios on hover.
- Event Schedule: Conference agenda with day tabs, track filters and bookmarks that build your own schedule.
- Contact Booking: Book-a-demo block: pick a day, pick a slot and confirm without leaving the page.
- FAQ Search: Help-centre FAQ with instant search, highlighted matches and topic chips.
- Footer Newsletter: Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.