Copy environment

Single Detail

<div class="h-container">

    <button type="button" class="button button--secondary button--icon-left">
        <span class="button__inner">
            <svg class="icon  button__icon" focusable="false">
                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#arrow-left"></use>
            </svg>
            <span class="button__text">Akukäärtõstuk 8M kitsas vaatesse</span>
        </span>
    </button>
    <div class="divider divider--invisible divider--xs"></div>
    <h1 class="h-hidden-md h-hidden-lg">HAULOTTE COMPACT 10N</h1>
    <div class="divider divider--invisible divider--xs"></div>
    <div class="grid grid--gutter-large">
        <div class="grid__col grid__col--md-3 grid__col--last-md">
            <div class="grid">
                <div class="grid__col">

                    <figure class="image image--fluid image--full ">
                        <a class="image__link" href="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg" data-fancybox="gallery-123" data-caption="This is a caption" data-thumb="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg">

                            <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg" data-sizes="auto" alt="image title" class="image__img lazyload">

                        </a>
                    </figure>
                </div>
                <div class="grid__col">

                    <figure class="image image--fluid image--full ">
                        <a class="image__link" href="//via.placeholder.com/1080x1920" data-fancybox="gallery-123" data-thumb="//via.placeholder.com/75x75">

                            <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg" data-sizes="auto" alt="image title" class="image__img lazyload">

                        </a>
                    </figure>
                </div>
                <div class="grid__col">

                    <figure class="image image--fluid image--full ">
                        <a class="image__link" href="//via.placeholder.com/1920x1080" data-fancybox="gallery-123" data-caption="This is a caption" data-thumb="//via.placeholder.com/75x75">

                            <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg" data-sizes="auto" alt="image title" class="image__img lazyload">

                        </a>
                    </figure>
                </div>
                <div class="grid__col">

                    <figure class="image image--fluid image--full ">
                        <a class="image__link" href="//via.placeholder.com/1080x1920" data-fancybox="gallery-123" data-thumb="//via.placeholder.com/75x75">

                            <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg" data-sizes="auto" alt="image title" class="image__img lazyload">

                        </a>
                    </figure>
                </div>
                <div class="grid__col">

                    <figure class="image image--fluid image--full ">
                        <a class="image__link" href="//via.placeholder.com/1080x1920" data-fancybox="gallery-123" data-thumb="//via.placeholder.com/75x75">

                            <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg" data-sizes="auto" alt="image title" class="image__img lazyload">

                        </a>
                    </figure>
                </div>
                <div class="grid__col">

                    <figure class="image image--fluid image--full ">
                        <a class="image__link" href="//via.placeholder.com/1080x1920" data-fancybox="gallery-123" data-thumb="//via.placeholder.com/75x200">

                            <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg" data-sizes="auto" alt="image title" class="image__img lazyload">

                        </a>
                    </figure>
                </div>
                <div class="grid__col">

                    <figure class="image image--fluid image--full ">
                        <a class="image__link" href="https://www.youtube.com/watch?v=z2X2HaTvkl8" data-fancybox="gallery-123" data-thumb="//via.placeholder.com/150x75">

                            <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg" data-sizes="auto" alt="image title" class="image__img lazyload">

                        </a>
                    </figure>
                </div>
            </div>
        </div>
        <div class="grid__col grid__col--md-9">
            <span class="h1">Haulotte compact 10N</span>

            <div class="product-meta js-product-meta product-meta--full-width">
                <p class="product-meta__product-description">
                    Lorem ipsum dolor sit amet, consecteur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniamconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipiscing
                    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamconsectetur
                    adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
                </p>
                <div class="product-meta__category-wrap">
                    <p>Kategooria: <span class="product-meta__category">Akukäärtõstukid</span></p>
                    <p>Tooterühm: <span class="bold">2633320</span></p>
                </div>
                <p>Isikukaitsevahendid ja ohutus:</p>
                <div class="product-meta__safety-tags">
                    <div class="safety-tags">
                        <div class="safety-tag">
                            <div class="safety-tag__image-wrap">
                                <figure class="image  safety-tag__image">

                                    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="https://staging.pim.ramirent.ee//_default_upload_bucket/Ramirent_Pictograms_Safety_Hearing_Protection_2_RGB_1.png" data-sizes="auto" alt="" class="image__img lazyload">

                                </figure>
                            </div>
                            <div class="safety-tag__name">Kõrvatropid/klapid</div>
                        </div>
                        <div class="safety-tag">
                            <div class="safety-tag__image-wrap">
                                <figure class="image  safety-tag__image">

                                    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="https://staging.pim.ramirent.ee//_default_upload_bucket/Ramirent_Pictograms_Safety_Hearing_Protection_2_RGB_1.png" data-sizes="auto" alt="" class="image__img lazyload">

                                </figure>
                            </div>
                            <div class="safety-tag__name">Kõrvatropid/klapid</div>
                        </div>
                        <div class="safety-tag">
                            <div class="safety-tag__image-wrap">
                                <figure class="image  safety-tag__image">

                                    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20280%20155%22%3E%3C%2Fsvg%3E" data-srcset="https://staging.pim.ramirent.ee//_default_upload_bucket/Ramirent_Pictograms_Safety_Hearing_Protection_2_RGB_1.png" data-sizes="auto" alt="" class="image__img lazyload">

                                </figure>
                            </div>
                            <div class="safety-tag__name">Kõrvatropid/klapid</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="divider divider--invisible divider--sm"></div>
            <div class="video">
                <iframe class="video__iframe" src="https://www.youtube.com/embed/FJifhpUjYCc" title="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <div class="divider divider--invisible divider--sm"></div>
            <div class="grid grid--gutter-medium">
                <div class="grid__col">
                    <h2 class="h3">Toote info</h2>
                </div>
                <div class="grid__col">
                    <div class="table  ">
                        <table class="table__table tablesaw" data-tablesaw-sortable>
                            <tbody class="table__body">
                                <tr class="table__row">
                                    <th class="table__item" scope="row">Platvormi kõrgus</th>
                                    <td class="table__item">8,00m</td>
                                </tr>
                                <tr class="table__row">
                                    <th class="table__item" scope="row">Töötamiskõrgus</th>
                                    <td class="table__item">10,00m</td>
                                </tr>
                                <tr class="table__row">
                                    <th class="table__item" scope="row">Tõstevõime</th>
                                    <td class="table__item">350 kg</td>
                                </tr>
                                <tr class="table__row">
                                    <th class="table__item" scope="row">Platvormi pikkus / koospikendusega</th>
                                    <td class="table__item">2,31m / 3,23m</td>
                                </tr>
                                <tr class="table__row">
                                    <th class="table__item" scope="row">Platvormi laius</th>
                                    <td class="table__item">0,81m</td>
                                </tr>
                                <tr class="table__row">
                                    <th class="table__item" scope="row">Laadimistoide</th>
                                    <td class="table__item">230V</td>
                                </tr>
                                <tr class="table__row">
                                    <th class="table__item" scope="row">Aku</th>
                                    <td class="table__item">24V – 225Ah (C20)</td>
                                </tr>
                                <tr class="table__row">
                                    <th class="table__item" scope="row">Vedu</th>
                                    <td class="table__item">2WD</td>
                                </tr>
                                <tr class="table__row">
                                    <th class="table__item" scope="row">Mittemäärivad rehvid</th>
                                    <td class="table__item">Jah</td>
                                </tr>
                                <tr class="table__row">
                                    <th class="table__item" scope="row">Tugijalad</th>
                                    <td class="table__item">Ei</td>
                                </tr>
                                <tr class="table__row">
                                    <th class="table__item" scope="row">Transpordi pikkus</th>
                                    <td class="table__item">2,31m</td>
                                </tr>
                                <tr class="table__row">
                                    <th class="table__item" scope="row">Transpordi laius</th>
                                    <td class="table__item">0,81m</td>
                                </tr>
                                <tr class="table__row">
                                    <th class="table__item" scope="row">Transpordi kõrgus</th>
                                    <td class="table__item">1,32m</td>
                                </tr>
                                <tr class="table__row">
                                    <th class="table__item" scope="row">Pikkus</th>
                                    <td class="table__item">3,14m</td>
                                </tr>
                                <tr class="table__row">
                                    <th class="table__item" scope="row">Laius</th>
                                    <td class="table__item">0,81m</td>
                                </tr>
                                <tr class="table__row">
                                    <th class="table__item" scope="row">Kaal</th>
                                    <td class="table__item">2 190kg</td>
                                </tr>
                                <tr class="table__row">
                                    <th class="table__item" scope="row">Juhend</th>
                                    <td class="table__item"><span class="text-truncate"><a href="#">HAULOTTE COMPACT 8,8W,10,10N,12 2007 e04.07 Instr LV.pdf</a></span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="divider divider--invisible divider--sm"></div>
            <div class="grid grid--gutter-medium">
                <div class="grid__col">
                    <h2 class="h3">Juhendid</h2>
                </div>
                <div class="grid__col">
                    <div class="table  ">
                        <table class="table__table tablesaw" data-tablesaw-sortable>
                            <tbody class="table__body">
                                <tr class="table__row">
                                    <th class="table__item" scope="row">Juhend EE</th>
                                    <td class="table__item"><span class="text-truncate"><a href="#">HAULOTTE COMPACT 8,8W,10,10N,12 2007 e04.07 Instr EE.pdf</a></span></td>
                                </tr>
                                <tr class="table__row">
                                    <th class="table__item" scope="row">Juhend LV</th>
                                    <td class="table__item"><span class="text-truncate"><a href="#">HAULOTTE COMPACT 8,8W,10,10N,12 2007 e04.07 Instr LV.pdf</a></span></td>
                                </tr>
                                <tr class="table__row">
                                    <th class="table__item" scope="row">Juhend ENG</th>
                                    <td class="table__item"><span class="text-truncate"><a href="#">HAULOTTE COMPACT 8,8W,10,10N,12 2007 e04.07 Instr ENG.pdf</a></span></td>
                                </tr>
                                <tr class="table__row">
                                    <th class="table__item" scope="row">Juhend LT</th>
                                    <td class="table__item"><span class="text-truncate"><a href="#">HAULOTTE COMPACT 8,8W,10,10N,12 2007 e04.07 Instr LT.pdf</a></span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="h-container">
    {% include '@button' with {
        class: '',
        modifier: 'button--secondary',
        data: {
            icon: 'arrow-left',
            iconPosition: 'left',
            text: 'Akukäärtõstuk 8M kitsas vaatesse',
        },
    } %}
    {% include '@divider' with { modifier: 'divider--invisible divider--xs'} %}
    <h1 class="h-hidden-md h-hidden-lg">HAULOTTE COMPACT 10N</h1>
    {% include '@divider' with { modifier: 'divider--invisible divider--xs'} %}
    <div class="grid grid--gutter-large">
        <div class="grid__col grid__col--md-3 grid__col--last-md">
            {% include '@gallery' with { class: '', modifier: '', data: data.gallery } %}
        </div>
        <div class="grid__col grid__col--md-9">
            <span class="h1">Haulotte compact 10N</span>
            {% include '@product-meta' with { class: '', modifier: 'product-meta--full-width' } %}
            {% include '@divider' with { modifier: 'divider--invisible divider--sm'} %}
            {% include '@video' with { data: data.video } %}
            {% include '@divider' with { modifier: 'divider--invisible divider--sm'} %}
            <div class="grid grid--gutter-medium">
                <div class="grid__col">
                    <h2 class="h3">Toote info</h2>
                </div>
                <div class="grid__col">
                    {% include '@table' with {
                        data: data.table,
                        class: '',
                        modifier: '',
                    } %}
                </div>
            </div>
            {% include '@divider' with { modifier: 'divider--invisible divider--sm'} %}
            <div class="grid grid--gutter-medium">
                <div class="grid__col">
                    <h2 class="h3">Juhendid</h2>
                </div>
                <div class="grid__col">
                    {% include '@table' with {
                        data: data.instructions,
                        class: '',
                        modifier: '',
                    } %}
                </div>
            </div>
        </div>
    </div>
