Skip to content
DocumentationExamples
Versa Components

Component Library

Production-ready components that extend Bootstrap with Versa design, interaction, accessibility and responsive behavior.

Browse components

Filter by component family, then open any card for its working demo and reusable source.

Showing 42 components

Heroes & Actions

Hero

Versa hero system with split, centered and gradient layouts.

Heroes & Actions

Hero Slider

Hero-focused slider with manual controls, keyboard support and no forced autoplay.

Heroes & Actions

Action Hero — Overlap

Flexible options for different needs. Choose the path that best fits your goal, then continue when you are ready.

Heroes & Actions

Action Hero — Right Panel

Flexible options for different needs. Choose the path that best fits your goal, then continue when you are ready.

Heroes & Actions

Action Hero — Preparation

Featured Experience

Heroes & Actions

Action Choice Panel

Pick up where you left off.

Heroes & Actions

Hero Content Guidelines

Recommended editorial targets; text is never truncated. Button hard limits are proposed guidance, not enforced limits.

Heroes & Actions

Cards & Content

Versa Cards

Search and category filters combine within this module only.

Cards & Content

Image & Text

Full-height media beside a contrasting content panel; columns stack at the mobile breakpoint.

Cards & Content

Icon & Text

A responsive three-column feature row with adjustable icon treatments.

Cards & Content

Pre-Footer CTA

Closing call-to-action with a signature overlapping image-and-content treatment.

Cards & Content

Hover Cards

Reveal supporting content by hovering, focusing or tapping.

Cards & Content

Card Flippers

Cards that reveal a reverse face with keyboard and touch support.

Cards & Content

Hover Swap

Pointer hover, keyboard focus and touch activation select the same content.

Cards & Content

Scroll Swap

A sticky visual tracks the adjacent story. Mobile shows each illustration inline.

Cards & Content

Navigation & Interactive

Navigation

Responsive Versa navigation featuring a polished, accessible Mega Menu.

Navigation & Interactive

Tabs

Accessible tabbed content with Versa styling plus Bootstrap-powered variants for richer responsive layouts.

Navigation & Interactive

Multi-Column Accordion

Two independent accordion columns with native keyboard and touch controls.

Navigation & Interactive

Event Schedule

Switch between daily schedules using Bootstrap tabs.

Navigation & Interactive

Meeting Scheduler

Select a date and time, then download a calendar reminder. Connect your provider for confirmed bookings.

Navigation & Interactive

Galleries & Media

Editorial Image Grid

Editorial image arrangement with keyboard-accessible lightboxes.

Galleries & Media

Captioned Gallery

Linked image gallery with captions and consistent proportions.

Galleries & Media

Masonry Gallery

Responsive columns with a keyboard-accessible image detail dialog.

Galleries & Media

Before / After

A labeled native range control reveals two versions of the same composition.

Galleries & Media

Video Gallery

Choose a media treatment to preview in the main stage.

Galleries & Media

Video Playlist

Working local-file playback. Add your own licensed videos; no sample footage is bundled.

Galleries & Media

Sliders & Social Proof

Content Slider

Slide through content cards independently of a page hero.

Sliders & Social Proof

Testimonial Scroller

One testimonial at a time, with manual navigation and optional playback.

Sliders & Social Proof

Testimonial Cards

Quotes, attribution and ratings in a paired-card layout. All text below is sample content.

Sliders & Social Proof

Logo Scroller

A manually controlled, scroll-snap logo strip; no forced animation.

Sliders & Social Proof

Social Proof

Expandable image-led stories with metrics, quotes and attribution.

Sliders & Social Proof

Data & Tables

Data Table

Searchable, sortable responsive data table with a labeled horizontal scroll region on narrow screens.

Data & Tables

Responsive Comparison Table

Comparison table that transforms into labeled cards on small screens.

Data & Tables

Number Count Up

Counters animate once when visible and respect reduced-motion preferences.

Data & Tables

Countdown Timer

An explicit event date with days, hours, minutes and seconds.

Data & Tables

Timeline

A readable sequence of milestones that stacks on mobile.

Data & Tables

Event Timeline & Countdown

Timeline composition paired with a deadline countdown.

Data & Tables

Commerce & People

Pricing Table

Plan cards with a clear monthly/annual billing switch.

Commerce & People

Pricing Comparison

Comparison layout with independently scoped billing controls and plan rows.

Commerce & People

Product Detail

Thumbnail controls select the main product view. This is a display module, not a checkout.

Commerce & People

Team Profiles

Three profile cards with consistent portrait proportions and visible biographies.

Commerce & People

Job Listing Table

Filter openings by location without affecting other modules.

Commerce & People