Copy environment

Article Image

<div class="article-image">
    <div class="article-image__figures">
        <div class="image image--fluid image--background article-image__figure">
            <div class="image__inner">
                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/1140x600 1140w, //placehold.it/2280x1200 2280w" data-sizes="auto" alt="Full size image" class="image__img lazyload">
                <noscript>
                <img src="//placehold.it/1140x600" srcset="//placehold.it/1140x600 1140w, //placehold.it/2280x1200 2280w" sizes="100vw" alt="Full size image" class="image__img">
            </noscript>
            </div>
        </div>
    </div>

    <span class="article-image__caption">Sweet roll candy dragée marshmallow brownie cotton candy. Sesame snaps cotton candy lollipop cupcake bear claw biscuit marzipan candy canes. Chocolate</span>
</div>
{
  "language": "en-US",
  "data": {
    "type": "full",
    "images": [
      {
        "src": "//placehold.it/1140x600",
        "srcset": "//placehold.it/1140x600 1140w, //placehold.it/2280x1200 2280w",
        "alt": "Full size image",
        "caption": "Sweet roll candy dragée marshmallow brownie cotton candy. Sesame snaps cotton candy lollipop cupcake bear claw biscuit marzipan candy canes. Chocolate"
      }
    ]
  }
}

Left Two Thirds

<div class="article-image article-image--two-thirds article-image--left article-image--two-thirds js-article-image">
    <div class="article-image__figures">
        <div class="image image--fluid image--background article-image__figure">
            <div class="image__inner">
                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/760x374 760w, //placehold.it/1520x748 1520w" data-sizes="auto" alt="Left two thirds 1" class="image__img lazyload">
                <noscript>
                <img src="//placehold.it/760x374" srcset="//placehold.it/760x374 760w, //placehold.it/1520x748 1520w" sizes="100vw" alt="Left two thirds 1" class="image__img">
            </noscript>
            </div>
        </div>
        <div class="image image--fluid image--background article-image__figure">
            <div class="image__inner">
                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/760x374/FF0000 760w, //placehold.it/1520x748/FF0000 1520w" data-sizes="auto" alt="Left two thirds 1" class="image__img lazyload">
                <noscript>
                <img src="//placehold.it/760x374/FF0000" srcset="//placehold.it/760x374/FF0000 760w, //placehold.it/1520x748/FF0000 1520w" sizes="100vw" alt="Left two thirds 1" class="image__img">
            </noscript>
            </div>
        </div>
        <div class="image image--fluid image--background article-image__figure">
            <div class="image__inner">
                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/760x374/0000FF 760w, //placehold.it/1520x748/0000FF 1520w" data-sizes="auto" alt="Left two thirds 1" class="image__img lazyload">
                <noscript>
                <img src="//placehold.it/760x374/0000FF" srcset="//placehold.it/760x374/0000FF 760w, //placehold.it/1520x748/0000FF 1520w" sizes="100vw" alt="Left two thirds 1" class="image__img">
            </noscript>
            </div>
        </div>
    </div>

    <span class="article-image__caption">Sweet roll candy dragée marshmallow brownie cotton candy. Sesame snaps cotton candy lollipop cupcake bear claw biscuit marzipan candy canes. Chocolate</span>
</div>
{
  "language": "en-US",
  "data": {
    "type": "two_thirds",
    "images": [
      {
        "src": "//placehold.it/760x374",
        "srcset": "//placehold.it/760x374 760w, //placehold.it/1520x748 1520w",
        "alt": "Left two thirds 1",
        "caption": "Sweet roll candy dragée marshmallow brownie cotton candy. Sesame snaps cotton candy lollipop cupcake bear claw biscuit marzipan candy canes. Chocolate"
      },
      {
        "src": "//placehold.it/760x374/FF0000",
        "srcset": "//placehold.it/760x374/FF0000 760w, //placehold.it/1520x748/FF0000 1520w",
        "alt": "Left two thirds 1",
        "caption": "Sweet roll candy dragée marshmallow brownie cotton candy. Sesame snaps cotton candy lollipop cupcake bear claw biscuit marzipan candy canes. Chocolate"
      },
      {
        "src": "//placehold.it/760x374/0000FF",
        "srcset": "//placehold.it/760x374/0000FF 760w, //placehold.it/1520x748/0000FF 1520w",
        "alt": "Left two thirds 1",
        "caption": "Sweet roll candy dragée marshmallow brownie cotton candy. Sesame snaps cotton candy lollipop cupcake bear claw biscuit marzipan candy canes. Chocolate"
      }
    ],
    "side": "left"
  },
  "modifier": "article-image--two-thirds"
}

