Menu

## Dropdown

Dropdowns are toggleable, contextual overlays for displaying lists of links and contents.

Default
Include a header
Right aligned
Dropup
Without caret
Collapsible

## Accordion

Displays collapsible content panels for presenting information in a limited amount of space.

##### Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

##### Collapsible Group Item #2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.

##### Collapsible Group Item #3

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Content switcher

## Horizontal Tabs

A single content area with multiple panels, each associated with a header in a list.

Content switcher

## Vertical Tabs

A single content area with multiple panels, each associated with a header in a list.

Litty

## Lightbox

Lightbox is a script that displays images and videos by filling the screen, and dimming out the rest of the web page.

Simply add a `data-provide="lightbox"` to your link.

Image iFrame Youtube iFrame Vimeo Google Maps
Start From Image
Counter

## Count To

A plugin that will count up to a target number at a specified speed.

Basic

## +

Speed

## +

Interval

## +

Counter

## Count Down

A countdown is a sequence of backward counting to indicate the time remaining before an event is scheduled to occur.

Small
Default
Large
Uppercase
Outline
Inverse
Slider

## Carousel

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

Pager
Pagination
Slides per view
Scroll

## Scroll To

Scroll to a section of your page using a seamless animated scrolling.

For this purpose, you need to add an ID attribute to your target element, probably your <section>. Then, use that ID in value of `data-scrollto` attribute of your button. For example, you have a demo section with following code:

    <section class="section" id="section-demo"></section>

To scroll to the demo section, you need a button or any other element with `data-scrollto="section-about"`, so it can scroll to the target element upon click. A sample button is as follow:

    <button class="btn btn-primary" data-scrollto="section-about">See demos</button>

AOS

## Animate On Scroll

Small library to animate elements on your page as you scroll.

AOS allows you to animate elements as you scroll down, and up. If you scroll back to top, elements will animate to it's previous state and are ready to animate again if you scroll down.

All you have to do is to add `data-aos` attribute to html element, like so:

    <div data-aos="animation_name">

Also, you can set other options such as duration, delay and offset:

    <div data-aos-duration="1300" data-aos-delay="500" data-aos-offset="200">

To see the list of available animations, visit the oficial documentation.

It's recommended to add class `.overflow-hidden` to each section that contains animation, so you can be sure that your animated objects don't display outside of the section.

Popup

## Modal

Modals are streamlined, but flexible dialog prompts powered by JavaScript.

TheSaaS is based on Bootstrap 4. It means you can use any code from Bootstrap documentation to design your pages. We styled most of the components to look better in your pages.

Modals are one of the most required components by users. We provide an example here, but it's always a good practice to read the official Bootstrap documentation online. Press following button to see a sample modal.

##### Modal title

...