## GDPR Compliance

We use cookies to ensure you get the best experience on our website. By continuing to use our site, you accept our use of cookies, privacy policy and terms of service.

ESC

### What are you looking for?

### Subscribe to our Newsletter

Join 10k+ people to get notified about new posts, news and updates.

Do not worry we don't spam!

#### Log in

Remember me?
Forgot password

Or

Have no account yet? Sign up

#### Create an account

I read and accept the terms of use.

Or

Already have an account? Log in

#### Reset password

I'm not a robot.

Remember your password? Log in

#### Terms of use

Terms of use dolor sit amet consectetur, adipisicing elit. Recusandae provident ullam aperiam quo ad non corrupti sit vel quam repellat ipsa quod sed, repellendus adipisci, ducimus ea modi odio assumenda.

##### Disclaimers

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, cum esse possimus officiis amet ea voluptatibus libero! Dolorum assumenda esse, deserunt ipsum ad iusto! Praesentium error nobis tenetur at, quis nostrum facere excepturi architecto totam.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, soluta alias eaque modi ipsum sint iusto fugiat vero velit rerum.

##### Limitation on Liability

Sequi, cum esse possimus officiis amet ea voluptatibus libero! Dolorum assumenda esse, deserunt ipsum ad iusto! Praesentium error nobis tenetur at, quis nostrum facere excepturi architecto totam.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, soluta alias eaque modi ipsum sint iusto fugiat vero velit rerum.

##### Copyright Policy

Dolor sit amet consectetur adipisicing elit. Sequi, cum esse possimus officiis amet ea voluptatibus libero! Dolorum assumenda esse, deserunt ipsum ad iusto! Praesentium error nobis tenetur at, quis nostrum facere excepturi architecto totam.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, soluta alias eaque modi ipsum sint iusto fugiat vero velit rerum.

##### General

Sit amet consectetur adipisicing elit. Sequi, cum esse possimus officiis amet ea voluptatibus libero! Dolorum assumenda esse, deserunt ipsum ad iusto! Praesentium error nobis tenetur at, quis nostrum facere excepturi architecto totam.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, soluta alias eaque modi ipsum sint iusto fugiat vero velit rerum.

Do you agree to our terms? Sign up

### Shopping cart

Your cart empty!

##### Laptop Cover

1 x $24.00
Remove

##### Disney Toys

1 x $5.00
Remove

##### Screen Axe

1 x $19.00
Remove

##### Airpods Pro

1 x $49.00
Remove

## Your favorites

You have not yet added any recipe to your favorites list.

Browse recipes

#### Schedule your 15-minute demo now

We’ll tailor your demo to your immediate needs and answer all your questions. Get ready to see how it works!

Dark mode toggle

The Lexend AI automation guide is here.
Check it out!

# In-House Components

## Appear Animations

A collection of smooth animations to use within your page via Anime.js library.

We used Anime.js library for animations, is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

### Usage

We made it easy to deal with Anime.js and even easy to implement just by using data attributes instead of initiating animations via javascript code.

To configure Anime.js, use the `data-anime` attribute and thier options or our built-in options below. It supports 3 different modes so the animations will start when element clicked, hovered or when it's on viewport, more details on the options table below.

For the Appear Animations mode to work you should add `onview: true` or `onview: {offset_number}` to start animations as it appears!

    <element data-anime="onview: -200; translateY: [40, 0]; scale: [0.8, 1]; opacity: [0, 1];">Get started</element>

### Staggering

Staggering allows you to animate multiple elements with follow through and overlapping action by adding this function to delay property `anime.stagger(value, options)` and you have to add `data-anime="targets: .selector"` to the parent element with the animations options.

#### Hello World!

Lorem ipsum dolor sit amet.

    <!-- target all child elements and increase delay by 100ms for each elements. -->
    <div data-anime="
         onview: -200;
         targets: .element;
         translateY: [20, 0];
         opacity: [0, 1];
         delay: anime.stagger(100);">
        <h4 class="element">Hello World!</h4>
        <p class="element">Lorem ipsum dolor sit amet.</p>
        <button class="element">Get started</button>
    </div>

### Options

These are our built-in options to target, trigger or initiate the animations.

Option | Value | Default | Description
--- | --- | --- | ---
`targets` | `string` | `""` | Target child elements by class or ID or any css selector for ex: `targets: > *`.
`onclick` | `boolean` `string` | `false` | Start animation when element clicked. You can set it to `true` or use `alternate` or `restart`.
`onhover` | `boolean` | `false` | Start animation when element hovered.
`onview` | `boolean` `number` | `false` `0` | Start animation when it's on viewport. You can set an offset in px for ex: `100` or `-100`.
`autoplay` | `boolean` | `true` | Autoplay animation when element it's on viewport.

You can find out all the options and functions on their documentation.

## Button

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

#### Color

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. but, we extended it to use all the color shades class to style your buttons as you want.

Primary P 200 P 700 Secondary Success
Info Warning Danger Dark Gray Light

    <href="#" class="btn btn-primary">Primary</a>
    <href="#" class="btn btn-primary-200 text-primary-700">Primary 200</a>
    <href="#" class="btn btn-primary-700 text-primary-200">Primary 700</a>
    <href="#" class="btn btn-secondary">Secondary</a>
    <href="#" class="btn btn-success">Success</a>
    <href="#" class="btn btn-info">Info</a>
    <href="#" class="btn btn-warning">Warning</a>
    <href="#" class="btn btn-danger">Danger</a>
    <href="#" class="btn btn-dark">Dark</a>
    <href="#" class="btn btn-gray">Gray</a>
    <href="#" class="btn btn-light">Light</a>

#### Sizing

Fancy larger or smaller buttons? Add from `.btn-2xs` to `.btn-2xl` for additional sizes.

2X X L M S XS 2XS

    <href="#" class="btn btn-primary btn-2xl">2X Large</a>
    <href="#" class="btn btn-primary btn-xl">X Large</a>
    <href="#" class="btn btn-primary btn-lg">Large</a>
    <href="#" class="btn btn-primary">Medium</a><!-- default size -->
    <href="#" class="btn btn-primary btn-sm">Small</a>
    <href="#" class="btn btn-primary btn-xs">X Small</a>
    <href="#" class="btn btn-primary btn-2xs">2X Small</a>

#### Type

Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast, anyway, you have four type to work with!

Default Outline Alternate Ghost

    <href="#" class="btn btn-primary">Default</a>
    <href="#" class="btn btn-outline-primary">Outline</a>
    <href="#" class="btn btn-alt-primary">Alternate</a>
    <href="#" class="btn btn-ghost-primary">Ghost</a>

#### Icon

You can add icons to your buttons and customize your buttons using some useful utilities like sizing, radius to achieve the needed style and shape.

Check it out Download

    <a href="#" class="btn btn-primary">
        <span>Check it out</span><i class="unicon-arrow-right"></i>
    </a>

    <a href="#" class="btn btn-primary">
        <i class="unicon-cloud-download"></i><span>Download</span>
    </a>

    <a href="#" class="btn btn-primary w-48px h-48px rounded-circle">
        <i class="unicon-close"></i>
    </a>

#### Responsive

Now buttons are responsive and you can set a button size to a selected breakpoint.

Resize screen

    <href="#" class="btn btn-primary btn-sm sm:btn-md lg:btn-lg">...</a>

## Form

Give textual form controls an upgrade with custom styles, sizing, focus states, and more via extended Bootstrap utility classes.

#### Sizing

