Default Hero Big - Slide 01

The entire content is in the .caption-content. Donec non quam vitae justo mattis vestibulum a nec nisi. Morbi mi felis, ultrices vitae risus consectetur, porta ultrices sapien.

Default Hero Big - Slide 02

The content is split into .caption-content and .caption-outside containers. The title and the paragraph stand inside .caption-content container. Curabitur faucibus magna vel ex semper, in pharetra justo pulvinar. Donec non quam vitae justo mattis vestibulum a nec nisi. Morbi mi felis, ultrices vitae risus consectetur, porta ultrices sapien.

Default Hero Big - Slide 03

The entire content is in the .caption-content.Donec non quam vitae justo mattis vestibulum a nec nisi. Morbi mi felis, ultrices vitae risus consectetur, porta ultrices sapien.

Hero Big

Default Slick Hero Big has sliders with these two containers:

  • .caption-content - for slide content
  • .image-wrapper - for slide background


<div class="sq-slick hero-big">
    <!--Slide 01-->
    <div>
        <div class="caption-content">
           <h1>Default Hero Big - Slide 01</h1>
           <p>The entire content is ... </p>
           <button class="button-sq text-transform-uppercase-sq font-wight-extrabold">Call to action</button>
        </div>
        <div class="image-wrapper">
            <div class="image-inner">
                <img class="image-sq" src="assets/images/hero/hero_big_01.jpg" alt="">
            </div>
        </div>
    </div>
    <!--Slide 02-->
    <div>
        ...
    </div>
    ...
</div>