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"andaria-livemarkup - 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-labelvalues auto-injected by JavaScript—no blank or ambiguous icon links - Sliders use
role="button", descriptivearia-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"andaria-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"andaria-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-labelupdates - 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-expandedstate - 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