Set sizes using classes like `.form-control-lg`, `.form-control-md` and `.form-control-sm`.

    <!-- lg: height 56px -->
    <input type="email" class="form-control form-control-lg">

    <!-- default: height 48px -->
    <input type="email" class="form-control">

    <!-- sm: height 40px -->
    <input type="email" class="form-control form-control-sm">

#### Form and icons

You can use an icon from the Icon library inside a form control. Wrap the form control + icon on an element has `.form-icon-group` class and add `.form-icon` class to your icon element.

By default, the icon will be placed on the left side of the form, to change the alignment,
add the `.form-icon-flip` class just next to `.form-icon-group` class.

To enable an action, use an `<a>` or `<button>` element to make the icon clickable for an action.

    <!-- Default alignement + Non-clickable icon -->
    <div class="form-icon-group w-1/2 mx-auto">
        <input type="email" class="form-control" placeholder="Search..">
        <span class="form-icon text-gray">
            <i class="unicon-search icon-2"></i>
        </span>
    </div>

    <!-- Flip alignement + <a> element -->
    <div class="form-icon-group form-icon-flip w-1/2 mx-auto">
        <input type="email" class="form-control" placeholder="Search..">
        <a href="#" class="form-icon text-gray">
            <i class="unicon-arrow-right icon-2"></i>
        </a>
    </div>

    <!-- Flip alignement + <button> element -->
    <div class="form-icon-group form-icon-flip w-1/2 mx-auto">
        <input type="email" class="form-control" placeholder="Search..">
        <button type="button" class="form-icon text-gray">
            <i class="unicon-send-alt icon-2"></i>
        </button>
    </div>

#### Playground

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Email
Looks good!
Please put your address email!
Password
Looks good!
Password is required!
Address
Address 2
City
State
Zip
I read and accept the terms and conditions.

    <form class="row gx-2 gy-3 needs-validation" novalidate>
        <div class="col-md-6">
            <label for="inputEmail4" class="form-label">Email</label>
            <input type="email" class="form-control" id="inputEmail4" required>
            <div class="valid-feedback">Looks good!</div>
            <div class="invalid-feedback">Please put your address email!</div>
        </div>
        <div class="col-md-6">
            <label for="inputPassword4" class="form-label">Password</label>
            <input type="password" class="form-control" id="inputPassword4" required>
            <div class="valid-feedback">Looks good!</div>
            <div class="invalid-feedback">Password is required!</div>
        </div>
        <div class="col-12">
            <label for="inputAddress" class="form-label">Address</label>
            <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
        </div>
        <div class="col-12">
            <label for="inputAddress2" class="form-label">Address 2</label>
            <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
        </div>
        <div class="col-md-6">
            <label for="inputCity" class="form-label">City</label>
            <input type="text" class="form-control" id="inputCity">
        </div>
        <div class="col-md-4">
            <label for="inputState" class="form-label">State</label>
            <select id="inputState" class="form-select">
            <option selected>Choose...</option>
            <option>...</option>
            </select>
        </div>
        <div class="col-md-2">
            <label for="inputZip" class="form-label">Zip</label>
            <input type="number" class="form-control" id="inputZip">
        </div>
        <div class="col-12">
            <div class="form-check">
            <input class="form-check-input" type="checkbox" id="gridCheck">
            <label class="form-check-label" for="gridCheck">
                I read and accept the <a href="#" class="link-gradient">terms and conditions</a>.
            </label>
            </div>
        </div>
        <div class="col-12">
            <button type="submit" class="btn btn-primary w-full mt-1">Sign in</button>
        </div>
    </form>

## Nav

A custom navigation built with flexbox and provide a strong foundation for building all types of navigation components.

### Vertical

Use `.nav-y` for vertical (y-axis) navigation, you can add `.hr` on `<li>` element as an horizontal separator.

    <ul class="nav-y gap-2">
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
        <li class="hr"></li>
        <li><a href="#">Nav item</a></li>
    </ul>

### Horiztonal

Use `.nav-x` for horizontal (x-axis) navigation, you can add `.vr` on `<li>` element as a vertical separator.

    <ul class="nav-x">
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
        <li class="vr"></li>
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
    </ul>

### Spacing

You can customize the navigation spacing by using `.gap-*` to create a gap/space between nav items it works for the both directions.

    <ul class="nav-x gap-6">
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
    </ul>

### Nav + icon

You can add icons to your navigation, and they will fit seamlessly into place.

    <ul class="nav-y gap-2">
        <li><a href="#"><i class="unicon-store"></i>Dashboard</a></li>
        <li><a href="#"><i class="unicon-view-next"></i>Purchase history</a></li>
        <li><a href="#"><i class="unicon-enterprise"></i>Billing address</a></li>
        <li><a href="#"><i class="unicon-user-avatar-filled-alt"></i>Edit profile</a></li>
        <li class="hr"></li>
        <li><a class="text-danger" href="#"><i class="unicon-power"></i>Log out</a></li>
    </ul>

    <ul class="nav-x gap-6">
        <li><a href="#"><i class="unicon-home"></i>Home</a></li>
        <li><a href="#"><i class="unicon-star"></i>Services</a></li>
        <li><a href="#"><i class="unicon-document"></i>Blog</a></li>
        <li><a href="#"><i class="unicon-send-alt"></i>Contact us</a></li>
    </ul>

### RTL support

By default the navigation component support RTL languages for example use `dir="rtl"` attribute to see it in action.

    <ul class="nav-y gap-2" dir="rtl">
        <li><a href="#"><i class="unicon-store"></i> لوحة التحكم </a></li>
        <li><a href="#"><i class="unicon-view-next"></i> المشتريات </a></li>
        <li><a href="#"><i class="unicon-enterprise"></i> تعديل العناوين </a></li>
        <li><a href="#"><i class="unicon-user-avatar-filled-alt"></i> تعديل الملف الشخصي </a></li>
        <li class="hr"></li>
        <li><a href="#"><i class="unicon-power"></i> تسجيل الخروج </a></li>
    </ul>

    <ul class="nav-x gap-6" dir="rtl">
        <li><a href="#"><i class="unicon-home"></i> الرئيسية </a></li>
        <li><a href="#"><i class="unicon-star"></i> الخدمات </a></li>
        <li><a href="#"><i class="unicon-document"></i> مقالات </a></li>
        <li><a href="#"><i class="unicon-send-alt"></i> >إتصل بنـا </a></li>
    </ul>

## Alert

Soon..

## Modal

Create Modal dialogs with different styles and transitions.

### Usage

The Modal component consists of an overlay, a dialog and an optional close button. You can use any element to toggle a modal dialog. To enable the necessary JavaScript, add the `data-uc-toggle` attribute. An `<a>` element needs to be linked to the modal's id. If you are using another element, like a button, just add the `data-uc-toggle="target: #ID"` attribute to target the id of the modal container.

Add the `data-uc-modal` attribute to a `<div>` element to create the modal container and an overlay that blanks out the page. It is important to add an `id` to indicate the element for toggling. Use the following classes to define the modal's sections.

    <!-- This is a button toggling the modal -->
    <button data-uc-toggle="target: #modal-id" type="button">Toggle modal</button>

    <!-- This is the modal -->
    <div id="modal-id" data-uc-modal>
        <div class="uc-modal-dialog p-3">
            <button class="uc-modal-close-default" type="button">Close</button>
            <h2 class="h4">Modal heading</h2>
            <p> ... </p>
        </div>
    </div>

### Header and footer

