Vitto is a premium political campaign HTML5 template built for modern election campaigns, political movements, advocacy organizations, and civic causes. With 23 fully designed pages, 5 distinct home layouts, and a foundation on Bootstrap 5.3.8, Vitto delivers everything a campaign needs to establish a powerful and credible online presence. From donation funnels and volunteer recruitment to a campaign shop and countdown timers, every page has been crafted with real campaign workflows in mind.

Vitto is the only political campaign HTML template on ThemeForest built with an accessibility-first approach. It passes ARIA 1.2 compliance out of the box, including skip links, landmark regions, focus-visible indicators, keyboard-navigable sliders, accessible countdown timers with role="timer" and aria-live, and auto-injected social icon labels. This is not a cosmetic adjustment: it is a structural commitment that makes Vitto suitable for government-affiliated campaigns, publicly funded organizations, and any candidate who wants their site to be open to every voter.

Key Features

• 23 pages covering every campaign touchpoint from home to 404
• 5 unique home page layouts for diverse campaign styles
• Bootstrap 5.3.8—latest stable release with Popper 2
• Rubik + Open Sans via Google Fonts—clean, authoritative, highly legible
• Primary palette: Red #ba1c24 + Dark Navy #141433
• 8 pre-built colour theme files (color1.css through color8.css) via CSS custom properties
• Donation system with campaign progress bars and donation detail pages
• Volunteer recruitment system with grid listing and individual volunteer detail pages
• Campaign shop with two layouts (left sidebar, right sidebar) and a product detail page
• Story and testimonial pages (grid + detail)
• Blog system (grid + detail)
• Countdown timers with accessible role="timer" and aria-live markup
• Login, registration, wishlist, FAQ, contact, and 404 utility pages
• Full ARIA 1.2 accessibility pass (03/10/2026)
• Clean, well-commented HTML, CSS, and JS
• Free Google Fonts—no licensing costs
• Retina-ready graphics and icons via Font Awesome 6
• Smooth animations and scroll effects without layout shift

Accessibility and ARIA Compliance

• Industry first: Zero competing political HTML templates on ThemeForest include any ARIA or WCAG implementation. Vitto is the only one.
• Skip navigation link at the top of every page—keyboard users can jump directly to main content
• <main> landmark on every page—screen readers announce the primary content region correctly
• Focus-visible 3px outline on all interactive elements—meets WCAG 2.4.7 (Focus Visible)
• Social icon links have aria-label values auto-injected by JavaScript—no blank or ambiguous icon links
• Sliders use role="button", descriptive aria-label, and respond to both Enter and Space keystrokes
• Mobile navigation toggle includes aria-expanded="true/false"—assistive technology announces open/closed state
• Back-to-top button carries a descriptive aria-label
• Countdown timers use role="timer" and aria-live="polite"—screen readers announce time updates without interrupting the user
• Donation form fields are labelled and keyboard-navigable—no mouse required to complete a donation flow
• Tested with ARIA 1.2 specification as of 03/10/2026
• Suitable for government-affiliated campaigns, publicly funded civic organizations, and ADA-conscious candidates

5 Unique Home Layouts

• Home Layout 1—bold hero with candidate portrait, campaign tagline, and CTA buttons
• Home Layout 2—full-width video or image slider with overlay text and donation prompt
• Home Layout 3—split-screen hero with campaign stats and progress indicators
• Home Layout 4—minimal and modern, focused on the campaign manifesto and upcoming events
• Home Layout 5—full-screen gradient hero with countdown timer front and center
• Each home page includes a donation section, volunteer CTA, and latest stories block
• Every layout is independently structured—not just a colour or font swap
• All five layouts share the same accessible navigation and footer structure

Donation System

• Donation Grid—lists all active campaigns with individual progress bars, goal amounts, and raised amounts
• Donation Details—full single-campaign page with extended description, progress bar, and donation form
• Progress bars are CSS-driven with data attributes—easy to populate dynamically
• Donation form fields are fully keyboard-accessible and ARIA-labelled
• Preset donation amount buttons (e.g. $25, $50, $100, Custom) included in markup
• Campaign metadata: raised amount, goal, donor count, and days remaining
• Designed to connect easily with any payment gateway or donation plugin

