OFRAG Frontend Components Library v0.0.0

Image: With Overlay Direct Html 

<div class="image  root-class" data-modal-id="image-modal-1078557459">
    <picture><img src="/example-assets/images/image/image.jpg" class="image__img test-image" alt="Alt" title="Title" srcset="/example-assets/images/image/image.jpg 1x, /example-assets/images/image/image.jpg 2x" data-image-test="hello-world"></picture>
</div>

<script type="text/html" class="modal__placeholder" id="image-modal-1078557459-placeholder">
    <aside class="modal modal--slide" id="image-modal-1078557459" aria-hidden="true" data-modal>
        <div class="modal__overlay" tabindex="-1" data-modal-close data-modal-overlay>
            <div class="modal__container--medium" role="dialog" aria-modal="true" aria-labelledby="image-modal-1078557459-title">
                <div class="modal__container-inner">
                    <header class="modal__header">
                        <h3 class="modal__title" id="image-modal-1078557459-title"></h3>
                        <div class="modal__close">
                            <button class="button-icon--icon-regular -icon-close" type="button" name="close" value="close" data-modal-close="">
                                <span class="visually-hidden"></span>
                            </button>
                        </div>
                    </header>
                    <main class="modal__content" id="image-modal-1078557459-content">

                        <div class="image ">
                            <picture><img src="/example-assets/images/image/image.jpg" class="image__img test-image" alt="Alt" title="Title" srcset="/example-assets/images/image/image.jpg 1x, /example-assets/images/image/image.jpg 2x" data-image-test="hello-world"></picture>
                        </div>

                    </main>
                </div>
            </div>
        </div>
    </aside>
</script>
 
{% include '@SharedComponents/modules/shared/components/image/image.twig' %}
 
{
  "rootClass": "root-class",
  "imageClass": "test-image",
  "pictureClass": "",
  "imageAttributes": {
    "data-image-test": "hello-world"
  },
  "image": "<picture><img src=\"/example-assets/images/image/image.jpg\" class=\"image__img test-image\" alt=\"Alt\" title=\"Title\" srcset=\"/example-assets/images/image/image.jpg 1x, /example-assets/images/image/image.jpg 2x\" data-image-test=\"hello-world\"></picture>",
  "overlayImage": "<picture><img src=\"/example-assets/images/image/image.jpg\" class=\"image__img test-image\" alt=\"Alt\" title=\"Title\" srcset=\"/example-assets/images/image/image.jpg 1x, /example-assets/images/image/image.jpg 2x\" data-image-test=\"hello-world\"></picture>"
}
  • Content: 
    import './image.scss';
import Image, {selector as sel} from 'cando-cx-components-library/components/modules/shared/components/image/image';

export default Image;
export const selector = sel;
  • URL: /components/raw/image/image.js
  • Filesystem Path: src/components/modules/shared/components/image/image.js
  • Size: 191 Bytes
  • Content: 
    @import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared/components/image/image";
  • URL: /components/raw/image/image.scss
  • Filesystem Path: src/components/modules/shared/components/image/image.scss
  • Size: 112 Bytes

No notes defined.