Top 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.
Top 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.
Top 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.
Bottom 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.
Bottom 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.
Bottom 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.
Left Hero Big - Slide 01
The Content stays aligned to left up to tablet resolution.
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.
Left Hero Big - Slide 02
The Content stays aligned to left up to tablet resolution.
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.
Left Hero Big - Slide 03
The Content stays aligned to left up to tablet resolution.
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.
Right Hero Big - Slide 01
The Content stays aligned to right up to tablet resolution.
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.
Right Hero Big - Slide 02
The Content stays aligned to right up to tablet resolution.
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.
Right Hero Big - Slide 03
The Content stays aligned to right up to tablet resolution.
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.
Mixt Position Hero Big - Slide 01
You can combine vertical and horizontal positions. For example .bottom with .left
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.
Mixt Position Hero Big - Slide 02
You can combine vertical and horizontal positions. For example .bottom with .left
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.
Mixt Position Hero Big - Slide 03
You can combine vertical and horizontal positions. For example .bottom with .left
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.
Content Alignment
To align the slide content you can use any of the following classes:
- .top-sq
- .bottom-sq
- .left-sq
- .right-sq
Also you can combine the classes like: .top-sq with .left-sq.
<div class="sq-slick hero-big top-sq">
<!--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>