Copy environment

Additional Products 

<div class="additional-products">

    <h2>Lisavarustus ja -teenused</h2>

    <div class="additional-products__products">

        <div class="product-card">
            <div class="product-card__img">
                <img src="https://www.ramirent.ee/wp-content/uploads/2022/06/METABO20RFEV19-125RT_01-24-600x399.png" alt="">
            </div>

            <div class="product-card__content-wrap">
                <h3 class="product-card__title">Lisaaku võimsusega 24 V - 225 Ah (C20)</h3>

                <div class="product-card__button">

                    <button type="button" class="button">
                        <span class="button__inner">
                            <span class="button__text">Lisa rendikorvi</span>
                        </span>
                    </button>
                </div>

            </div>
        </div>

        <div class="product-card">
            <div class="product-card__img">
                <img src="https://www.ramirent.ee/wp-content/uploads/2022/06/METABO20RFEV19-125RT_01-24-600x399.png" alt="">
            </div>

            <div class="product-card__content-wrap">
                <h3 class="product-card__title">Lisaaku võimsusega 24 V - 225 Ah (C20)</h3>

                <div class="product-card__button">

                    <button type="button" class="button">
                        <span class="button__inner">
                            <span class="button__text">Lisa rendikorvi</span>
                        </span>
                    </button>
                </div>

            </div>
        </div>

        <div class="product-card">
            <div class="product-card__img">
                <img src="https://www.ramirent.ee/wp-content/uploads/2022/06/METABO20RFEV19-125RT_01-24-600x399.png" alt="">
            </div>

            <div class="product-card__content-wrap">
                <h3 class="product-card__title">Lisaaku võimsusega 24 V - 225 Ah (C20)</h3>

                <div class="product-card__button">

                    <button type="button" class="button">
                        <span class="button__inner">
                            <span class="button__text">Lisa rendikorvi</span>
                        </span>
                    </button>
                </div>

            </div>
        </div>

        <div class="product-card">
            <div class="product-card__img">
                <img src="https://www.ramirent.ee/wp-content/uploads/2022/06/METABO20RFEV19-125RT_01-24-600x399.png" alt="">
            </div>

            <div class="product-card__content-wrap">
                <h3 class="product-card__title">Lisaaku võimsusega 24 V - 225 Ah (C20)</h3>

                <div class="product-card__button">

                    <button type="button" class="button">
                        <span class="button__inner">
                            <span class="button__text">Lisa rendikorvi</span>
                        </span>
                    </button>
                </div>

            </div>
        </div>

        <div class="product-card">
            <div class="product-card__img">
                <img src="https://www.ramirent.ee/wp-content/uploads/2022/06/METABO20RFEV19-125RT_01-24-600x399.png" alt="">
            </div>

            <div class="product-card__content-wrap">
                <h3 class="product-card__title">Lisaaku võimsusega 24 V - 225 Ah (C20)</h3>

                <div class="product-card__button">

                    <button type="button" class="button">
                        <span class="button__inner">
                            <span class="button__text">Lisa rendikorvi</span>
                        </span>
                    </button>
                </div>

            </div>
        </div>

    </div>

</div>
 
<div class="additional-products">

    <h2>{{ data.heading }}</h2>

    <div class="additional-products__products">
        {% for item in data.items %}

            {% include '@product-card' with { data: item } %}

        {% endfor %}
    </div>

</div>

{
  "language": "en-US",
  "data": {
    "items": [
      {
        "imgSrc": "https://www.ramirent.ee/wp-content/uploads/2022/06/METABO20RFEV19-125RT_01-24-600x399.png",
        "title": "Lisaaku võimsusega 24 V - 225 Ah (C20)",
        "button": {
          "text": "Lisa rendikorvi"
        }
      },
      {
        "imgSrc": "https://www.ramirent.ee/wp-content/uploads/2022/06/METABO20RFEV19-125RT_01-24-600x399.png",
        "title": "Lisaaku võimsusega 24 V - 225 Ah (C20)",
        "button": {
          "text": "Lisa rendikorvi"
        }
      },
      {
        "imgSrc": "https://www.ramirent.ee/wp-content/uploads/2022/06/METABO20RFEV19-125RT_01-24-600x399.png",
        "title": "Lisaaku võimsusega 24 V - 225 Ah (C20)",
        "button": {
          "text": "Lisa rendikorvi"
        }
      },
      {
        "imgSrc": "https://www.ramirent.ee/wp-content/uploads/2022/06/METABO20RFEV19-125RT_01-24-600x399.png",
        "title": "Lisaaku võimsusega 24 V - 225 Ah (C20)",
        "button": {
          "text": "Lisa rendikorvi"
        }
      },
      {
        "imgSrc": "https://www.ramirent.ee/wp-content/uploads/2022/06/METABO20RFEV19-125RT_01-24-600x399.png",
        "title": "Lisaaku võimsusega 24 V - 225 Ah (C20)",
        "button": {
          "text": "Lisa rendikorvi"
        }
      }
    ],
    "heading": "Lisavarustus ja -teenused"
  }
}
  • Content: 
    .additional-products {
    margin-top: 24px;

    @include bp(lg-min) {
        margin-top: 56px;
    }

    &:first-child {
        margin-top: 0;
    }
}

.additional-products__heading {
    margin-top: 24px;

    @include bp(lg-min) {
        margin-top: 56px;
    }
}

.additional-products__products {
    display: flex;
    gap: 16px;
    margin-top: 24px;
    flex-wrap: wrap;
}
  • URL: /components/raw/additional-products/additional-products.scss
  • Filesystem Path: src/patterns/modules/additional-products/additional-products.scss
  • Size: 385 Bytes
  • Handle: @additional-products--default
  • Filesystem Path: src/patterns/modules/additional-products/additional-products.twig
  • References (1): @product-card
  • Referenced by (1): @view-single-product