To divide the modal into different content sections use `panel`, padding `p-{*}` and `border-{*}`.

    <!-- This is a button toggling the modal -->
    <button data-uc-toggle="target: #modal-id" type="button">Toggle modal</button>

    <!-- This is the modal -->
    <div id="modal-id" data-uc-modal>
        <div class="uc-modal-dialog p-3">
            <button class="uc-modal-close-default" type="button">Close</button>

            <!-- The modal header -->
            <div class="panel p-3 border-bottom">
                <h2 class="h4">Modal heading</h2>
            </div>

            <!-- The modal body -->
            <div class="panel p-3">
                <p> ... </p>
            </div>

            <!-- The modal footer -->
            <div class="panel p-3 border-top">
                ...
            </div>
        </div>
    </div>

### Full modifier

To create a modal, that fills the entire page, add the `uc-modal-full` class. It is also recommended adding the `.uc-modal-close-full` class to the close button, so that it adapts its styling.

    <div class="uc-modal-full" data-uc-modal>
        <div class="uc-modal-dialog">
            <button class="uc-modal-close-full" type="button">Close</button>
            ...
        </div>
    </div>

### Close behavior

To create a close button, enable its functionality and add proper styling and positioning using one of the classes below.

Class | Description
--- | ---
`uc-modal-close-default` | Add this class to your `<button>` or `<a>` to add a close modal behavior, but also this class will add a proper styling and positioning to the element on the top right of the modal dialog but still inside.
`uc-modal-close-outside` | Add this class to your `<button>` or `<a>` to add a close modal behavior, but also this class will add a proper styling and positioning to the element on the top right but outside of the modal dialog.
`uc-modal-close-full` | Add this class to your `<button>` or `<a>` to add a close modal behavior, this class works well with full modal.
`uc-modal-close` | Add this class to your `<button>` or `<a>` to add a close modal behavior only.

## Hi, I'm a modal!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio est, beatae tempore rerum corporis iure aliquam. Asperiores totam quae nesciunt!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

## I'm a full modal!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio est, beatae tempore rerum corporis iure aliquam. Asperiores totam quae nesciunt!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

## Animations

A collection of smooth animations to use within your page.

All animations themselves are implemented with CSS, so they do not require JavaScript to play.

### Usage

Add one of the `.uc-animation-*` classes to any element. The animation is shown when the class is added, so usually immediately on page load.

Class | Description
--- | ---
`.uc-animation-fade` | The element fades in.
`.uc-animation-scale-up` `.uc-animation-scale-down` | The element fades in and scales up or down.
`.uc-animation-slide-top` `.uc-animation-slide-right` `.uc-animation-slide-bottom` `.uc-animation-slide-left` | The element fades and slides in from the top, bottom, left or right by its own height or width.
`.uc-animation-slide-top-small` `.uc-animation-slide-right-small` `.uc-animation-slide-bottom-small` `.uc-animation-slide-left-small` | The element fades and slides in from the top, bottom, left or right with a smaller distance which is specified by a fixed pixel value.
`.uc-animation-slide-top-medium` `.uc-animation-slide-right-medium` `.uc-animation-slide-bottom-medium` `.uc-animation-slide-left-medium` | The element fades and slides in from the top, bottom, left or right with a medium distance which is specified by a fixed pixel value.
`.uc-animation-kenburns` | The element will scales very slowly up without fading in.
`.uc-animation-shake` | The element shakes.
`.uc-animation-stroke` | The SVG element strokes are drawn.
`.uc-animation-spin` | The element spin.
`.uc-animation-ping` | The element ping.
`.uc-animation-pulse` | The element pulse.
`.uc-animation-bounce` | The element bounce.

    <div class="uc-animation-fade"></div>

### Toggle animation

To toggle an animation on hover or focus, add the `uc-animation-toggle` class to a parent element. Also add `tabindex="0"` to make the animation focusable through keyboard navigation and on touch devices.

Slide left
Slide top
Slide right
Slide bottom

    <div class="uc-animation-toggle" tabindex="0">
        <div class="uc-animation-fade"></div>
    </div>

### Reverse animation

By default, all animations are incoming. To reverse any animation, add the `uc-animation-reverse` class.

Slide left
Slide top
Slide right
Slide bottom

    <div class="uc-animation-fade uc-animation-reverse"></div>

### Speed modifier

To play animations at a faster speed, add the `uc-animation-fast` class to the element.

Slide left
Slide top
Slide right
Slide bottom

    <div class="uc-animation-fade uc-animation-speed"></div>

### Origin modifiers

By default, scaling animations originate from the center. To modify this behavior, add one of the `.origin-*` classes from the Utilities.

Top left
Top center
Bottom right

### Ken Burns

To add a simple Ken Burns effect, add the `uc-animation-kenburns` class to any image. You can also apply the `uc-animation-reverse` or one of the `.origin-*` classes from the Utilities to modify the effect. Hover on the images below to see it in action!

Origin: default = center
Origin: top-right

    <img class="uc-animation-kenburns" src="" width="" height="" alt="" />

    <img class="uc-animation-kenburns origin-top-right" src="" width="" height="" alt="" />

By default, the animation starts on page load. In this example we used the `uc-animation-toggle`, to toggle the effect when mouse move over the image.

## Accordion

Create a list of items that can be shown individually by clicking an item's header.

#### Usage

The Accordion component consists of a parent container with the `uc-accordion` attribute, and a title and content part for each accordion item.

- Item 1
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Item 2
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Item 3
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    <ul uc-accordion>
        <li>
            <a class="uc-accordion-title" href="#">Title</a>
            <div class="uc-accordion-content">Content</div>
        </li>
        <li>
            <a class="uc-accordion-title" href="#">Title</a>
            <div class="uc-accordion-content">Content</div>
        </li>
        <!-- More -->
    </ul>

#### No collapsing

By default, all accordion items can be collapsed. To prevent this behavior and always maintain one open item, add the `collapsible: false` option to the attribute.

- Item 1
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Item 2
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Item 3
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    <ul uc-accordion="collapsible: false">
        <li>
            <a class="uc-accordion-title" href="#">Title</a>
            <div class="uc-accordion-content">Content</div>
        </li>
        <li>
            <a class="uc-accordion-title" href="#">Title</a>
            <div class="uc-accordion-content">Content</div>
        </li>
        <!-- More -->
    </ul>

#### Multiple open items + Divider

To display multiple content sections at the same time without one collapsing when the other one is opened, add the `multiple: true` option to the `uc-accordion` attribute.

- Item 1
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Item 2
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Item 3
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    <ul class="uc-accordion-divider" uc-accordion="multiple: true">
        <li>
            <a class="uc-accordion-title" href="#">Title</a>
            <div class="uc-accordion-content">Content</div>
        </li>
        <li>
            <a class="uc-accordion-title" href="#">Title</a>
            <div class="uc-accordion-content">Content</div>
        </li>
        <!-- More -->
    </ul>

#### Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon.

Option | Value | Default | Description
--- | --- | --- | ---
`active` | Number | `false` | Index of the element to open initially.
`animation` | Boolean | `true` | Reveal item directly or with a transition.
`collapsible` | Boolean | `true` | Allow all items to be closed.
`content` | String | `> .uc-accordion-content` | The content selector, which selects the accordion content elements.
`duration` | Number | `200` | Animation duration in milliseconds.
`multiple` | Boolean | `false` | Allow multiple open items.
`targets` | String | `> *` | CSS selector of the element(s) to toggle.
`toggle` | String | `> .uc-accordion-title` | The toggle selector, which toggles accordion items.
`transition` | String | `ease` | The transition to use when revealing items. Use keyword for easing functions.
`offset` | Number | `0` | Pixel offset added to scroll top.

