Hero
You can create a hero area by specifying the uc-hero class.
1. Basic
Create a basic hero area.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, fuga?
Button
<div class="uc-hero">
<div class="uc-hero-bg" style="background-image:url(https://source.unsplash.com/random)"></div>
<div class="uc-hero-title">Lorem ipsum dolor sit amet.</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, fuga?</p>
<div class="uc-btn-unit">
<div class="uc-btn _ghost"><span>Button</span></div>
</div>
</div>
2. Left align element
You can left-justify an element by specifying the _left class.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, fuga?
Button
<div class="uc-hero _left">
<div class="uc-hero-bg" style="background-image:url(https://source.unsplash.com/random)"></div>
<div class="uc-hero-title">Lorem ipsum dolor sit amet.</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, fuga?</p>
<div class="uc-btn-unit">
<div class="uc-btn _ghost"><span>Button</span></div>
</div>
</div>
3. Display on the whole screen
By specifying the _full class, you can display the entire screen.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, fuga?
Button
<div class="uc-hero _full">
<div class="uc-hero-bg" style="background-image:url(https://source.unsplash.com/random)"></div>
<div class="uc-hero-title">Lorem ipsum dolor sit amet.</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, fuga?</p>
<div class="uc-btn-unit">
<div class="uc-btn _ghost"><span>Button</span></div>
</div>
</div>