Left Half

<div class="article-image article-image--half article-image--left article-image--half">
    <div class="article-image__figures">
        <div class="image image--fluid image--background article-image__figure">
            <div class="image__inner">
                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/760x760 760w, //placehold.it/1140x1140 1140w" data-sizes="auto" alt="Left half" class="image__img lazyload">
                <noscript>
                <img src="//placehold.it/760x760" srcset="//placehold.it/760x760 760w, //placehold.it/1140x1140 1140w" sizes="100vw" alt="Left half" class="image__img">
            </noscript>
            </div>
        </div>
    </div>

    <span class="article-image__caption">Sweet roll candy dragée marshmallow brownie cotton candy. Sesame snaps cotton candy lollipop cupcake bear claw biscuit marzipan candy canes. Chocolate</span>
</div>
{
  "language": "en-US",
  "data": {
    "type": "half",
    "images": [
      {
        "src": "//placehold.it/760x760",
        "srcset": "//placehold.it/760x760 760w, //placehold.it/1140x1140 1140w",
        "alt": "Left half",
        "caption": "Sweet roll candy dragée marshmallow brownie cotton candy. Sesame snaps cotton candy lollipop cupcake bear claw biscuit marzipan candy canes. Chocolate"
      }
    ],
    "side": "left"
  },
  "modifier": "article-image--half"
}

Right Two Thirds

<div class="article-image article-image--two-thirds article-image--right article-image--two-thirds">
    <div class="article-image__figures">
        <div class="image image--fluid image--background article-image__figure">
            <div class="image__inner">
                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/760x374 760w, //placehold.it/1520x748 1520w" data-sizes="auto" alt="Right two thirds" class="image__img lazyload">
                <noscript>
                <img src="//placehold.it/760x374" srcset="//placehold.it/760x374 760w, //placehold.it/1520x748 1520w" sizes="100vw" alt="Right two thirds" class="image__img">
            </noscript>
            </div>
        </div>
    </div>

    <span class="article-image__caption">Sweet roll candy dragée marshmallow brownie cotton candy. Sesame snaps cotton candy lollipop cupcake bear claw biscuit marzipan candy canes. Chocolate</span>
</div>
{
  "language": "en-US",
  "data": {
    "type": "two_thirds",
    "images": [
      {
        "src": "//placehold.it/760x374",
        "srcset": "//placehold.it/760x374 760w, //placehold.it/1520x748 1520w",
        "alt": "Right two thirds",
        "caption": "Sweet roll candy dragée marshmallow brownie cotton candy. Sesame snaps cotton candy lollipop cupcake bear claw biscuit marzipan candy canes. Chocolate"
      }
    ],
    "side": "right"
  },
  "modifier": "article-image--two-thirds"
}

Right Half

<div class="article-image article-image--half article-image--right article-image--half">
    <div class="article-image__figures">
        <div class="image image--fluid image--background article-image__figure">
            <div class="image__inner">
                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="//placehold.it/760x760 760w, //placehold.it/1140x1140 1140w" data-sizes="auto" alt="Right half" class="image__img lazyload">
                <noscript>
                <img src="//placehold.it/760x760" srcset="//placehold.it/760x760 760w, //placehold.it/1140x1140 1140w" sizes="100vw" alt="Right half" class="image__img">
            </noscript>
            </div>
        </div>
    </div>

    <span class="article-image__caption">Sweet roll candy dragée marshmallow brownie cotton candy. Sesame snaps cotton candy lollipop cupcake bear claw biscuit marzipan candy canes. Chocolate</span>
</div>
{
  "language": "en-US",
  "data": {
    "type": "half",
    "images": [
      {
        "src": "//placehold.it/760x760",
        "srcset": "//placehold.it/760x760 760w, //placehold.it/1140x1140 1140w",
        "alt": "Right half",
        "caption": "Sweet roll candy dragée marshmallow brownie cotton candy. Sesame snaps cotton candy lollipop cupcake bear claw biscuit marzipan candy canes. Chocolate"
      }
    ],
    "side": "right"
  },
  "modifier": "article-image--half"
}