Icons Awards: Many

Ready

HTML
View
Context
Assets
Notes


        
        <ul class="icons-awards">
      <li class="icons-awards__list-item">
          <button type="button" class="icons-awards__toggle" data-info-tooltip-content="Beheizbar">
              <span class="visually-hidden">Beheizbar</span>
              <span class="image ">
                  <picture>
                      <img src="/example-assets/images/icons/icon1.png" class="image__img icons-awards__image is-loading" alt="Beheizbar" onload="this.classList.remove('is-loading')" />
                  </picture>
              </span>

          </button>
      </li>
      <li class="icons-awards__list-item">
          <button type="button" class="icons-awards__toggle" data-info-tooltip-content="Super soft">
              <span class="visually-hidden">Super soft</span>
              <span class="image ">
                  <picture>
                      <img src="/example-assets/images/icons/icon2.png" class="image__img icons-awards__image is-loading" alt="Super soft" onload="this.classList.remove('is-loading')" />
                  </picture>
              </span>

          </button>
      </li>
      <li class="icons-awards__list-item">
          <button type="button" class="icons-awards__toggle" data-info-tooltip-content="Etwas ganz besonderes">
              <span class="visually-hidden">Etwas ganz besonderes</span>
              <span class="image ">
                  <picture>
                      <img src="/example-assets/images/icons/icon3.png" class="image__img icons-awards__image is-loading" alt="Etwas ganz besonderes" onload="this.classList.remove('is-loading')" />
                  </picture>
              </span>

          </button>
      </li>
      <li class="icons-awards__list-item">
          <button type="button" class="icons-awards__toggle" data-info-tooltip-content="Waterproof">
              <span class="visually-hidden">Waterproof</span>
              <span class="image ">
                  <picture>
                      <img src="/example-assets/images/icons/icon4.png" class="image__img icons-awards__image is-loading" alt="Waterproof" onload="this.classList.remove('is-loading')" />
                  </picture>
              </span>

          </button>
      </li>
      <li class="icons-awards__list-item">
          <button type="button" class="icons-awards__toggle" data-info-tooltip-content="Stretch">
              <span class="visually-hidden">Stretch</span>
              <span class="image ">
                  <picture>
                      <img src="/example-assets/images/icons/icon5.png" class="image__img icons-awards__image is-loading" alt="Stretch" onload="this.classList.remove('is-loading')" />
                  </picture>
              </span>

          </button>
      </li>
      <li class="icons-awards__list-item">
          <button type="button" class="icons-awards__toggle" data-info-tooltip-content="Beheizbar">
              <span class="visually-hidden">Beheizbar</span>
              <span class="image ">
                  <picture>
                      <img src="/example-assets/images/icons/icon1.png" class="image__img icons-awards__image is-loading" alt="Beheizbar" onload="this.classList.remove('is-loading')" />
                  </picture>
              </span>

          </button>
      </li>
      <li class="icons-awards__list-item">
          <button type="button" class="icons-awards__toggle" data-info-tooltip-content="Super soft">
              <span class="visually-hidden">Super soft</span>
              <span class="image ">
                  <picture>
                      <img src="/example-assets/images/icons/icon2.png" class="image__img icons-awards__image is-loading" alt="Super soft" onload="this.classList.remove('is-loading')" />
                  </picture>
              </span>

          </button>
      </li>
      <li class="icons-awards__list-item">
          <button type="button" class="icons-awards__toggle" data-info-tooltip-content="Etwas ganz besonderes">
              <span class="visually-hidden">Etwas ganz besonderes</span>
              <span class="image ">
                  <picture>
                      <img src="/example-assets/images/icons/icon3.png" class="image__img icons-awards__image is-loading" alt="Etwas ganz besonderes" onload="this.classList.remove('is-loading')" />
                  </picture>
              </span>

          </button>
      </li>
      <li class="icons-awards__list-item">
          <button type="button" class="icons-awards__toggle" data-info-tooltip-content="Waterproof">
              <span class="visually-hidden">Waterproof</span>
              <span class="image ">
                  <picture>
                      <img src="/example-assets/images/icons/icon4.png" class="image__img icons-awards__image is-loading" alt="Waterproof" onload="this.classList.remove('is-loading')" />
                  </picture>
              </span>

          </button>
      </li>
      <li class="icons-awards__list-item">
          <button type="button" class="icons-awards__toggle" data-info-tooltip-content="Stretch">
              <span class="visually-hidden">Stretch</span>
              <span class="image ">
                  <picture>
                      <img src="/example-assets/images/icons/icon5.png" class="image__img icons-awards__image is-loading" alt="Stretch" onload="this.classList.remove('is-loading')" />
                  </picture>
              </span>

          </button>
      </li>
      <li class="icons-awards__list-item">
          <button type="button" class="icons-awards__toggle" data-info-tooltip-content="Beheizbar">
              <span class="visually-hidden">Beheizbar</span>
              <span class="image ">
                  <picture>
                      <img src="/example-assets/images/icons/icon1.png" class="image__img icons-awards__image is-loading" alt="Beheizbar" onload="this.classList.remove('is-loading')" />
                  </picture>
              </span>

          </button>
      </li>
      <li class="icons-awards__list-item">
          <button type="button" class="icons-awards__toggle" data-info-tooltip-content="Super soft">
              <span class="visually-hidden">Super soft</span>
              <span class="image ">
                  <picture>
                      <img src="/example-assets/images/icons/icon2.png" class="image__img icons-awards__image is-loading" alt="Super soft" onload="this.classList.remove('is-loading')" />
                  </picture>
              </span>

          </button>
      </li>
      <li class="icons-awards__list-item">
          <button type="button" class="icons-awards__toggle" data-info-tooltip-content="Etwas ganz besonderes">
              <span class="visually-hidden">Etwas ganz besonderes</span>
              <span class="image ">
                  <picture>
                      <img src="/example-assets/images/icons/icon3.png" class="image__img icons-awards__image is-loading" alt="Etwas ganz besonderes" onload="this.classList.remove('is-loading')" />
                  </picture>
              </span>

          </button>
      </li>
      <li class="icons-awards__list-item">
          <button type="button" class="icons-awards__toggle" data-info-tooltip-content="Waterproof">
              <span class="visually-hidden">Waterproof</span>
              <span class="image ">
                  <picture>
                      <img src="/example-assets/images/icons/icon4.png" class="image__img icons-awards__image is-loading" alt="Waterproof" onload="this.classList.remove('is-loading')" />
                  </picture>
              </span>

          </button>
      </li>
      <li class="icons-awards__list-item">
          <button type="button" class="icons-awards__toggle" data-info-tooltip-content="Stretch">
              <span class="visually-hidden">Stretch</span>
              <span class="image ">
                  <picture>
                      <img src="/example-assets/images/icons/icon5.png" class="image__img icons-awards__image is-loading" alt="Stretch" onload="this.classList.remove('is-loading')" />
                  </picture>
              </span>

          </button>
      </li>
      <li class="icons-awards__list-item">
          <button type="button" class="icons-awards__toggle" data-info-tooltip-content="Award">
              <span class="visually-hidden">Award</span>
              <span class="image ">
                  <picture>
                      <img src="/example-assets/images/awards/award1.png" class="image__img icons-awards__image is-loading" alt="Award 1" onload="this.classList.remove('is-loading')" />
                  </picture>
              </span>

          </button>
      </li>
      <li class="icons-awards__list-item">
          <button type="button" class="icons-awards__toggle" data-info-tooltip-content="Award">
              <span class="visually-hidden">Award</span>
              <span class="image ">
                  <picture>
                      <img src="/example-assets/images/awards/award2.png" class="image__img icons-awards__image is-loading" alt="Award 2" onload="this.classList.remove('is-loading')" />
                  </picture>
              </span>

          </button>
      </li>
      <li class="icons-awards__list-item">
          <button type="button" class="icons-awards__toggle" data-info-tooltip-content="Award">
              <span class="visually-hidden">Award</span>
              <span class="image ">
                  <picture>
                      <img src="/example-assets/images/awards/award1.png" class="image__img icons-awards__image is-loading" alt="Award 1" onload="this.classList.remove('is-loading')" />
                  </picture>
              </span>

          </button>
      </li>
      <li class="icons-awards__list-item">
          <button type="button" class="icons-awards__toggle" data-info-tooltip-content="Award">
              <span class="visually-hidden">Award</span>
              <span class="image ">
                  <picture>
                      <img src="/example-assets/images/awards/award2.png" class="image__img icons-awards__image is-loading" alt="Award 2" onload="this.classList.remove('is-loading')" />
                  </picture>
              </span>

          </button>
      </li>
      <li class="icons-awards__list-item">
          <button type="button" class="icons-awards__toggle" data-info-tooltip-content="Award">
              <span class="visually-hidden">Award</span>
              <span class="image ">
                  <picture>
                      <img src="/example-assets/images/awards/award1.png" class="image__img icons-awards__image is-loading" alt="Award 1" onload="this.classList.remove('is-loading')" />
                  </picture>
              </span>

          </button>
      </li>
      <li class="icons-awards__list-item">
          <button type="button" class="icons-awards__toggle" data-info-tooltip-content="Award">
              <span class="visually-hidden">Award</span>
              <span class="image ">
                  <picture>
                      <img src="/example-assets/images/awards/award2.png" class="image__img icons-awards__image is-loading" alt="Award 2" onload="this.classList.remove('is-loading')" />
                  </picture>
              </span>

          </button>
      </li>
  </ul>


        {% include '@SharedComponents/modules/b2b-product-detail/components/icons-awards/icons-awards.twig' %}


        
            
            {
  "iconsAwards": [
    {
      "value": "Beheizbar",
      "image": {
        "src": "/example-assets/images/icons/icon1.png",
        "alt": "Beheizbar"
      }
    },
    {
      "value": "Super soft",
      "image": {
        "src": "/example-assets/images/icons/icon2.png",
        "alt": "Super soft"
      }
    },
    {
      "value": "Etwas ganz besonderes",
      "image": {
        "src": "/example-assets/images/icons/icon3.png",
        "alt": "Etwas ganz besonderes"
      }
    },
    {
      "value": "Waterproof",
      "image": {
        "src": "/example-assets/images/icons/icon4.png",
        "alt": "Waterproof"
      }
    },
    {
      "value": "Stretch",
      "image": {
        "src": "/example-assets/images/icons/icon5.png",
        "alt": "Stretch"
      }
    },
    {
      "value": "Beheizbar",
      "image": {
        "src": "/example-assets/images/icons/icon1.png",
        "alt": "Beheizbar"
      }
    },
    {
      "value": "Super soft",
      "image": {
        "src": "/example-assets/images/icons/icon2.png",
        "alt": "Super soft"
      }
    },
    {
      "value": "Etwas ganz besonderes",
      "image": {
        "src": "/example-assets/images/icons/icon3.png",
        "alt": "Etwas ganz besonderes"
      }
    },
    {
      "value": "Waterproof",
      "image": {
        "src": "/example-assets/images/icons/icon4.png",
        "alt": "Waterproof"
      }
    },
    {
      "value": "Stretch",
      "image": {
        "src": "/example-assets/images/icons/icon5.png",
        "alt": "Stretch"
      }
    },
    {
      "value": "Beheizbar",
      "image": {
        "src": "/example-assets/images/icons/icon1.png",
        "alt": "Beheizbar"
      }
    },
    {
      "value": "Super soft",
      "image": {
        "src": "/example-assets/images/icons/icon2.png",
        "alt": "Super soft"
      }
    },
    {
      "value": "Etwas ganz besonderes",
      "image": {
        "src": "/example-assets/images/icons/icon3.png",
        "alt": "Etwas ganz besonderes"
      }
    },
    {
      "value": "Waterproof",
      "image": {
        "src": "/example-assets/images/icons/icon4.png",
        "alt": "Waterproof"
      }
    },
    {
      "value": "Stretch",
      "image": {
        "src": "/example-assets/images/icons/icon5.png",
        "alt": "Stretch"
      }
    },
    {
      "value": "Award",
      "image": {
        "src": "/example-assets/images/awards/award1.png",
        "alt": "Award 1"
      }
    },
    {
      "value": "Award",
      "image": {
        "src": "/example-assets/images/awards/award2.png",
        "alt": "Award 2"
      }
    },
    {
      "value": "Award",
      "image": {
        "src": "/example-assets/images/awards/award1.png",
        "alt": "Award 1"
      }
    },
    {
      "value": "Award",
      "image": {
        "src": "/example-assets/images/awards/award2.png",
        "alt": "Award 2"
      }
    },
    {
      "value": "Award",
      "image": {
        "src": "/example-assets/images/awards/award1.png",
        "alt": "Award 1"
      }
    },
    {
      "value": "Award",
      "image": {
        "src": "/example-assets/images/awards/award2.png",
        "alt": "Award 2"
      }
    }
  ]
}

File:

Content:


                                import './icons-awards.scss';
import IconsAwards, {selector as sel} from 'cando-cx-components-library/components/modules/b2b-product-detail/components/icons-awards/icons-awards';

export default IconsAwards;
export const selector = sel;

URL: /components/raw/icons-awards/icons-awards.js
Filesystem Path: src/components/modules/b2b-product-detail/components/icons-awards/icons-awards.js
Size: 236 Bytes

Content:


                                @import "~shared/base";
@import "~cando-cx-components-library/components/modules/b2b-product-detail/components/icons-awards/icons-awards";

URL: /components/raw/icons-awards/icons-awards.scss
Filesystem Path: src/components/modules/b2b-product-detail/components/icons-awards/icons-awards.scss
Size: 138 Bytes

No notes defined.