## Tab

Create a tabbed navigation with different styles.

#### Usage

The Tab component consists of clickable tabs, that are aligned side by side in a list. Its JavaScript functionality extends the Switcher component and is necessary to dynamically transition through different contents using the tabbed navigation.

- Item 1
- Item 2
- Item 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Consectetur adipiscing elit, lorem ipsum dolor sit amet.
Consectetur adipiscing elit, lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    <ul class="uc-child-width-expand" uc-tab>
        <li> <a href="#">Title</a> </li>
        <li> <a href="#">Title</a> </li>
        <!-- More -->
    </ul>
    <div class="uc-switcher">
        <div>
            <a href="#">Content</a>
        </div>
        <div>
            <a href="#">Content</a>
        </div>
        <!-- More -->
    </div>

#### Alignment

You can combine tabs with the Flex component or the Width component to modify the alignment of the navigations.

- Item 1
- Item 2
- Item 3

    <ul class="justify-start or uc-flex-left" uc-tab>
        <li> <a href="#">Title</a> </li>
        <li> <a href="#">Title</a> </li>
        <!-- More -->
    </ul>

- Item 1
- Item 2
- Item 3

    <ul class="justify-center or uc-flex-center" uc-tab>
        <li> <a href="#">Title</a> </li>
        <li> <a href="#">Title</a> </li>
        <!-- More -->
    </ul>

- Item 1
- Item 2
- Item 3

    <ul class="justify-end or uc-flex-right" uc-tab>
        <li> <a href="#">Title</a> </li>
        <li> <a href="#">Title</a> </li>
        <!-- More -->
    </ul>

- Item 1
- Item 2
- Item 3

    <ul class="uc-child-width-expand" uc-tab>
        <li> <a href="#">Title</a> </li>
        <li> <a href="#">Title</a> </li>
        <!-- More -->
    </ul>

#### Animation

- Item 1
- Item 2
- Item 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Consectetur adipiscing elit, lorem ipsum dolor sit amet.
Consectetur adipiscing elit, lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    <!-- Fade animation -->
    <ul uc-tab="animation: uc-animation-fade">
        <li> <a href="#">Title</a> </li>
        <li> <a href="#">Title</a> </li>
        <!-- More -->
    </ul>

- Item 1
- Item 2
- Item 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Consectetur adipiscing elit, lorem ipsum dolor sit amet.
Consectetur adipiscing elit, lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    <!-- Slide animation -->
    <ul uc-tab="animation: uc-animation-slide-top-small">
        <li> <a href="#">Title</a> </li>
        <li> <a href="#">Title</a> </li>
        <!-- More -->
    </ul>

- Item 1
- Item 2
- Item 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Consectetur adipiscing elit, lorem ipsum dolor sit amet.
Consectetur adipiscing elit, lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    <!-- Multiple animations -->
    <ul uc-tab="animation: uc-animation-slide-left-small, uc-animation-slide-right-small">
        <li> <a href="#">Title</a> </li>
        <li> <a href="#">Title</a> </li>
        <!-- More -->
    </ul>

#### Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon.

Option | Value | Default | Description
--- | --- | --- | ---
`connect` | CSS selector | `false` | Related item's container. By default, this is the next element with the 'uc-switcher' class.
`toggle` | CSS selector | `> *` | The toggle selector, which triggers content switching on click.
`active` | Number | `0` | Active index on init. Providing a negative number indicates a position starting from the end of the set.
`animation` | String | `false` | Space-separated names of animations. Comma-separated for animation out.
`duration` | Number | `200` | The animation duration.
`swiping` | Boolean | `true` | Use swiping.
`media` | Number, String | `960` | When to switch to horizontal mode - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl) or any valid media query (e.g. (min-width: 900px)).

## Switcher

Dynamically transition through different content panes.

#### Usage

The Switcher component consists of a number of toggles and their related content items. Add the `uc-switcher` attribute to a list element that contains the toggles. Add the `.uc-switcher` class to the element containing the content items.

By default, the element with the `.uc-switcher` class has to succeed the toggle directly in order for the switcher to function. If you need it to be nested in another element, for example when using a grid, add the `connect: SELECTOR` option to the `uc-switcher` attribute and select the element containing the items for switching.

$49 per month
$29 per month (50% off)

    <ul class="uc-subnav uc-subnav-pill gap-1 uc-child-width-expand border rounded-default p-narrow min-w-xs mx-auto" data-uc-switcher="">
        <li>
            <a class="d-flex justify-center" href="#">Monthly</a>
        </li>
        <li>
            <a class="d-flex justify-center" href="#">Yearly</a>
        </li>
    </ul>
    <div class="uc-switcher mt-2 text-center">
        <li>
            <div>$49 per month</div>
        </li>
        <li>
            <div>$29 per month (50% off)</div>
        </li>
    </div>

#### Playground

- ## Starter

  #### $49 / mo

  For individuals, freelancers

  Sign up

  ## Pro

  #### $89 / mo

  For startups, agencies

  Sign up

- ## Starter

  #### $29 / mo

  For individuals, freelancers

  Sign up

  ## Pro

  #### $79 / mo

  For startups, agencies

  Sign up

    <ul class="uc-subnav uc-subnav-pill gap-1 uc-child-width-expand border rounded-default p-narrow min-w-xs mx-auto" data-uc-switcher="">
        <li>
            <a class="d-flex justify-center" href="#">Monthly</a>
        </li>
        <li>
            <a class="d-flex justify-center" href="#">Yearly</a>
        </li>
    </ul>
    <div class="uc-switcher mt-2 text-center mt-4">
        <li>
            <div class="row child-cols-6">
                <div>
                    <div class="card card-body p-3 py-4 vstack gap-2 text-dark">
                        <h2 class="h5 text-uppercase m-0 text-inherit">Starter</h2>
                        <h4 class="h4 m-0 text-inherit">$49 / mo</h4>
                        <p>For individuals, freelancers</p>
                        <a href="#" class="btn btn-md btn-outline-primary mt-2">Sign up</a>
                    </div>
                </div>
                <div>
                    <div class="card card-body p-3 py-4 vstack gap-2 text-dark border-primary">
                        <h2 class="h5 text-uppercase m-0 text-inherit">Pro</h2>
                        <h4 class="h4 m-0 text-inherit">$89 / mo</h4>
                        <p>For startups, agencies</p>
                        <a href="#" class="btn btn-md btn-primary mt-2">Sign up</a>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="row child-cols-6">
                <div>
                    <div class="card card-body p-3 py-4 vstack gap-2 text-dark">
                        <h2 class="h5 text-uppercase m-0 text-inherit">Starter</h2>
                        <h4 class="h4 m-0 text-inherit">$29 / mo</h4>
                        <p>For individuals, freelancers</p>
                        <a href="#" class="btn btn-md btn-outline-primary mt-2">Sign up</a>
                    </div>
                </div>
                <div>
                    <div class="card card-body p-3 py-4 vstack gap-2 text-dark border-primary">
                        <h2 class="h5 text-uppercase m-0 text-inherit">Pro</h2>
                        <h4 class="h4 m-0 text-inherit">$79 / mo</h4>
                        <p>For startups, agencies</p>
                        <a href="#" class="btn btn-md btn-primary mt-2">Sign up</a>
                    </div>
                </div>
            </div>
        </li>
    </div>

#### Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon.

