Copy environment

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 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 class="safety-tags">
    {% for tag in data %}
        {% include '@safety-tag' with { data: tag } %}
    {% endfor %}
</div>

{
  "language": "en-US",
  "data": [
    {
      "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"
    },
    {
      "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"
    }
  ]
}
  • Content: 
    .safety-tags {
    background: #eeeeee;
    padding: 16px;
    border-radius: $border-radius-small;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
  • URL: /components/raw/safety-tags/safety-tags.scss
  • Filesystem Path: src/patterns/components/safety-tags/safety-tags.scss
  • Size: 157 Bytes
  • Handle: @safety-tags--default
  • Filesystem Path: src/patterns/components/safety-tags/safety-tags.twig
  • References (1): @safety-tag
  • Referenced by (1): @product-meta