ヒーローエリア
uc-hero クラスを指定することで、ヒーローエリアを作成することができます。
1. 基本
基本のヒーローエリアを作成することができます。
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. 左寄せ
uc-hero._left クラスを指定することで、内包する要素を左寄せにすることができます。
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. 全画面表示
uc-hero._full クラスを指定することで、画面全体に表示させることができます。
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>