Raute frontpage
Login

Hero

Hero elements are used as a big banner on top of the page. In Raute's case, it contains the main title of the page.

Preview

Subheading placeholder

Career in Raute

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam

<div class="hero hero--text">
        <div class="hero__content">
          <span class="subheadline mb-2">Subheading placeholder</span>
          <h1 class="hero__title headline divider">Career in Raute</h1>
          <div class="hero__ingress">
            <p class="big">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam</p>
          </div>
        </div>
      </div>
Subheadline

Revolutionary?

You came into the right place! Check our latest innovations that help you to get the most out of your mill and valuable raw materials.

<div class="hero hero--text">
        <div class="hero__content">
          <span class="subheadline mb-2">Subheadline</span>
          <h1 class="hero__title headline headline--secondary divider">Revolutionary?</h1>
          <div class="hero__ingress">
            <p class="big">You came into the right place! Check our latest innovations that help you to get the most out of your mill and valuable raw materials.</p>
          </div>
        </div>
      </div>

Creating value in forest assets

John Doe
<div class="hero dimmed" style="background-image: url(http://placehold.it/1024x1024);">
        <div class="hero__content">
          <time datetime="2021-02-11" class="hero__date">11.2.2021</time>
          <h1 class="hero__title hero__title--white headline">Creating value in forest assets</h1>
          <div class="hero__person">
            <div class="hero__person-image" style="background-image: url(http://placehold.it/128x128);"></div>
            <div class="hero__person-name">John Doe</div>
          </div>
        </div>
      </div>
Subheading placeholder

Career in Raute

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam

Raute as investment 
<div class="hero dimmed mt-3" style="background-image: url(http://placehold.it/1024x1024);">
        <div class="hero__content">
          <span class="subheadline mb-2">Subheading placeholder</span>
          <h1 class="hero__title hero__title--white headline divider">Career in Raute</h1>
          <div class="hero__ingress">
            <p class="big">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam</p>
            <a href="#" class="btn btn--primary btn--icon"><span>Raute as investment</span><i class="icon icon--chevron-right "><svg xmlns="http://www.w3.org/2000/svg" role="presentation">
  <use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use>
</svg></i></a>
          </div>
        </div>
      </div>

Raute policies

<div class="hero hero--light mt-3">
        <div class="hero__content">
          <h1 class="hero__title headline divider">Raute policies</h1>
        </div>
      </div>
Subheading placeholder

Sustainability dolor sit amet, consetetur sadipscing elitr, sed

<div class="hero hero--2-cols mt-3">
          <div class="hero__content hero__content--primary">
            <span class="subheadline mb-2">Subheading placeholder</span>
            <h1 class="hero__title hero__title--white headline">Sustainability dolor sit amet, consetetur sadipscing elitr, sed</h1>
          </div>
          <div class="hero__image" style="background-image: url(http://placehold.it/1028x1028);"></div>
        </div>
Subheading placeholder

Leading technology and service supplier for the lorem ipsum dolor

Call to action 
<div class="hero hero--2-cols mt-3">
          <div class="hero__content hero__content--white">
            <span class="subheadline mb-2">Subheading placeholder</span>
            <h1 class="hero__title headline mb-4">Leading technology and service supplier for the lorem ipsum dolor</h1>
            <a href="#" class="btn btn--primary btn--icon"><span>Call to action</span><i class="icon icon--chevron-right "><svg xmlns="http://www.w3.org/2000/svg" role="presentation">
  <use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use>
</svg></i></a>
          </div>
          <div class="hero__image" style="background-image: url(http://placehold.it/1028x1028);" x-data="{ playVideo: false }">
            <button class="hero__play" x-show="playVideo === false" @click="playVideo = true; $refs.heroVideo.play()"><i class="icon icon--play "><svg xmlns="http://www.w3.org/2000/svg" role="presentation">
  <use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-play" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-play"></use>
</svg></i></button>
            <video controls="" class="hero__video" x-ref="heroVideo" x-show.transition="playVideo" style="display: none;"><source src="https://materials.raute.com/file/dl/i/t3HVCQ/SWZoI4rP8JiNkXK9BnvvRA/Raute-global-expertise.mp4" type="video/mp4"></video>
          </div>
        </div>

