Components

Banners

Banners include banner image and hero banner.

Banner image

A featured image to be used in the same way as the banner slider when you have only one image.

The banner title is required, however the paragraph of text below the title is not required.

The recommended image size is 2320 x 855 pixels.

<figure class="c-image-content c-image--banner c-image--full-width">
  <a class="c-image-content__link c-image--banner__link" href="#0">
    <img alt="Image" src="/kss-assets/images/placeholder/980x361_01.jpg" class="c-image-content__image c-image--banner__image">
    <div class="c-image--banner__content">
      <span class="c-image--banner__text-wrap">
        <h3 class="c-image--banner__heading">Banner Title</h3>
        <p>Insert additional text content here.</p>
      </span>
    </div>
  </a>
</figure>

Hero banner

The hero banner is used at the top of your page as a promotional section with an image and content. This is used as a promotional section for blogs or news stories.

<section class="c-hero-banner">
  <div class="c-hero-banner__image">
    <img src="/kss-assets/images/placeholder/2000x1075.jpg" alt="Placeholder image">
  </div>
  <div class="c-hero-banner__content">
    <h2 class="c-hero-banner__title"><a class="c-hero-banner__title-link" href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, omnis illo iste ratione.</a></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, omnis illo iste ratione. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, omnis illo iste ratione. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, omnis illo iste ratione.</p>
    <button class="c-hero-banner__button c-btn c-btn--primary">Read more</button>
  </div>
</section>