Option | Value | Default | Description
--- | --- | --- | ---
`connect` | CSS selector | `false` | Related item's container. By default, this is the next element with the 'uc-switcher' class.
`toggle` | CSS selector | `> *` | The toggle selector, which triggers content switching on click.
`active` | Number | `0` | Active index on init. Providing a negative number indicates a position starting from the end of the set.
`animation` | String | `false` | Space-separated names of animations. Comma-separated for animation out.
`duration` | Number | `200` | The animation duration.
`swiping` | Boolean | `true` | Use swiping.
`media` | Number, String | `960` | When to switch to horizontal mode - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl) or any valid media query (e.g. (min-width: 900px)).

## Slider

We made it easy to deal with Swiper 8 slider and even easy to implement with responsive on different screens using breakpoints.

### Usage

To setup Swiper, use the `data-swiper` attribute and use our built-in options that are explained in the table below:

    <div class="swiper" data-swiper="items: 2; gap: 8; dots: .swiper-pagination;" data-swiper-l="items: 3;">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>

        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>

        <!-- Add Arrows -->
        <div class="swiper-next"></div>
        <div class="swiper-prev"></div>
    </div>

### Responsive

We have custom configured responsive control using breakpoints `data-swiper-{breakpoint}`, the available breakpoints: `s`, `m`, `l` and `xl`.

    <div class="swiper" data-swiper="items: 1; center: true;" data-swiper-m="items: 3; center: false;">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
    </div>

### Options

These are our built-in and most used options to configure and customize your swiper slider 8.

Option | Value | Default | Description
--- | --- | --- | ---
`items` | `number | 'auto'` | `1` | number of slides per view.
`sets` | `number` | `1` | Set numbers of slides to define and enable group sliding.
`active` | `number` | `0` | Index number of initial slide.
`connect` | `string` | `null` | Connet two sliders via css class selector.
`gap` | `number` | `48` | Distance between slides in px.
`center` | `boolean` | `false` | If `true`, then active slide will be centered, not always on the left side.
`center-bounds` | `boolean` | `false` | If `true`, then active slide will be centered without adding gaps at the beginning and end of slider.
`dots` | `string` | `.swiper-dotnav` | String with CSS selector or HTML element of the container with pagination.
`dots-type` | `string` | `bullets` | String with type of pagination. Can be 'bullets', 'fraction', 'progressbar' or 'custom'.
`dots-click` | `boolean` | `true` | If `true` then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type.
`next` | `string` | `.swiper-next` | String with CSS selector or HTML element of the element that will work like 'next' button after click on it.
`prev` | `string` | `.swiper-prev` | String with CSS selector or HTML element of the element that will work like 'prev' button after click on it.
`disable-class` | `string` | `.swiper-disabled` | CSS class name added to navigation button when it becomes disabled.
`auto-height` | `boolean` | `false` | Set to `true` and slider wrapper will adapt its height to the height of the currently active slide.
`autoplay` | `number` | `3000` | Activate autoplay and set a delay between transitions (in ms). If this parameter is not specified, auto play will be disabled.
`autoplay-init` | `boolean` | `true` | Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction.
`offset` | `number` | `0` | Add (in px) additional slide offset in the end of the container (after all slides).
`fade` | `boolean` | `false` | Enables slides cross fade.

You can find out all the options and functions on their documenation.

## Content Table

Soon..

## Sticky

Make elements remain at the top of the viewport, like a sticky navigation, sidebars and content.

### Usage

To create an element that remains at the top of the viewport when scrolling down the site,
add the `data-uc-sticky` attribute to that element.

Stick to the top

    <div data-uc-sticky>Stick to the top</div>

### Position

By default, the element sticks to the top of the viewport. You can set the `position: bottom` option to stick it to the bottom of the viewport.

Stick to the bottom

    <div data-uc-sticky="position: bottom">Stick to the bottom</div>

### Start

Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -.
The default value of `0` means that the element's top border and viewport's top border intersect. A CSS Selector will set start to the selected element's bottom border and the element's top border.

100px
10vh
100%
Selector

    <!-- Sticks after 100px scrolling -->
    <div data-uc-sticky="start: 100;"></div>

    <!-- Sticks after 10vh scrolling -->
    <div data-uc-sticky="start: 10vh;"></div>

    <!-- Sticks after scrolling the elements height -->
    <div data-uc-sticky="start: 100%;"></div>

    <!-- Sticks after the top of the selected element -->
    <div data-uc-sticky="start: #selector;"></div>

### End

End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -.
A value of `0` means that the element's top border and viewport's top border intersect, which would cause the element not to be sticky at all if start is also set to `0`. A CSS Selector will set the end to the selected element's bottom and the element's bottom border.
`false` will make the element stick until the end of the page.
`true` selects the parent element.

100px
10vh
100%
Selector

    <!-- Sticks until 100px scrolling -->
    <div data-uc-sticky="end: 100;"></div>

    <!-- Sticks until 10vh scrolling -->
    <div data-uc-sticky="end: 10vh;"></div>

    <!-- Sticks until scrolling the elements height -->
    <div data-uc-sticky="end: 100%;"></div>

    <!-- Sticks until the bottom of the selected element -->
    <div data-uc-sticky="end: #selector;"></div>

    <!-- Sticks until the bottom of its parent container -->
    <div data-uc-sticky="end: true;"></div>

### Offset

To set an offset to the viewport's edge when the element is sticky, add the `offset` option. The value can be in vh, % and px. It supports basic mathematics operands + and -.

Stick 100px below the top

    <div data-uc-sticky="offset: 100">Stick 100px below the top</div>

### Show on up

You can make the sticky element show only when scrolling up to save space. Together with an animation, this makes for a very smooth experience.

Slide in on scroll up

    <div data-uc-sticky="show-on-up: true">Slide in on scroll up</div>

### Animation

Add an animation from the Animation component in order to have the sticky element reappear smoothly if a start offset is set.

Animation Slide Top

    <div data-uc-sticky="animation: uc-animation-slide-top;">Animation Slide Top</div>

### Overflow flip

The `overflow-flip` option disables the sticky behavior for oversized content. Instead, it only flips the sticky position if the element is larger than the viewport. Changing the scroll direction will not affect the sticky position. Together with the `start` and `end` options, two nice sticky effects can be achieved. Cover an element by following content or reveal it by previous content.

overflow-flip: true
end: 100%
Cover previous section.
Reveal next section.
position: bottom
overflow-flip: true
start: -100%
end: 0

    <!-- Section will be covered by the next section -->
    <div data-uc-sticky="overflow-flip: true; end: 100%;"></div>

    <div>A section the will cover previous section and reveal next section.</div>

    <!-- Section will be revealed by the previous section -->
    <div data-uc-sticky="position: bottom; overflow-flip: true; start: -100%; end: 0;"></div>

### Oversized content

Sticky content that is larger than the viewport will scroll down and stick to the bottom of the viewport. Changing the scroll direction will immediately scroll the sticky content up and change the sticky behavior to stick to the top of the viewport. Scrolling down will change the behavior again.

Oversized content...
Stick until content end.

    <div class="row">
        <div class="col-8">
            <div>Oversized content...</div>
        </div>
        <div class="col-4">
            <div data-uc-sticky="end: true;">Stick until content end.</div>
        </div>
    </div>

### Responsive

It's possible to disable the sticky behavior for different device widths by applying the media option to the attribute and adding the appropriate viewport width. Add a number in pixel, for example `media: 640`, or a breakpoint, for example `media: @m`. The element will be sticky from the specified viewport width and upwards, but not below.