Creating value in forest assets

<div class="investors-hero mb-5">
        <div class="xl:container mx-auto">
          <div class="hero hero--2-cols hero--big mt-3">
            <div class="hero__content hero__content--primary hero__content--center">
              <h1 class="hero__title hero__title--white headline mb-4">Creating value in forest assets</h1>
            </div>
            <div class="hero__image" style="background-image: url(http://placehold.it/1028x1028);" x-data="{ playVideo: false }">
              <button class="hero__play" x-show="playVideo === false" @click="playVideo = true; $refs.heroVideo.play()"><i class="icon icon--play "><svg xmlns="http://www.w3.org/2000/svg" role="presentation">
  <use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-play" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-play"></use>
</svg></i> <span>Raute's Year 2019 presented By Tapani Kiiski, President and CEO</span></button>
              <video controls="" class="hero__video" x-ref="heroVideo" x-show.transition="playVideo" style="display: none;"><source src="https://materials.raute.com/file/dl/i/t3HVCQ/SWZoI4rP8JiNkXK9BnvvRA/Raute-global-expertise.mp4" type="video/mp4"></video>
            </div>
          </div>
        </div>
        <div class="hero-links">
          <div class="hero-links__content xl:container mx-auto">
            <ul>
              <li x-data="{ open: false }">
                <button @click="open = !open" class="btn btn--primary btn--icon"><span>Raute as investment</span><i class="icon icon--chevron-right "><svg xmlns="http://www.w3.org/2000/svg" role="presentation">
  <use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use>
</svg></i></button>
                <ul x-show="open" style="display: none;">
                  <li><a href="#">Board of directors</a></li>
                  <li><a href="#">Board of directors</a></li>
                  <li><a href="#">Board of directors</a></li>
                  <li><a href="#">Board of directors</a></li>
                </ul>
              </li>
              <li x-data="{ open: false }">
                <button @click="open = !open" class="btn btn--primary btn--icon"><span>Raute as investment</span><i class="icon icon--chevron-right "><svg xmlns="http://www.w3.org/2000/svg" role="presentation">
  <use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use>
</svg></i></button>
                <ul x-show="open" style="display: none;">
                  <li><a href="#">Board of directors</a></li>
                  <li><a href="#">Board of directors</a></li>
                  <li><a href="#">Board of directors</a></li>
                  <li><a href="#">Board of directors</a></li>
                </ul>
              </li>
              <li x-data="{ open: false }">
                <button @click="open = !open" class="btn btn--primary btn--icon"><span>Raute as investment</span><i class="icon icon--chevron-right "><svg xmlns="http://www.w3.org/2000/svg" role="presentation">
  <use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use>
</svg></i></button>
                <ul x-show="open" style="display: none;">
                  <li><a href="#">Board of directors</a></li>
                  <li><a href="#">Board of directors</a></li>
                  <li><a href="#">Board of directors</a></li>
                  <li><a href="#">Board of directors</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
Latest or featured

Stop manual patching, start upgrading veneer quality

Read more 
<div class="blog-hero">
        <div class="xl:container mx-auto px-2 blog-hero__container grid items-center">
          <div class="blog-hero__content">
            <div class="post-tag">Latest or featured</div>
            <h1 class="divider divider--align-left">Stop manual patching, start upgrading veneer quality</h1>
            <a href="#" class="btn btn--secondary btn--icon"><span>Read more</span><i class="icon icon--chevron-right "><svg xmlns="http://www.w3.org/2000/svg" role="presentation">
  <use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use>
</svg></i></a>
          </div>
          <div class="blog-hero__image" style="background-image: url('http://placehold.it/768x768);"></div>
        </div>
      </div>

Variations

Name Description

Hero / Frontpage

 Use only in raute.com frontpage.

Hero / Text

 Use in landing pages / level 2

Hero / Image

 Use in subpages
Elements Cards
© Raute Corporation 2021