OFRAG Frontend Components Library v0.0.0

Logos: Extra Large 

<div class="logos">
      <div class="image ">
          <picture>
              <img src="/example-assets/images/logos/brand-logo.png" class="image__img logos__brand--extra-large is-loading" alt="alt" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
          </picture>
      </div>

      <div class="image ">
          <picture>
              <img src="/example-assets/images/logos/product-line-logo.jpg" class="image__img logos__productline--extra-large is-loading" alt="alt" srcset="/example-assets/images/logos/product-line-logo.jpg 1x, /example-assets/images/logos/product-line-logo.jpg 2x" onload="this.classList.remove('is-loading')" />
          </picture>
      </div>

  </div>
 
{% include '@SharedComponents/modules/shared-product/components/logos/logos.twig' %}
 
{
  "logos": {
    "brand": {
      "alt": "alt",
      "src": "/example-assets/images/logos/brand-logo.png",
      "src2x": "/example-assets/images/logos/brand-logo.png"
    },
    "productLine": {
      "alt": "alt",
      "src": "/example-assets/images/logos/product-line-logo.jpg",
      "src2x": "/example-assets/images/logos/product-line-logo.jpg"
    }
  },
  "size": "extra-large"
}
  • Content: 
    import './logos.scss';
  • URL: /components/raw/logos/logos.js
  • Filesystem Path: src/components/modules/shared-product/components/logos/logos.js
  • Size: 22 Bytes
  • Content: 
    @import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared-product/components/logos/logos";
  • URL: /components/raw/logos/logos.scss
  • Filesystem Path: src/components/modules/shared-product/components/logos/logos.scss
  • Size: 120 Bytes

Used in Hero Brick. Meant for places where it is enough to limit the logo by its height.