Hero
Hero component is the lead component on any page, appearing directly beneath the header component and above any
sense
of traditional ‘Introductory’ copy.
The Hero component is a composition with .card component and CTA button.
#hero presents full image within the hero component.
<section id="hero">
<!-- Lead media -->
<figure class="bc-item">
<img class="bc-landscape" src="../img/dummy/1440x810-img-1.jpg" width="950" height="534"
alt="Lorem ipsum dolor" title="Solor dolor misundos">
</figure>
<div class="container">
<div class="row">
<!-- Brand introduction -->
<aside class="card card-white">
<div class="col-xs-12">
<h1 class="card-title">Product title</h1>
<!-- .bc-body-text -->
<div class="card-body">
<p>Power up your English skills this summer with English Online.
Get 20% off our plans.</p>
<div class="bc-cta">
<a href="#" target="_blank" class="btn btn-primary">
Call to action one
<svg class="bc-svg bc-svg-popup" aria-label="Opens in a new tab or window">
<use xlink:href="#icon-popup"></use>
</svg>
</a>
</div>
</div>
</div>
</aside>
</div>
</div>
</section>
