Elementary — Free Astro School Theme
Elementary is a free, open-source website theme built with Astro for elementary schools, daycare centers, preschools, or any educational organization that needs a clean, friendly, and modern web presence.
It is fully static (no server-side rendering required), easy to customize, and ready to deploy to any static hosting provider in minutes.
✨ Features
- Fully static — blazing fast, no server required
- Responsive — mobile-first layout that works on all screen sizes
- Tailwind CSS v4 — utility-first styling with a custom brand theme
- Content Collections — blog/news posts managed as Markdown files
- Customizable — swap colors, fonts, site name, contact info, and social links from a single config file
- Accessible — semantic HTML, keyboard-navigable navigation
- Netlify-ready — includes @astrojs/netlify adapter; works equally well on Vercel, Cloudflare Pages, or any static host
🛠 Tech Stack
- Tailwind CSS v4: Utility-first CSS
- @tailwindplus/elements: Interactive UI primitives (accordion, tabs, etc.)
- Biome: Linting & formatting
📄 Pages
- /: Home page — hero, news highlights, about, programs, schedule, testimonials, FAQ, newsletter signup
- /teachers: Meet the team — staff cards with name, role, and bio
- /blog: School news & announcements index
- /blog/[id]: Individual blog post
- /contact: Contact form, enrollment form, and school location/info
🧩 Components
- Layout.astro: Root HTML shell, sticky header, global styles
- Header.astro: Responsive navigation with active-link highlighting
- MobileMenu.astro: Slide-in mobile navigation drawer
- Footer.astro: Footer with links and social media icons
- Section.astro: Full-width section wrapper (sets background color)
- Container.astro: Centered content container with responsive padding
- MainHeading.astro: Hero-style heading block with headline, subtitle, and CTA
- SectionHeading.astro: Centered heading + description used at the top of sections
- Video.astro: Background or inline video with optional overlay
- InfoCards.astro: Grid of highlight cards (events, news snippets)
- Stats.astro: Key school statistics displayed as large numbers
- ProgramCards.astro: Cards presenting school programs (art, science, sports, etc.)
- Agenda.astro: Weekly or upcoming schedule display
- Teachers.astro: Grid of teacher/staff profile cards
- Testimonials.astro: Scrollable parent/student testimonials carousel
- BlogList.astro: Grid listing of all blog posts
- Faq.astro: FaqItem.astro: Accordion-style FAQ section
- Button.astro: Polymorphic button/link with multiple color variants and sizes
- FormContact.astro: General contact form
- FormEnrollment.astro: Student enrollment inquiry form
- FormNewsletter.astro: Email newsletter signup form