</div>
{
  "language": "en-US",
  "data": {
    "video": {
      "src": "https://www.youtube.com/embed/FJifhpUjYCc"
    },
    "gallery": {
      "galleryId": "gallery-123",
      "items": [
        {
          "caption": "This is a caption",
          "image": {
            "src": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg",
            "alt": "image title",
            "url": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg",
            "srcset": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg",
            "sources": null
          }
        },
        {
          "image": {
            "src": "//via.placeholder.com/75x75",
            "alt": "image title",
            "url": "//via.placeholder.com/1080x1920",
            "srcset": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg",
            "sources": null
          }
        },
        {
          "image": {
            "src": "//via.placeholder.com/75x75",
            "alt": "image title",
            "url": "//via.placeholder.com/1920x1080",
            "srcset": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg",
            "sources": null
          },
          "caption": "This is a caption"
        },
        {
          "image": {
            "src": "//via.placeholder.com/75x75",
            "alt": "image title",
            "url": "//via.placeholder.com/1080x1920",
            "srcset": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg",
            "sources": null
          }
        },
        {
          "image": {
            "src": "//via.placeholder.com/75x75",
            "alt": "image title",
            "url": "//via.placeholder.com/1080x1920",
            "srcset": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg",
            "sources": null
          }
        },
        {
          "image": {
            "src": "//via.placeholder.com/75x200",
            "alt": "image title",
            "url": "//via.placeholder.com/1080x1920",
            "srcset": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg",
            "sources": null
          }
        },
        {
          "image": {
            "src": "//via.placeholder.com/150x75",
            "alt": "image title",
            "url": "https://www.youtube.com/watch?v=z2X2HaTvkl8",
            "srcset": "https://www.ramirent.ee/wp-content/uploads/2022/08/KAESER20M82-600x338.jpg",
            "sources": null
          }
        }
      ]
    },
    "safetyTags": [
      {
        "image": {
          "srcset": "https://staging.pim.ramirent.ee//_default_upload_bucket/Ramirent_Pictograms_Safety_Hearing_Protection_2_RGB_1.png",
          "sources": null
        },
        "name": "Kõrvatropid/klapid"
      },
      {
        "image": {
          "srcset": "https://staging.pim.ramirent.ee//_default_upload_bucket/Ramirent_Pictograms_Safety_Hearing_Protection_2_RGB_1.png",
          "sources": null
        },
        "name": "Kõrvatropid/klapid"
      },
      {
        "image": {
          "srcset": "https://staging.pim.ramirent.ee//_default_upload_bucket/Ramirent_Pictograms_Safety_Hearing_Protection_2_RGB_1.png",
          "sources": null
        },
        "name": "Kõrvatropid/klapid"
      }
    ],
    "table": {
      "rows": [
        {
          "cells": [
            {
              "header": true,
              "content": "Platvormi kõrgus"
            },
            {
              "content": "8,00m"
            }
          ]
        },
        {
          "cells": [
            {
              "header": true,
              "content": "Töötamiskõrgus"
            },
            {
              "content": "10,00m"
            }
          ]
        },
        {
          "cells": [
            {
              "header": true,
              "content": "Tõstevõime"
            },
            {
              "content": "350 kg"
            }
          ]
        },
        {
          "cells": [
            {
              "header": true,
              "content": "Platvormi pikkus / koospikendusega"
            },
            {
              "content": "2,31m / 3,23m"
            }
          ]
        },
        {
          "cells": [
            {
              "header": true,
              "content": "Platvormi laius"
            },
            {
              "content": "0,81m"
            }
          ]
        },
        {
          "cells": [
            {
              "header": true,
              "content": "Laadimistoide"
            },
            {
              "content": "230V"
            }
          ]
        },
        {
          "cells": [
            {
              "header": true,
              "content": "Aku"
            },
            {
              "content": "24V – 225Ah (C20)"
            }
          ]
        },
        {
          "cells": [
            {
              "header": true,
              "content": "Vedu"
            },
            {
              "content": "2WD"
            }
          ]
        },
        {
          "cells": [
            {
              "header": true,
              "content": "Mittemäärivad rehvid"
            },
            {
              "content": "Jah"
            }
          ]
        },
        {
          "cells": [
            {
              "header": true,
              "content": "Tugijalad"
            },
            {
              "content": "Ei"
            }
          ]
        },
        {
          "cells": [
            {
              "header": true,
              "content": "Transpordi pikkus"
            },
            {
              "content": "2,31m"
            }
          ]
        },
        {
          "cells": [
            {
              "header": true,
              "content": "Transpordi laius"
            },
            {
              "content": "0,81m"
            }
          ]
        },
        {
          "cells": [
            {
              "header": true,
              "content": "Transpordi kõrgus"
            },
            {
              "content": "1,32m"
            }
          ]
        },
        {
          "cells": [
            {
              "header": true,
              "content": "Pikkus"
            },
            {
              "content": "3,14m"
            }
          ]
        },
        {
          "cells": [
            {
              "header": true,
              "content": "Laius"
            },
            {
              "content": "0,81m"
            }
          ]
        },
        {
          "cells": [
            {
              "header": true,
              "content": "Kaal"
            },
            {
              "content": "2 190kg"
            }
          ]
        },
        {
          "cells": [
            {
              "header": true,
              "content": "Juhend"
            },
            {
              "content": "<span class=\"text-truncate\"><a href=\"#\">HAULOTTE COMPACT 8,8W,10,10N,12 2007 e04.07 Instr LV.pdf</a></span>"
            }
          ]
        }
      ]
    },
    "instructions": {
      "rows": [
        {
          "cells": [
            {
              "header": true,
              "content": "Juhend EE"
            },
            {
              "content": "<span class=\"text-truncate\"><a href=\"#\">HAULOTTE COMPACT 8,8W,10,10N,12 2007 e04.07 Instr EE.pdf</a></span>"
            }
          ]
        },
        {
          "cells": [
            {
              "header": true,
              "content": "Juhend LV"
            },
            {
              "content": "<span class=\"text-truncate\"><a href=\"#\">HAULOTTE COMPACT 8,8W,10,10N,12 2007 e04.07 Instr LV.pdf</a></span>"
            }
          ]
        },
        {
          "cells": [
            {
              "header": true,
              "content": "Juhend ENG"
            },
            {
              "content": "<span class=\"text-truncate\"><a href=\"#\">HAULOTTE COMPACT 8,8W,10,10N,12 2007 e04.07 Instr ENG.pdf</a></span>"
            }
          ]
        },
        {
          "cells": [
            {
              "header": true,
              "content": "Juhend LT"
            },
            {
              "content": "<span class=\"text-truncate\"><a href=\"#\">HAULOTTE COMPACT 8,8W,10,10N,12 2007 e04.07 Instr LT.pdf</a></span>"
            }
          ]
        }
      ]
    }
  }
}