Only be sticky on viewports larger than 640px.

    <div data-uc-sticky="media: 640">Only be sticky on viewports larger than 640px.</div>

Resize the screen to see it in action.

### Options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon.

Option | Value | Default | Description
--- | --- | --- | ---
`position` | `top` `bottom` | `top` | The position the element should be stuck to.
`Start` | Length, CSS Selector | `0` | Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the element's top border and viewport's top border intersect. A CSS Selector will set start to the selected element's bottom border and the element's top border.
`End` | Length, CSS Selector, Boolean | `false` | End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. A value of `0` means that the element's top border and viewport's top border intersect, which would cause the element not to be sticky at all if start is also set to `0`. A CSS Selector will set the end to the selected element's bottom and the element's bottom border. `false` will make the element stick until the end of the page. `true` selects the parent element.
`offset` | Length | `0` | The offset the Sticky should be fixed to. The value can be in vh, % and px. It supports basic mathematics operands + and -.
`overflow-flip` | Boolean | `false` | Flip the Sticky's position option if the element overflows the viewport and disable overflow scrolling.
`animation` | String | `false` | The animation to use when the element becomes sticky.
`cls-active` | String | `uc-active` | The active class.
`cls-inactive` | String | `''` | The inactive class.
`show-on-up` | Boolean | `false` | Only show sticky element when scrolling up.
`media` | Number, String | `null` | Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl) or any valid media query (e.g. (min-width: 900px)).
`target-offset` | `false`, Length | `false` | Initially make sure that the Sticky element is not over a referenced element via the page's location hash. The offset defines by how far the element will be above the referenced element. `false` will disable this behavior.

### JavaScript

Learn more about JavaScript components.

#### Initialization

    UniCore.sticky(element, options);

#### Events

The following events will be triggered on elements with this component attached:

Name | Description
--- | ---
`active` | Fires after the element becomes sticky.
`inactive` | Fires after the element is no longer sticky.

## Animated Text

Add effects to your text, titles and sentences.

### Typing Effect

An integrated lightweight Javascript library called Typed.js, It give you the ability to types out sentences and then delete them.

To configure TypedJs, use the `data-uc-typed` attribute and it's options.

### We are a digital studio! agency! creative!

    <h3 class="h4">
        We are a digital
        <span class="text-primary" data-uc-typed="typeSpeed: 80; backSpeed: 50; backDelay: 1500; shuffle: true; loop: true;">
            <span>studio!</span>
            <span>agency!</span>
            <span>creative!</span>
        </span>
    </h3>

### Options

These are the most used options to configure and customize how sentences should be typed.

Option | Value | Default | Description
--- | --- | --- | ---
`typeSpeed` | `number` | `80` | Type speed in milliseconds.
`backSpeed` | `number` | `50` | Backspacing speed in milliseconds.
`backDelay` | `number` | `1500` | Time before backspacing in milliseconds.
`shuffle` | `boolean` | `false` | Shuffle the strings.
`loop` | `boolean` `number` | `false` | Loop strings or set the amount of loops.

You can find out all the options and functions on their documentation.

### SplitText Effect

To configure SplitType.js, use the `data-uc-splitext` attribute and it's options.

Now it's time to take advantage of SplitType and use Anime.js plugin to create good and smooth (60FPS) animations.

### Meet Lexend!

    <h3 class="h1" data-uc-splitext="types: 'chars'" data-anime="translateY: [-80, 0]; translateX: 80; opacity: [0, 1]; easing: easeOutExpo; duration: 350; delay: anime.stagger(80); loop: true; targets: > *;">Meet Lexend!</h3>

### Meet Lexend!

    <h3 class="h1" data-uc-splitext="types: 'words'" data-anime="translateY: [-80, 0]; translateX: 80; opacity: [0, 1]; easing: easeOutExpo; duration: 350; delay: anime.stagger(80); loop: true; direction: alternate; targets: > *;">Meet Lexend!</h3>

### Meet Lexend!

    <h3 class="h1" data-uc-splitext="types: 'words'" data-anime="translateY: [-80, 0]; translateX: 80; opacity: [0, 1]; easing: easeOutExpo; duration: 350; delay: anime.stagger(80); loop: true; targets: > *;">Meet Lexend!</h3>

### Options

These are the most used options to configure and customize your splited text.

Option | Value | Default | Description
--- | --- | --- | ---
`types` | `string` | `"lines, words, chars"` | Comma separated list of types.
`absolute` | `boolean` | `false` | If true, absolute position will be used for split text nodes.
`tagName` | `string` | `"div"` | The HTML tag that will be used for split text nodes.

You can find out all the options and functions on their documentation.

## Scroll Effects

Animate CSS properties depending on the scroll position of the document.

We combined between Anime.js and ScrollMagic to acheive the Onscroll Effect. Now you can easly fire animatin on scroll with a powerful controll for your animations using anime.js options.

### Usage

To apply this component, add the `onscroll:'{trigger-element}'` option to the `data-anime` attribute to apply the onscroll effect.

I'm a onscroll element, say hi :)

    <div class="parent-scene">
        <p data-anime="onscroll: .parent-scene; translateX: 240; opacity: [0, 1]" ></p>
    </div>

### Playground

#### AI Software App

Lorem ipsum dolor sit amet.

Get started

    <div class="scene-selector">
        <h4 data-anime="onscroll: .scene-selector;  onscroll-duration: 75%; translateX: [40, 0]; opacity: [0, 1]; easing: linear; duration: 100;">AI Software App</h4>
        <p data-anime="onscroll: .scene-selector;  onscroll-duration: 75%; translateX: [-40, 0]; opacity: [0, 1]; easing: linear; duration: 100;">Lorem ipsum dolor sit amet.</p>
        <a href="#" class="btn btn-md btn-primary" data-anime="onscroll: .scene-selector;  onscroll-duration: 75%; scale: [0.8, 1]; opacity: [0, 1]; easing: linear; duration: 100;">Get started</a>
    </div>

### Options

We have made some most used built-in options from ScrollMagic default ones.

Option | Value | Default | Description
--- | --- | --- | ---
`onscroll` | `boolean` `string` | `null` `'.css-selector'` | Enable/Disable "on-scroll" effect or enable it with a trigger element which is a selector or DOM object that defines the start of the scene. If undefined the scene will start right at the start of the page (unless an offset is set).
`onscroll-trigger` | `number` | `1` | When animation fires, default: bottom. `0 = top`, `0.5 = middle`, `1 = bottom`
`onscroll-duration` | `number` `string` `function` | `100%` | The duration of the scene.
`onscroll-offset` | `number` | `0` | Offset trigger position by px.
`onscroll-reverse` | `boolean` | `true` | Should the scene reverse, when scrolling up?

You can find out all the options and functions on their documentation.

## Tilt Effects

A lightweight parallax hover tilt effect using Vanilla Tilt library.

### Usage

To create a parallax effect to your elements or objects you need to add `data-uc-tilt` attribute with the available options below.

Add `transform-style: preserve-3d` to your tilt element.

Add a `transform: translateZ(50px)` to your inner elements that have to pop out.

    <div class="panel w-200px h-250px bg-gradient-45 from-indigo to-pink shadow-xl" data-uc-tilt="max: 20; perspective: 350; speed: 150;" style="transform-style: preserve-3d">
        <div class="panel position-absolute top-50 start-50 w-80px h-100px bg-white bg-opacity-70 backdrop-2 shadow-lg" style="transform: translate(-50%, -50%) translateZ(50px)"></div>
    </div>

