Product Image

Default

This component will handle the sizing and formatting of product images. You can change the width and image url in the example.
Max width 200

Width

Image Url

HTML

<div class="t-content u-flex u-flexColumn" ng-controller="productImageExampleController as ProductImage">
    <product-image
        image-url="ProductImage.Product.ImageUrl"
        width="ProductImage.Product.Width">
    </product-image>
    <div class="u-flex u-flexColumn u-mt++">
        <div class="u-flex u-flexColumn">
            <label>Width</label>
            <input type="text" ng-model="ProductImage.Product.Width" placeholder="Width">
        </div>
        <div class="u-flex u-flexColumn">
            <label>Image Url</label>
            <input type="text" ng-model="ProductImage.Product.ImageUrl" placeholder="ImageUrl">
        </div>
    </div>
</div>

No Image

This shows the state for a product image when a url isnt provided or a user gets a 404 error.

HTML

<div class="t-content u-flex u-flexColumn" ng-controller="productImageExampleController as ProductImage">
    <product-image
        width="ProductImage.Product.Width">
    </product-image>
</div>

Sibling Action

In a scenario where productImages are used in an interactive list, we may need to modify one or more to specify different actions than the sibling elements. Allows for alternative icon glyph and use of brand/app color.

HTML

<div class="t-content u-flex u-flexColumn" ng-controller="productImageExampleController as ProductImage">
    <product-image
        glyph="'plus-cc'"
        is-sibling-action="true"
        width="ProductImage.Product.Width">
    </product-image>
</div>

Offer Image

Display a picture with a configurable height and width. Images will always hit full width, that is the full width specified on the parameters, and remain centered. Vertical overflow is hidden and unused vertical space is transparent.
Supports pngs with transparencies.
Max dimentions 300x200. Max Icon size 90

Width

Height

Image Url

HTML

<div class="t-content u-flex u-flexColumn" ng-controller="productImageExampleController as thumb">
    <offer-image
        image-url="thumb.offer.ImageUrl"
        width="thumb.offer.Width"
        height="thumb.offer.Height">
    </offer-image>
    <div class="u-flex u-flexColumn u-mt++">
        <div class="u-flex u-flexColumn">
            <label>Width</label>
            <input type="text" ng-model="thumb.offer.Width" placeholder="Width">
        </div>
        <div class="u-flex u-flexColumn">
            <label>Height</label>
            <input type="text" ng-model="thumb.offer.Height" placeholder="Height">
        </div>
        <div class="u-flex u-flexColumn">
            <label>Image Url</label>
            <input type="text" ng-model="thumb.offer.ImageUrl" placeholder="ImageUrl">
        </div>
    </div>
</div>

Inventory Image

Display a picture with a configurable height and width. Images will always hit full width, that is the full width specified on the parameters, and remain centered. Vertical overflow is hidden and unused vertical space is transparent.
Supports pngs with transparencies.
Max dimentions 300x200. Max Icon size 90

Width

Height

Image Url

HTML

<div class="t-content u-flex u-flexColumn" ng-controller="productImageExampleController as thumb">
    <inventory-image
        image-url="thumb.inventory.ImageUrl"
        width="thumb.inventory.Width"
        height="thumb.inventory.Height">
    </inventory-image>
    <div class="u-flex u-flexColumn u-mt++">
        <div class="u-flex u-flexColumn">
            <label>Width</label>
            <input type="text" ng-model="thumb.inventory.Width" placeholder="Width">
        </div>
        <div class="u-flex u-flexColumn">
            <label>Height</label>
            <input type="text" ng-model="thumb.inventory.Height" placeholder="Height">
        </div>
        <div class="u-flex u-flexColumn">
            <label>Image Url</label>
            <input type="text" ng-model="thumb.inventory.ImageUrl" placeholder="ImageUrl">
        </div>
    </div>
</div>

Default

This component will handle the sizing and formatting of product images. You can change the width and image url in the example. Max width 200

No Image

This shows the state for a product image when a url isnt provided or a user gets a 404 error.

Sibling Action

In a scenario where productImages are used in an interactive list, we may need to modify one or more to specify different actions than the sibling elements. Allows for alternative icon glyph and use of brand/app color.

Offer Image

Inventory Image

This component will handle the sizing and formatting of product images. You can change the width and image url in the example.
Max width 200