<div class="responsiveimage-wrapper _large">
    <img id="" class="responsiveimage  " alt="" style="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 460'%3E%3Cpath fill='%23DEE1E1' d='M0 0h720v460H0z'/%3E%3Cg fill='%23B1B6B7'%3E%3Cpath d='M185.1 92.4v275.1h349.7V92.4H185.1zm321.6 245.3H215V122.3h291.7v215.4z'/%3E%3Cpath d='M230.1 314.9l60.4-63.5 22.6 9.8 71.4-76 28.1 33.6 12.7-7.6 68.6 103.7'/%3E%3Ccircle cx='299.9' cy='176.8' r='26.4'/%3E%3C/g%3E%3C/svg%3E"
    />
</div>
{{#if srcmobile}}
    {{#if responsive}}<div class="responsiveimage-wrapper {{wrappermodifier}}">{{/if}}
        <picture>
            <source media="(max-width: 599px)" src{{#if src2x}}set{{/if}}="{{srcmobile}}">
            <img
                class="{{#if responsive}}responsive{{/if}}image {{#if lazyload}}b-lazy{{/if}} {{modifier}}"
                style="{{style}}"
                {{#if src2x}}
                    {{#if lazyload}}
                        data-src="{{src}}|{{src2x}}"
                    {{else}}
                        srcset="{{src}}, {{src2x}} 2x"
                    {{/if}}
                {{else}}
                    {{#if svgurl2x}}
                        {{#if lazyload}}
                            data-src="{{svgurl}}|{{svgurl2x}}"
                        {{else}}
                            srcset="{{svgurl}}, {{svgurl2x}} 2x"
                        {{/if}}
                    {{else}}
                        {{#if lazyload}}data-{{/if}}src="{{#if src}}{{src}}{{else}}{{{svgurl}}}{{/if}}"
                    {{/if}}
                {{/if}}
                {{#if lazyload}}src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5NjAgNTYwIj48cGF0aCBmaWxsPSIjRjNGNEY0IiBkPSJNMCAwaDk2MHY1NjBIMHoiLz48L3N2Zz4="{{/if}}
                alt="{{alt}}"
            >
        </picture>
    {{#if responsive}}</div>{{/if}}
{{else}}
    {{#if responsive}}<div class="responsiveimage-wrapper {{wrappermodifier}}">{{/if}}
    <img id="{{id}}"
        class="{{#if responsive}}responsive{{/if}}image {{#if lazyload}}b-lazy{{/if}} {{modifier}}"
        alt="{{alt}}"
        style="{{style}}"
        {{#if height}}height="{{height}}"{{/if}}
        {{#if width}}width="{{width}}"{{/if}}
        {{#if src2x}}
            {{#if lazyload}}
                data-src="{{src}}|{{src2x}}"
            {{else}}
                srcset="{{src}}, {{src2x}} 2x"
            {{/if}}
        {{else}}
            {{#if svgurl2x}}
                {{#if lazyload}}
                    data-src="{{svgurl}}|{{svgurl2x}}"
                {{else}}
                    srcset="{{svgurl}}, {{svgurl2x}} 2x"
                {{/if}}
            {{else}}
                {{#if lazyload}}data-{{/if}}src="{{#if src}}{{src}}{{else}}{{{svgurl}}}{{/if}}"
            {{/if}}
        {{/if}}
        {{#if lazyload}}src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5NjAgNTYwIj48cGF0aCBmaWxsPSIjRjNGNEY0IiBkPSJNMCAwaDk2MHY1NjBIMHoiLz48L3N2Zz4="{{/if}}
    />
    {{#if responsive}}</div>{{/if}}
{{/if}}
{
  "id": null,
  "alt": null,
  "wrappermodifier": "_large",
  "modifier": null,
  "responsive": true,
  "lazyload": null,
  "src": null,
  "src2x": null,
  "srcmobile": null,
  "svgurl": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 460'%3E%3Cpath fill='%23DEE1E1' d='M0 0h720v460H0z'/%3E%3Cg fill='%23B1B6B7'%3E%3Cpath d='M185.1 92.4v275.1h349.7V92.4H185.1zm321.6 245.3H215V122.3h291.7v215.4z'/%3E%3Cpath d='M230.1 314.9l60.4-63.5 22.6 9.8 71.4-76 28.1 33.6 12.7-7.6 68.6 103.7'/%3E%3Ccircle cx='299.9' cy='176.8' r='26.4'/%3E%3C/g%3E%3C/svg%3E",
  "svgurl2x": null,
  "style": null
}
  • Content:
    const PropTypes = require('prop-types');
    const React = require('react');
    const cx = require('classnames');
    
    const Image = ({id, responsive, clearMobileMargin, lazyload, modifier, alt, src, src2x, style}) => {
        const source = lazyload ? {
            'data-src': !src2x ? src : null,
            'data-srcset': src2x && `${src}, ${src2x} 2x`,
        } : {
            src: !src2x ? src : null,
            srcSet: src2x && `${src}, ${src2x} 2x`,
        };
    
        const image = (
            <img id={id || null}
                 className={cx([
                     responsive ? 'responsiveimage' : 'image',
                     lazyload ? 'b-lazy' : '',
                     modifier
                 ])}
                 alt={alt}
                 {...source}
            />
        );
    
        return responsive ? (
            <div className={cx([
                'responsiveimage-wrapper',
                clearMobileMargin ? '_clear-mobile-margin' : ''
            ])}>
                {image}
            </div>
        ) : image;
    };
    Image.propTypes = {
        id: PropTypes.string,
        responsive: PropTypes.bool,
        clearMobileMargin: PropTypes.bool,
        lazyload: PropTypes.bool,
        modifier: PropTypes.string,
        alt: PropTypes.string,
        src: PropTypes.string,
        src2x:PropTypes.string,
        style:PropTypes.string
    };
    
    module.exports = Image;
    
  • URL: /components/raw/image/Image.jsx
  • Filesystem Path: components/atoms/Image/Image.jsx
  • Size: 1.3 KB
  • Content:
    .Image--shadow {
        @include BoxShadow($level: "Image", $filter: true);
    }
    .Image--rounded {
        border-radius: $Border-radius--500;
    }
    
    /**
    *  Product Images
    *
    *  Classes for positioning product images that flow outside of the grid.
    */
    @media #{$desktop-media} {
        .responsiveimage {
            position: absolute;
            top: 0;
            width: auto;
            height: 520px;
            max-width: none;
            &-wrapper {
                position: relative;
                height: 520px;
            }
            &._left {
                right: 10px;
            }
            &._right {
                left: 10px;
            }
            &-wrapper._large,
            &-wrapper._large .responsiveimage {
                height: 640px;
            }
            &-wrapper._small,
            &-wrapper._small .responsiveimage {
                height: 400px;
            }
            &-wrapper._smaller,
            &-wrapper._smaller .responsiveimage {
                height: 350px;
            }
        }
    }
    
  • URL: /components/raw/image/Image.scss
  • Filesystem Path: components/atoms/Image/Image.scss
  • Size: 927 Bytes

There are no notes for this item.