### Options

These are our built-in options to target, trigger or initiate the animations.

Option | Value | Default | Description
--- | --- | --- | ---
`max` | `number` | `-` | max tilt rotation (degrees).
`perspective` | `number` | `-` | Transform perspective, the lower the more extreme the tilt gets.
`speed` | `number` | `-` | Speed of the enter/exit transition.
`glare` | `boolean` | `false` | If it should have a "glare" effect.
`max-glare` | `number` | `1` | The maximum "glare" opacity (1 = 100%, 0.5 = 50%).
`axis` | `string` | `-` | What axis should be enabled. Can be "x" or "y".

You can find out all the options and functions on their documentation.

## Magic Cursor

A creative, aesthetic Magic Cursor effects for your creative website.

Recently, customizations have begun to appear at the mouse pointer level to add an aesthetic and creative effect to the site.

Of course, we have taken into consediration the addition of this feature as an in-house component to facilitate its use only through `data-uc-cursor`.

Below you will find how it works and all the options and settings you can implement.

By default, the cursor initiated on our framework and good to go just enable it by removing the `disable-cursor` class from `body` tag.

### Usage

Any of these options can be applied to the component attribute. Separate multiple options with a space and also these options are CSS classes or Selectors.

To apply this component, add the `data-uc-cursor` attribute to an element you want the cursor to interact with!

Hover to see how it interact!

    <element data-uc-cursor> ... </element>

By default when you added `data-uc-cursor` attribute the cursor start to interact with that element, but, we made some built-in options to customize it more and below you will find out how!

This component attribute can accept multiple css classes by bootstrap or our exclusive built-in classes as well to customize it as you want.

The main cursor will inherit any classes you add on `data-uc-cursor` attribute.

### Size

You can customize the cursor size by adding `xs`, `sm`, `md`, `lg` classes as an option.

X Small
Small
Medium
Large
X Large

### Color

You can customize the cursor color by adding `text-{color}` and it will inherit that color as it's background.

Primary
Secondary
Success
Danger

    <element data-uc-cursor="text-primary"> ... </element>

### Text

You can add your custom text to the cursor by adding `data-uc-cursor-text` attribute on the same element or any child element and write your custom text just inside the text attribute.

    <!-- On the same element that has "data-uc-cursor" -->
    <element data-uc-cursor="" data-uc-cursor-text="Your text"> ... </element>

    <!-- On the child level works too -->
    <element data-uc-cursor="">
        <element data-uc-cursor-text="Your text"></element>
    </element>

### Icon

You can add your custom icon to the cursor by adding `data-uc-cursor-icon` attribute on the same element or any child element and write your custom icon class just inside the attribute.

Move
View more
Scroll down
Zoom in

    <!-- On the same element that has "data-uc-cursor" -->
    <element data-uc-cursor="" data-uc-cursor-icon="unicon-move icon-4"> ... </element>

    <!-- On the child level works too -->
    <element data-uc-cursor="">
        <element data-uc-cursor-icon="unicon-search icon-3"></element>
    </element>

You can use our integrated icons library Unicons or any icon library that only works via CSS classes, as well as, you can resize icons using our icon size instructions.

### Stick effect

Stick is a great effect for your links, buttons and any UI element, this will add a creative touch to your UI/UX design and here is how it works by adding `data-uc-cursor-stick` attribute on the same element that have main attribute and accepts CSS selectors like `.elem` class, `#elem` ID and `> *` child selectors.

### Let's find out how it works.

You just need to hover on the image and the button below to see it sticked!

Get started

    <!-- ID selector -->
    <element data-uc-cursor="" data-uc-cursor-stick="#element-stick">
        <childElement id="element-stick"> ... </childElement>
    </element>

    <!-- Class selector -->
    <element data-uc-cursor="" data-uc-cursor-stick=".element-stick">
        <childElement class="element-stick"> ... </childElement>
    </element>

    <!-- Child node/tag selector -->
    <element data-uc-cursor="" data-uc-cursor-stick="childElement">
        <childElement> ... </childElement>
    </element>

The Stick effect accpets only one selector to make the cursor stick on it!

### Magnetic effect

Magnetic, the same as Stick effect both are too way great effects to add a creative touch to your UI/UX design and here is how it works by adding `data-uc-magnetic` attribute on the element that you want this effect works on.

    <!-- On element to be magneted -->
    <element data-uc-cursor="opaque">
        <childElement data-uc-magnetic> ... </childElement>
    </element>

    <!-- Only one selector by class to be magneted -->
    <element data-uc-cursor="opaque" data-uc-magnetic=".magnetic-element">
        <childElement class="magnetic-element"> ... </childElement>
        <childElement> ... </childElement>
    </element>

    <!-- Select all the child elements to be magneted -->
    <element data-uc-cursor="opaque" data-uc-magnetic="*">
        <childElement> ... </childElement>
        <childElement> ... </childElement>
        <childElement> ... </childElement>
    </element>

The Magnetic effect accpets one or multi-child selectors to make the cursor magnet on it!

### Playground

As these effects are great now we will combine them to achive a creative fusion and here is how it works.

##### Sticked Social Icons:

    <ul data-uc-cursor="md" data-uc-cursor-stick="*">
        <li data-uc-cursor="text-dark" data-uc-cursor-icon="unicon-logo-github icon-3">
            <a href="#"><i class="icon-3 unicon-logo-github"></i></a>
        </li>
        <li data-uc-cursor="text-blue" data-uc-cursor-icon="unicon-logo-twitter icon-3">
            <a href="#"><i class="icon-3 unicon-logo-twitter"></i></a>
        </li>
        <li data-uc-cursor="text-secondary" data-uc-cursor-icon="unicon-logo-instagram icon-3">
            <a href="#"><i class="icon-3 unicon-logo-instagram"></i></a>
        </li>
    </ul>

##### Creative Link:

Scroll to

    <a  href="#link"
        data-uc-cursor="md text-secondary-200 inverse-text fw-bold"
        data-uc-cursor-text="TOP"
        data-uc-cursor-stick="i"
        data-uc-magnetic="i">
        <span>Scroll to</span>
        <i class="unicon-arrow-up"></i>
    </a>

##### Magnetic Gallery:

    <div class="row g-5 child-cols-3" data-uc-magnetic="**" data-uc-cursor-stick=".stick-element">
        <div>
            <div class="ratio ratio-1x1 rounded-2 overflow-hidden"
                 data-uc-cursor="sm text-white inverse-text shadow-sm"
                 data-uc-cursor-icon="unicon-add icon-3">
                <img src=" ... " alt="Image alt" data-uc-img>
                <div class="stick-element position-absolute top-50 start-50 translate-middle d-inline-flex justify-center items-center">
                    <a class="position-cover" href="#link"></a>
                </div>
            </div>
        </div>
        ...
    </div>

##### Slider + Stick controls:

    <div class="swiper" data-swiper="items: 1; prev: .swiper-nav-prev; next: .swiper-nav-next;">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>

        <!-- Add Pagination -->
        <div class="swiper-pagination" data-uc-cursor="xs text-white inverse-text" data-uc-cursor-stick=">*"></div>

        <!-- Add Arrows -->
        <div class="swiper-nav swiper-nav-prev position-absolute top-0 start-0 bottom-0 z-1 w-1/2" data-uc-cursor="md text-primary" data-uc-cursor-icon="unicon-arrow-left icon-3"></div>
        <div class="swiper-nav swiper-nav-next position-absolute top-0 end-0 bottom-0 z-1 w-1/2" data-uc-cursor="md text-primary" data-uc-cursor-icon="unicon-arrow-right icon-3"></div>
    </div>

