Content elements

<div class="grid grid-cols-1 lg:grid-cols-2">
          <div class="content-block bg-white">
            <div class="content-block__image" style="background-image: url(http://placehold.it/512x512);"></div>
            <div class="content-block__content content-block__content--dark content-block__content--arrow">
              <span class="subheadline subheadline--small mb-2">Subheadline</span>
              <h3 class="content-block__title mb-3">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
              <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>
          <div class="content-block bg-gray-dark">
            <div class="content-block__image" style="background-image: url(http://placehold.it/512x512);"></div>
            <div class="content-block__content content-block__content--light content-block__content--arrow">
              <span class="subheadline subheadline--small mb-2">Subheadline</span>
              <h3 class="content-block__title mb-3">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
              <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>
        </div>

<div class="grid grid-cols-1 lg:grid-cols-3 lg:gap-3 my-5">
          <div class="content-icon-block">
            <img class="content-icon-block__icon" src="https://materials.raute.com/pub/system/web/static/images/icons/light-bulb.svg" alt="Light bulb icon">
            <span class="subheadline subheadline--primary mb-2">Subheadline</span>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</p>
            <a href="#" class="btn btn--text-primary btn--icon mt-2"><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="content-icon-block">
            <img class="content-icon-block__icon" src="https://materials.raute.com/pub/system/web/static/images/icons/light-bulb.svg" alt="Light bulb icon">
            <span class="subheadline subheadline--primary mb-2">Subheadline</span>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</p>
            <a href="#" class="btn btn--text-primary btn--icon mt-2"><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="content-icon-block">
            <img class="content-icon-block__icon" src="https://materials.raute.com/pub/system/web/static/images/icons/light-bulb.svg" alt="Light bulb icon">
            <span class="subheadline subheadline--primary mb-2">Subheadline</span>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</p>
            <a href="#" class="btn btn--text-primary btn--icon mt-2"><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="content-icon-block">
            <span class="divider"></span>
            <span class="subheadline subheadline--primary mb-2">Subheadline</span>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</p>
            <a href="#" class="btn btn--text-primary btn--icon mt-2"><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>

<div class="wide-content-block wide-content-block__primary mt-4">
          <div class="wide-content-block__content">
            <h2>Raute supplies a complete range of machinery, systems and technology for the production of plywood and veneer</h2>
          </div>
          <div class="wide-content-block__image" style="background-image: url(http://placehold.it/768x768);"></div>
        </div>

<div class="wide-content-block wide-content-block__light mt-4">
          <div class="wide-content-block__content">
            <h2>Together we will reach world-class efficiency</h2>
            <p>Media and text block content lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</p>
            <a href="#" class="btn btn--primary btn--icon mt-1"><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="wide-content-block__image" style="background-image: url(http://placehold.it/768x768);"></div>
        </div>

<div class="wide-content-block wide-content-block__gray-dark mt-4">
          <div class="wide-content-block__image" style="background-image: url(http://placehold.it/768x768);"></div>
          <div class="wide-content-block__content">
            <h2>Together we will reach world-class efficiency</h2>
            <p>Media and text block content lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</p>
            <a href="#" class="btn btn--primary btn--icon mt-1"><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>

<div class="wide-content-block wide-content-block__gray-dark mt-4">
          <div class="wide-content-block__image" style="background-image: url(http://placehold.it/768x768);"></div>
          <div class="wide-content-block__content">
            <h2>Client's name</h2>
            <blockquote class="blockquote--light">
              <p>Media and text block content lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</p>
            </blockquote>
            <a href="#" class="btn btn--primary btn--icon mt-1"><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>

<div class="wide-content-block wide-content-block__gray-light mt-4">
          <div class="wide-content-block__image" style="background-image: url(http://placehold.it/768x768);">
            <div class="wide-content-block__tag post-tag mt-4">Featured</div>
          </div>
          <div class="wide-content-block__content">
            <h2>Together we will reach world-class efficiency</h2>
            <p>Media and text block content lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</p>
            <a href="#" class="btn btn--primary btn--icon mt-1"><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>

<div class="wide-content-bg-block mt-4 dimmed" style="background-image: url(http://placehold.it/768x768);">
        <div class="wide-content-bg-block__content dimmed__content">
          <h2>Read the full story</h2>
          <p>Download PDF and read more detailed article of our solutions for (Client’s name)’s challenges</p>
          <a href="#" class="btn btn--primary btn--icon mt-1"><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>

<div class="xl:container px-2 mx-auto grid lg:grid-cols-12 gap-5 items-center">
        <div class="col-span-8 grid grid-cols-12">
          <h2 class="col-span-3">Lines</h2>
          <div class="col-span-9">
            <p>
              <b>About lines</b> lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, consequatur. Temporibus molestiae repudiandae mollitia impedit, quasi eos ipsa suscipit eaque, aliquam incidunt molestias excepturi ipsam rem! Ab facilis rem culpa.
            </p>
          </div>
        </div>
        <div class="col-span-4">
          <div class="image-overflow-cards__background col-span-4">
            <div class="image-overflow-cards__image" style="background-image: url(http://placehold.it/128x128/000);"></div>
          </div>
        </div>
      </div>

<div class="xl:container px-2 mx-auto mt-5">
        <div class="grid lg:grid-cols-12 lg:gap-5">
          <div class="lg:col-span-8">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, sit ad ipsa molestiae accusamus sequi explicabo odit voluptatibus. Tempore eius autem illum? Neque esse officia beatae harum fugiat at voluptate.
          </div>
          <div class="lg:col-span-4 bg-gray-light p-3">
            <h3>Box title</h3>
            <p>Box content here</p>
            <a href="#" class="btn btn--text-primary 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>
      </div>

<div class="px-2 mx-auto mt-5 blogArticle-author">
        <div class="grid grid-cols-2 items-center justify-center">
          <div class="blogArticle-author__date grid grid-flow-col justify-center items-center gap-2">
            <i class="icon icon--clock "><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-clock" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-clock"></use>
</svg></i>
            <span>11.2.2021</span>
          </div>
          <div class="blogArticle-author__person grid grid-flow-col justify-center items-center gap-2">
            <img src="http://placehold.it/100x100" alt="">
            <span class="uppercase">John Doe</span>
          </div>
        </div>
      </div>