Storybook

⟵ Go back

Hero

Hero with title, (optional) text and video

Sika Schweiz AG

Building Trust
<div class="cmp-font--klavika">
  <div class="cmp-hero cmp-hero--darkbg cmp-hero--parallax cmp-hero--video">
    <div class="cmp-hero__background">
      <picture>
        <img src="../images/hero-skyline-2.jpg">
      </picture>
    </div>
    <div class="cmp-video">
      <video playsinline="" autoplay="autoplay" muted="muted" loop="loop">
        <source src="https://sika.scene7.com/is/content/sika/glo-skyline-loop" type="video/mp4">
      </video>
    </div>

    <div class="cmp-hero__content cmp-hero__content--video">
      <div class="cmp-hero__content--wrapper">
        <div class="cmp-hero__content--wrapper--dark">
          <h1 class="cmp-display">Sika Schweiz AG</h1>
          <h5 class="cmp-font--regular">Building Trust</h5>
        </div>
      </div>
    </div>
  </div>
</div>

Hero with title and (optional) text in dark background

Sika Industry USA

Sika Industry is Technology Leader for Industrial Adhesives, Sealants, Acoustic, Reinforcement, Tooling, and Composite Solutions. Innovation for the World around you.
<div class="cmp-font--klavika">
  <div class="cmp-hero cmp-hero--darkbg ">
    <div class="cmp-hero__background">
      <picture>
        <img src="../images/hero-skyline-2.jpg">
      </picture>
    </div>
    <div class="cmp-hero__content">
      <div class="cmp-hero__content--wrapper">
        <div class="cmp-hero__content--wrapper--dark">
          <h1 class="cmp-display">Sika Industry USA</h1>
          <h5 class="cmp-font--regular">Sika Industry is Technology Leader for Industrial Adhesives, Sealants, Acoustic, Reinforcement, Tooling, and Composite Solutions.  Innovation for the World around you.</h5>
        </div>
      </div>
    </div>
  </div>
</div>

Hero with title and (optional) text in light background

Building Trust
Every Day

Protecting the past
Building the present
Innovating for the future
<div class="cmp-font--klavika">
  <div class="cmp-hero cmp-hero--darkbg">
    <div class="cmp-hero__background">
      <picture>
        <img src="../images/hero-skyline-2.jpg">
      </picture>
    </div>
    <div class="cmp-hero__content cmp-hero__content--video">
      <div class="cmp-hero__content--wrapper">
        <div class="cmp-hero__content--wrapper--light">
          <h1 class="cmp-display">Building Trust <br>Every Day</h1>
          <h5 class="cmp-font--regular">Protecting the past <br>Building the present <br>Innovating for the future</h5>
        </div>
      </div>
    </div>
  </div>
</div>

Hero with title, (optional) text and (optional) action buttons in light background

Building Trust Every Day

Sika Industry is Technology Leader for Industrial Adhesives, Sealants, Acoustic, Reinforcement, Tooling, and Composite Solutions. Innovation for the World around you.
<div class="cmp-font--klavika">
  <div class="cmp-hero cmp-hero--darkbg">
    <div class="cmp-hero__background">
      <picture>
        <img src="../images/hero-skyline-2.jpg">
      </picture>
    </div>
    <div class="cmp-hero__content cmp-hero__content--video">
      <div class="cmp-hero__content--wrapper">
        <div class="cmp-hero__content--wrapper--light">
          <h1 class="cmp-display">Building Trust Every Day</h1>
          <h5 class="cmp-font--regular">Sika Industry is Technology Leader for Industrial Adhesives, Sealants, Acoustic, Reinforcement, Tooling, and Composite Solutions.  Innovation for the World around you.</h5>
          <div data-sly-test="${hero.primaryButton}">
            <a href="/" class="cmp-button button primary" type="button" data-sika-link-type="CTA">
                Primary button
            </a>

            <a href="/" class="cmp-button button secondary" type="button data-sika-link-type=" cta"="">
                Secondary Button
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Hero with title, (optional) text and (optional) action buttons in dark background

Building Trust Every Day

Sika Industry is Technology Leader for Industrial Adhesives, Sealants, Acoustic, Reinforcement, Tooling, and Composite Solutions. Innovation for the World around you.
<div class="cmp-font--klavika">
  <div class="cmp-hero cmp-hero--darkbg">
    <div class="cmp-hero__background">
      <picture>
        <img src="../images/hero-skyline-2.jpg">
      </picture>
    </div>
    <div class="cmp-hero__content cmp-hero__content--video">
      <div class="cmp-hero__content--wrapper">
        <div class="cmp-hero__content--wrapper--dark">
          <h1 class="cmp-display">Building Trust Every Day</h1>
          <h5 class="cmp-font--regular">Sika Industry is Technology Leader for Industrial Adhesives, Sealants, Acoustic, Reinforcement, Tooling, and Composite Solutions.  Innovation for the World around you.</h5>
          <div data-sly-test="${hero.primaryButton}">
            <a href="/" class="cmp-button button primary" type="button" data-sika-link-type="CTA">
                Primary button
            </a>

            <a href="/" class="cmp-button button secondary" type="button data-sika-link-type=" cta"="">
                Secondary Button
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>