### Options

Any of these options or classes can be applied to the component attribute. Separate multiple options or classes with a space.

##### [data-uc-cursor]

Class | Value | Description
--- | --- | ---
`opaque`, `exclusion`, `difference` | Mode | Exclusion or opaque or difference are modes to invert the cursor color. For ex `[data-uc-cursor="difference"]`.
`xs`, `sm`, `md`, `lg`, `xl` | Size | Set a size to your cursor via this classes. For ex `[data-uc-cursor="lg"]`.
`text-{*}` | Color | You can set a background color to your cursor via all Bootstrap text coloring classes. For ex `[data-uc-cursor="text-primary"]`.
`opacity-{*}` | Opacity | You can control the transparency of your cursor via all our extended Bootstrap Opacity classes. For ex `[data-uc-cursor="opacity-25"]`.
`transparent` | Transparent background | You can make the cursor background transparent by using this class. For ex `[data-uc-cursor="transparent"]`.
`inverse-text` | Color Invert | By default, the text color is white and by using this class will invert it to black. This feature works only when you set a `[data-uc-cursor-text]` or `[data-uc-cursor-icon]`. For ex `[data-uc-cursor="inverse-text"]`.
`fw-bold`, `fw-light` | Font Weight | You can control the font-weight of your cursor text via Bootstrap font-weight classes. For ex `[data-uc-cursor="fw-bold"]`.

##### [data-uc-cursor-text]

Option | Value | Description
--- | --- | ---
`Your_Text` | Text/HTML | This data attribute accepts only Text or HTML content. For ex `[data-uc-cursor-text="Hello World!"]`.

##### [data-uc-cursor-icon]

Option | Value | Description
--- | --- | ---
`unicon-{*}` | Icon class | You can set an icon from our Icon Library or set your custom icon class. For ex `[data-uc-cursor-icon="unicon-search"]`.
`icon-{*}` | Icon size | You can customize the icon size using our icon sizing instructions that start from `1` to `6`. For ex `[data-uc-cursor-icon="unicon-search icon-4"]`.

##### [data-uc-cursor-stick]

Option | Value | Description
--- | --- | ---
`.class`, `#id`, `>*` or `tag` | CSS Selector | This data attribute accepts only CSS selectors and can work only for one selected element. For ex `[data-uc-cursor-stick=".stick-element"]` and add `stick-element` class to only one element that you want the cursor to stick on it.

##### [data-uc-magnetic]

Option | Value | Description
--- | --- | ---
`.class`, `#id`, `>*` or `tag` | CSS Selector | This data attribute accepts only CSS selectors and can work for one or multiple selected elements. For ex `[data-uc-magnetic]` or `[data-uc-magnetic=".element"]` and add `element` class to any element(s) that you want the cursor to interact with magnet.

### JavaScript

Learn more about JavaScript components.

#### Cursor Initialization

    const yourCursor = new UCCursor(options);

##### Cursor Options

Option | Value | Default | Description
--- | --- | --- | ---
`container` | string | body | The cursor will fly only on the boundaries of selected container. Can accept multi selectors.
`speed` | number | 0.7 | Cursor speed when following the mouse pointer. Value on seconds.
`visibleTimeout` | number | 300 | The cursor will appear after the timout you set. Value on milliseconds.
`ease` | string | "expo.out" | Cursor easing.
`stickForce` | number | 0 | Cursor stick effect force. Value on seconds.
`stickMagneticForce` | number | 0.3 | Cursor stick and magnetic force. Value on seconds.

#### Magnetic Initialization

    $("[data-uc-magnetic]").each(function () {
        const $elements = this.dataset.ucMagnetic ? $(this).find(this.dataset.ucMagnetic) : $(this);
        $elements.each(function () {
            new UCMagnetic(this, yourCursor);
        });
    });

##### Magnetic Options

Option | Value | Default | Description
--- | --- | --- | ---
`x` | number | 0.4 | Magnetic ratio for x-axis.
`y` | number | 0.4 | Magnetic ratio for y-axis.
`s` | number | 0.3 | Magnetic speed when mouse enter the element.
`rs` | number | 0.5 | Magnetic return speed when mouse leave the element.

## Marquee Text

A creative, aesthetic Marquee text effects for your creative website.

With this component you can create a marquee text effect for your headlines, texts and even paragraphs, It is just a way to display texts in a creative and modern way, in sync with what is trend now, let's see how it works.

### Usage

To apply this effect you need only to add the `data-uc-marquee` attribute to that element. but, you need to have an inner `<div>` element then the element you want effects to work on it.

    <div data-uc-marquee> <!-- The parent element where the attribute should be! -->
        <div> <!-- This is the inner div which is required! -->
            <element> ... </element> <!-- The element that the effect will applied on! -->
        </div>
    </div>

This is an example of how it works and how the html structure should be.

Unicore is a full featured, most advanced, powerfull, flexible and easy-to-customize framework with a solid design system

    <div data-uc-marquee>
        <div>
            <div> Your marquee text </div>
        </div>
    </div>

### Clone

If you have a less content or a small sized content you may have to add a `clone` option to that element data attribute. `true` equal clone one more time but you can set a number as many as clone times you may need.

    <!-- Clone your content one time -->
    <div data-uc-marquee="clone: true;">
        <div>
            <div> Your marquee text </div>
        </div>
    </div>

    <!-- Clone your content 3 times -->
    <div data-uc-marquee="clone: 3;">
        <div>
            <div> Your marquee text </div>
        </div>
    </div>

### Pause on hover

You can give the user the ability to pause the animation when mouse enter the marquee text by adding `hover: true;` option to that element data attribute.

Unicore is a full featured, most advanced, powerfull, flexible and easy-to-customize framework with a solid design system

    <div data-uc-marquee="hover: true;">
        <div>
            <div> Your marquee text </div>
        </div>
    </div>

### Reverse

You can reverse the marquee text direction by adding `reverse: true;` option to that element data attribute.

Unicore is a full featured, most advanced, powerfull, flexible and easy-to-customize framework with a solid design system

    <div data-uc-marquee="reverse: true;">
        <div>
            <div> Your marquee text </div>
        </div>
    </div>

### Speed

You can change the speed to the marquee text by adding `speed: {1 to n};` option to that element data attribute.

Unicore is a full featured, most advanced, powerfull, flexible and easy-to-customize framework with a solid design system

    <div data-uc-marquee="speed: 50;">
        <div>
            <div> Your marquee text </div>
        </div>
    </div>

### Gap

You can set a gap to the marquee text to create a space between the cloned content by adding `gap: {1 to n};` option to that element data attribute.

Unicore is a full featured, most advanced, powerfull, flexible and easy-to-customize framework with a solid design system

    <div data-uc-marquee="clone: 2; gap: 20;">
        <div>
            <div> Your marquee text </div>
        </div>
    </div>

### Options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon.

Option | Value | Default | Description
--- | --- | --- | ---
`clone` | `boolean` `number` | `false` | To clone your content as many times as you set.
`hover` | `boolean` | `false` | Set it to `true` to pause the animation on hover.
`reverse` | `boolean` | `false` | Set it to `true` to reverse the animation.
`speed` | `number` | `30` | Animation speed on `s` (seconds).
`gap` | `number` | `16` | The gap between your cloned content on `px` (pixels).

This content only appears on desktop or tablet screens.