Volunteer Recruitment System

• Volunteer Grid—showcases team members and open volunteer roles in a card grid
• Volunteer Detail—individual profile page with bio, role, social links, and volunteer signup form
• No competitor political template on ThemeForest includes a dedicated volunteer recruitment system
• Cards display name, role, location, and a direct link to the detail page
• Volunteer detail page includes a contact/signup form with accessible field labelling
• Grid layout is responsive: 4 columns on desktop, 2 on tablet, 1 on mobile
• Ideal for grassroots campaigns that depend on local volunteer coordination

Campaign Shop

• Shop Left Sidebar—product grid with filter sidebar on the left
• Shop Right Sidebar—product grid with filter sidebar on the right
• Shop Product Detail—individual product page with image gallery, description, add-to-cart, and related products
• Sell campaign merchandise: t-shirts, yard signs, bumper stickers, hats, and more
• Product cards include name, price, and quick-action buttons
• Filter sidebar includes category, price range, and rating filters—all in clean markup
• Product detail page includes image zoom area, quantity selector, and a related products row
• Connects cleanly with WooCommerce or any JavaScript-based cart solution

Story and Testimonial Pages

• Story Grid—card-based listing of campaign stories, supporter testimonials, and field reports
• Story Detail—full single-story page with featured image, body content, author bio, and share links
• Separate from the blog—stories are campaign-specific narratives rather than news posts
• Cards show excerpt, author, date, and category tag
• Detail page includes a sidebar with recent stories, categories, and a search widget
• Ideal for highlighting real voter testimonials, canvassing stories, and event recaps

Countdown Timer and Events

• Countdown timers appear on select home pages and can be embedded anywhere in the template
• Built with role="timer" and aria-live="polite"—the only political template with an accessible countdown
• Displays days, hours, minutes, and seconds with clear labels
• JavaScript countdown is lightweight, dependency-free, and easy to configure via a single date variable
• Use cases: election day countdown, rally countdown, fundraising deadline, voter registration deadline
• Can be placed in a hero section, a banner strip, or a sidebar widget area
• Gracefully degrades when the target date has passed

Multi-Color Theme System (8 Themes)

• 8 complete colour theme files: color1.css through color8.css
• Built on CSS custom properties (variables)—swap one stylesheet reference to change the entire site palette
• Default: Red #ba1c24 + Dark Navy #141433
• Additional themes cover blue, green, purple, orange, teal, gold, and charcoal palettes
• Every component (buttons, progress bars, headings, links, icons) responds to the active theme file
• No Sass or build tools required—plain CSS variables work in all modern browsers
• Theme files are small and well-commented—easy to create a custom 9th theme
• Useful when the same template is reused across multiple candidates or regions in a party network

Blog System

• Blog Grid—news and updates listing in a clean card grid with category badges and read-time estimates
• Blog Detail—full article page with featured image, content area, author info, tags, and a comment form
• Blog sidebar includes recent posts, categories, tags, and a newsletter signup widget
• Cards support featured images, author avatars, publication dates, and excerpt text
• Blog detail includes social share buttons and a related posts section
• Typography is optimized for long-form reading—comfortable line-height and measure

Login and Registration Pages

• Login Page—clean, centered login form with email/password fields, remember me, and forgot password link
• Register Page—registration form with name, email, password, confirm password, and terms checkbox
• Both pages follow the campaign’s visual identity with the primary colour palette and logo placement
• Form fields are fully labelled for screen reader compatibility
• Password fields include show/hide toggle with appropriate aria-label updates
• Social login placeholder buttons (Google, Facebook) included in markup
• Redirect-ready structure—easy to wire up to any authentication backend or membership plugin

Wishlist System

• Wishlist Page—table-style layout listing saved shop products with image, name, price, stock status, and actions
• Remove item and Add to Cart buttons on each row
• Empty wishlist state included with a CTA linking back to the shop
• Connects cleanly with JavaScript localStorage or any server-side wishlist implementation
• Consistent with the shop and product detail pages in style and interaction patterns

