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>

Hero version 1 full image with CTA

Use .card-white within Hero full image 1440x810 size and CTA button.

Hero version 1 full image without CTA

Use .card-white within Hero full image 1440x810 size without CTA button.

Narrow Hero with full image, title & description

Use .narrow class. The image .bc-item and .card has a border radius.
By adding .card-indigo indigo colour will be applied to the card.
This component should have no CTA button.
The h1 has a class .no-underline to remove the underline.

Hero Version 2 half image, rounded corners without CTA

Use #hero-v2 within a container with max width. Hero-v2 has a grid layout. The image .bc-item and .card has a border radius. This component has no CTA button.

Featured article based on hero Version 2

Use #hero-v2 within a container with max width. Additional use of .promoted class gives more flexibility for the minor changes to the Hero-v2. .eyebrow used for the title above the card title. The image .bc-item and .card has a border radius. This component has no CTA button.