Columns
4+
Compatible Browsers
IE11, Firefox, Safari, Opera, Chrome, Edge
Compatible With
Bootstrap 5.x, Bootstrap 4.x
High Resolution
Yes
Layout
Responsive
Themeforest Files Included
HTML Files, CSS Files, JS Files
Last Updated
Mar 2026
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)
- About (1)
- Donation (2)
- Campaign (1)
- Shop (3)
- Stories (2)
- Volunteers (2)
- Blog (2)
- Utility (6)
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