Navigation and UX

• Sticky header with transparent-to-solid scroll behaviour on all home pages
• Mega menu and dropdown menu support built into the navigation markup
• Mobile hamburger menu with animated open/close and aria-expanded state
• Back-to-top button with smooth scroll and accessible aria-label="Back to top"
• Breadcrumbs on inner pages for clear wayfinding
• Consistent header and footer across all 23 pages—single update propagates everywhere
• FAQ page with Bootstrap accordion—keyboard and screen reader accessible
• Contact page with map placeholder, contact form, and office details
• 404 error page with campaign-branded messaging and a home link

Typography and Design

• Rubik—used for headings, labels, and UI elements. Geometric and strong without being aggressive
• Open Sans—used for body copy, captions, and form text. Highly legible at all sizes
• Both fonts loaded from Google Fonts CDN—zero licensing cost
• Primary red #ba1c24 conveys authority and urgency; Dark navy #141433 grounds the design
• Section spacing is generous and consistent—80px top/bottom on desktop, scaled down responsively
• Icon system uses Font Awesome 6—hundreds of relevant political, civic, and social icons
• Card shadows, hover transitions, and button states are polished and consistent across all pages
• High contrast between text and backgrounds—passes WCAG AA contrast ratio requirements

Cross-Browser and Device Compatibility

• Built on Bootstrap 5.3.8—the most battle-tested responsive framework available
• Tested in Chrome, Firefox, Edge, and Safari (latest versions)
• Fully responsive from 320px mobile to 2560px ultra-wide displays
• Retina/HiDPI ready—all UI elements scale cleanly on high-density screens
• No jQuery dependency—Bootstrap 5 uses vanilla JS; optional plugins are lightweight
• Popper 2 included for dropdowns and tooltips
• CSS and JS are clean and well-commented for easy customization
• W3C valid HTML markup structure

Pages Included

• Home Layouts (5)
  • Home 1
  • Home 2
  • Home 3
  • Home 4
  • Home 5
• About (1)
  • About
• Donation (2)
  • Donation Grid
  • Donation Details
• Campaign (1)
  • Campaign
• Shop (3)
  • Shop Left Sidebar
  • Shop Right Sidebar
  • Shop Product Detail
• Stories (2)
  • Story Grid
  • Story Details
• Volunteers (2)
  • Volunteer Grid
  • Volunteer Detail
• Blog (2)
  • Blog Grid
  • Blog Details
• Utility (6)
  • FAQ
  • Contact Us
  • Login
  • Register
  • Wishlist
  • 404 Error

Credits and Sources

• Bootstrap 5.3.8 - getbootstrap.com - MIT License
• Popper 2 - popper.js.org - MIT License
• Font Awesome 6 - fontawesome.com - Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License
• Google Fonts: Rubik - fonts.google.com - SIL Open Font License 1.1
• Google Fonts: Open Sans - fonts.google.com - SIL Open Font License 1.1
• Demo Images—All images used in the live demo are for demonstration purposes only and are NOT included in the download package. Image credits are listed in the documentation.
• jQuery—Not required. Bootstrap 5 is vanilla JS. jQuery may be used optionally for third-party plugin compatibility.

Changelog

• See version history below

v1.2  03/10/2026
- ARIA 1.2 accessibility pass across all 23 pages
- Added skip navigation link to every page header
- Added main landmark to every page layout
- Added focus-visible 3px outline to all interactive elements
- Social icon aria-labels now auto-injected via JavaScript
- Slider controls upgraded: role=button, aria-label, Enter/Space keyboard support
- Mobile nav toggle now sets aria-expanded true/false on open/close
- Back-to-top button now includes descriptive aria-label
- Countdown timers upgraded: role=timer + aria-live=polite

v1.1  02/27/2026
- Bootstrap upgraded from 5.0.2 to 5.3.8
- Popper upgraded to match Bootstrap 5.3.8 requirements
- data-toggle attributes updated to data-bs-toggle throughout all pages
- Compatibility shim added for any legacy data-toggle references
- Minor CSS fixes for Bootstrap 5.3.x utility class changes