diff --git a/extensions/amp-sidebar/0.1/amp-sidebar.css b/extensions/amp-sidebar/0.1/amp-sidebar.css
index 4461d3bfe9be..7300a57205a9 100644
--- a/extensions/amp-sidebar/0.1/amp-sidebar.css
+++ b/extensions/amp-sidebar/0.1/amp-sidebar.css
@@ -14,4 +14,44 @@
  * limitations under the License.
  */
 
-amp-sidebar {}
+amp-sidebar {
+  position: fixed !important;
+  top: 0;
+  max-height: 100vh !important;
+  height: 100vh;
+  max-width: 80vw !important;
+  background-color: #efefef;
+  min-width: 45px !important;
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+  z-index: 9999 !important;
+  -webkit-overflow-scrolling: touch;
+}
+
+amp-sidebar[side="left"] {
+  left: 0 !important;
+  transform: translateX(-80vw) !important;
+}
+
+amp-sidebar[side="right"] {
+  right: 0 !important;
+  transform: translateX(80vw) !important;
+}
+
+amp-sidebar[side][open] {
+  transform: translateX(0vw) !important;
+}
+
+.-amp-sidebar-mask {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  opacity: 0.2;
+  /* Prevent someone from making this a full-sceen image */
+  background-image: none !important;
+  background-color: #000;
+  z-index: 9998 !important;
+  display: none;
+}
diff --git a/extensions/amp-sidebar/0.1/amp-sidebar.js b/extensions/amp-sidebar/0.1/amp-sidebar.js
index 8c683c79f2ea..c100aaf46758 100644
--- a/extensions/amp-sidebar/0.1/amp-sidebar.js
+++ b/extensions/amp-sidebar/0.1/amp-sidebar.js
@@ -17,7 +17,8 @@
 import {CSS} from '../../../build/amp-sidebar-0.1.css';
 import {Layout} from '../../../src/layout';
 import {isExperimentOn} from '../../../src/experiments';
-
+import {dev} from '../../../src/log';
+import {setStyles} from '../../../src/style';
 
 /** @const */
 const EXPERIMENT = 'amp-sidebar';
@@ -41,10 +42,148 @@ export class AmpSidebar extends AMP.BaseElement {
     /** @const @private {boolean} */
     this.isExperimentOn_ = isExperimentOn(this.getWin(), EXPERIMENT);
 
+    /** @private @const {!Window} */
+    this.win_ = this.getWin();
+
+    /** @private @const {!Document} */
+    this.document_ = this.win_.document;
+
+    /** @private @const {!Element} */
+    this.documentElement_ = this.document_.documentElement;
+
+    /** @private @const {string} */
+    this.side_ = this.element.getAttribute('side');
+
+    /** @private @const {!Viewport} */
+    this.viewport_ = this.getViewport();
+
+    /** @private @const {!Element} */
+    this.maskElement_ = false;
+
     if (!this.isExperimentOn_) {
       dev.warn(TAG, `Experiment ${EXPERIMENT} disabled`);
       return;
     }
+
+    if (this.side_ != 'left' && this.side_ != 'right') {
+      const pageDir =
+          this.document_.body.getAttribute('dir') ||
+          this.documentElement_.getAttribute('dir') ||
+          'ltr';
+      this.side_ = (pageDir == 'rtl') ? 'right' : 'left';
+      this.element.setAttribute('side', this.side_);
+    }
+
+    if (this.isOpen_()) {
+      this.open_();
+    } else {
+      this.element.setAttribute('aria-hidden', 'true');
+    }
+
+    this.documentElement_.addEventListener('keydown', event => {
+      // Close sidebar on ESC.
+      if (event.keyCode == 27) {
+        this.close_();
+      }
+    });
+
+    //TODO (skrish, #2712) Add history support on back button.
+    this.registerAction('toggle', this.toggle_.bind(this));
+    this.registerAction('open', this.open_.bind(this));
+    this.registerAction('close', this.close_.bind(this));
+  }
+
+ /**
+  * Returns true if the sidebar is opened.
+  * @returns {boolean}
+  * @private
+  */
+ isOpen_() {
+   return this.element.hasAttribute('open');
+ }
+
+  /** @override */
+  activate() {
+    this.open_();
+  }
+
+
+  /**
+   * Toggles the open/close state of the sidebar.
+   * @private
+   */
+  toggle_() {
+    if (this.isOpen_()) {
+      this.close_();
+    } else {
+      this.open_();
+    }
+  }
+
+  /**
+   * Reveals the sidebar.
+   * @private
+   */
+  open_() {
+    this.viewport_.disableTouchZoom();
+    this.mutateElement(() => {
+      this.viewport_.addToFixedLayer(this.element);
+      setStyles(this.element, {
+        'display': 'block',
+      });
+      this.openMask_();
+      this.element.setAttribute('open', '');
+      this.element.setAttribute('aria-hidden', 'false');
+    });
+  }
+
+  /**
+   * Hides the sidebar.
+   * @private
+   */
+  close_() {
+    this.viewport_.restoreOriginalTouchZoom();
+    this.mutateElement(() => {
+      this.closeMask_();
+      this.element.removeAttribute('open');
+      this.element.setAttribute('aria-hidden', 'true');
+      setStyles(this.element, {
+        'display': 'none',
+      });
+      this.viewport_.removeFromFixedLayer(this.element);
+    });
+  }
+
+  /**
+   * @private
+   */
+  openMask_() {
+    if (!this.maskElement_) {
+      const mask = this.document_.createElement('div');
+      mask.classList.add('-amp-sidebar-mask');
+      mask.addEventListener('click', () => {
+        this.close_();
+      });
+      this.element.parentNode.appendChild(mask);
+      mask.addEventListener('touchmove', e => {
+        e.preventDefault();
+      });
+      this.maskElement_ = mask;
+    }
+    setStyles(this.maskElement_, {
+      'display': 'block',
+    });
+  }
+
+  /**
+   * @private
+   */
+  closeMask_() {
+    if (this.maskElement_) {
+      setStyles(this.maskElement_, {
+        'display': 'none',
+      });
+    }
   }
 }
 
diff --git a/extensions/amp-sidebar/0.1/test/test-amp-sidebar.js b/extensions/amp-sidebar/0.1/test/test-amp-sidebar.js
index 800ac481c975..bb8be17f7699 100644
--- a/extensions/amp-sidebar/0.1/test/test-amp-sidebar.js
+++ b/extensions/amp-sidebar/0.1/test/test-amp-sidebar.js
@@ -16,12 +16,40 @@
  */
 
 import {adopt} from '../../../../src/runtime';
+import {createIframePromise} from '../../../../testing/iframe';
+import {toggleExperiment} from '../../../../src/experiments';
 require('../amp-sidebar');
 
 adopt(window);
 
 describe('amp-sidebar', () => {
   let sandbox;
+
+  function getAmpSidebar(options) {
+    options = options || {};
+    return createIframePromise().then(iframe => {
+      toggleExperiment(iframe.win, 'amp-sidebar', true);
+      const ampSidebar = iframe.doc.createElement('amp-sidebar');
+      const list = iframe.doc.createElement('ul');
+      for (let i = 0; i < 10; i++) {
+        const li = iframe.doc.createElement('li');
+        li.innerHTML = 'Menu item ' + i;
+        list.appendChild(li);
+      }
+      ampSidebar.appendChild(list);
+      if (options.side) {
+        ampSidebar.setAttribute('side', options.side);
+      }
+      ampSidebar.setAttribute('id', 'sidebar1');
+      return iframe.addElement(ampSidebar).then(() => {
+        return Promise.resolve({
+          iframe: iframe,
+          ampSidebar: ampSidebar,
+        });
+      });
+    });
+  }
+
   beforeEach(() => {
     sandbox = sinon.sandbox.create();
   });
@@ -29,4 +57,125 @@ describe('amp-sidebar', () => {
   afterEach(() => {
     sandbox.restore();
   });
+
+  it('should open from left is side is not specified', () => {
+    return getAmpSidebar().then(obj => {
+      const sidebarElement = obj.ampSidebar;
+      expect(sidebarElement.getAttribute('side')).to.equal('left');
+    });
+  });
+
+  it('should open from right is side right is specified', () => {
+    return getAmpSidebar({'side': 'right'}).then(obj => {
+      const sidebarElement = obj.ampSidebar;
+      expect(sidebarElement.getAttribute('side')).to.equal('right');
+    });
+  });
+
+  it('should create mask element in DOM', () => {
+    return getAmpSidebar().then(obj => {
+      const iframe = obj.iframe;
+      const sidebarElement = obj.ampSidebar;
+      const impl = sidebarElement.implementation_;
+      impl.mutateElement = function(callback) {
+        callback();
+      };
+      impl.open_();
+      expect(iframe.doc.querySelectorAll('.-amp-sidebar-mask').length)
+          .to.equal(1);
+    });
+  });
+
+  it('should open sidebar on button click', () => {
+    return getAmpSidebar().then(obj => {
+      const sidebarElement = obj.ampSidebar;
+      const impl = sidebarElement.implementation_;
+      impl.mutateElement = function(callback) {
+        callback();
+      };
+      impl.open_();
+      expect(sidebarElement.hasAttribute('open')).to.be.true;
+      expect(sidebarElement.getAttribute('aria-hidden')).to.equal('false');
+      expect(sidebarElement.style.display).to.equal('block');
+    });
+  });
+
+  it('should close sidebar on button click', () => {
+    return getAmpSidebar().then(obj => {
+      const sidebarElement = obj.ampSidebar;
+      const impl = sidebarElement.implementation_;
+      impl.mutateElement = function(callback) {
+        callback();
+      };
+      impl.close_();
+      expect(sidebarElement.hasAttribute('open')).to.be.false;
+      expect(sidebarElement.getAttribute('aria-hidden')).to.equal('true');
+      expect(sidebarElement.style.display).to.equal('none');
+    });
+  });
+
+  it('should toggle sidebar on button click', () => {
+    return getAmpSidebar().then(obj => {
+      const sidebarElement = obj.ampSidebar;
+      const impl = sidebarElement.implementation_;
+      impl.mutateElement = function(callback) {
+        callback();
+      };
+      expect(sidebarElement.hasAttribute('open')).to.be.false;
+      expect(sidebarElement.getAttribute('aria-hidden')).to.equal('true');
+      impl.toggle_();
+      expect(sidebarElement.hasAttribute('open')).to.be.true;
+      expect(sidebarElement.getAttribute('aria-hidden')).to.equal('false');
+      expect(sidebarElement.style.display).to.equal('block');
+      impl.toggle_();
+      expect(sidebarElement.hasAttribute('open')).to.be.false;
+      expect(sidebarElement.getAttribute('aria-hidden')).to.equal('true');
+      expect(sidebarElement.style.display).to.equal('none');
+    });
+  });
+
+  it('should close sidebar on escape', () => {
+    return getAmpSidebar().then(obj => {
+      const iframe = obj.iframe;
+      const sidebarElement = obj.ampSidebar;
+      const impl = sidebarElement.implementation_;
+      impl.mutateElement = function(callback) {
+        callback();
+      };
+      expect(sidebarElement.hasAttribute('open')).to.be.false;
+      impl.open_();
+      expect(sidebarElement.hasAttribute('open')).to.be.true;
+      expect(sidebarElement.style.display).to.equal('block');
+      expect(sidebarElement.getAttribute('aria-hidden')).to.equal('false');
+      const eventObj = document.createEventObject ?
+          document.createEventObject() : document.createEvent('Events');
+      if (eventObj.initEvent) {
+        eventObj.initEvent('keydown', true, true);
+      }
+
+      eventObj.keyCode = 27;
+      eventObj.which = 27;
+      const el = iframe.doc.documentElement;
+      el.dispatchEvent ?
+          el.dispatchEvent(eventObj) : el.fireEvent('onkeydown', eventObj);
+      expect(sidebarElement.hasAttribute('open')).to.be.false;
+      expect(sidebarElement.style.display).to.equal('none');
+      expect(sidebarElement.getAttribute('aria-hidden')).to.equal('true');
+    });
+  });
+
+  it('should reflect state of the sidebar', () => {
+    return getAmpSidebar().then(obj => {
+      const sidebarElement = obj.ampSidebar;
+      const impl = sidebarElement.implementation_;
+      impl.mutateElement = function(callback) {
+        callback();
+      };
+      expect(impl.isOpen_()).to.be.false;
+      impl.toggle_();
+      expect(impl.isOpen_()).to.be.true;
+      impl.toggle_();
+      expect(impl.isOpen_()).to.be.false;
+    });
+  });
 });
diff --git a/test/manual/amp-sidebar.amp.html b/test/manual/amp-sidebar.amp.html
new file mode 100644
index 000000000000..9ff65351f935
--- /dev/null
+++ b/test/manual/amp-sidebar.amp.html
@@ -0,0 +1,420 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>AMP #0</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
+  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+  <style amp-custom>
+    body {
+      margin: 0;
+      font-family: 'Georgia', Serif;
+    }
+
+    .brand-logo {
+      font-family: 'Open Sans';
+    }
+
+    .ad-container {
+      display: flex;
+      justify-content: center;
+    }
+
+    .content-container p {
+      line-height: 24px;
+    }
+
+    header,
+    .article-body {
+      padding: 15px;
+    }
+
+    .lightbox {
+      background: #222;
+    }
+
+    .full-bleed {
+      margin: 0 -15px;
+    }
+
+    .lightbox-content {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+
+      display: flex;
+      flex-direction: column;
+      flex-wrap: nowrap;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .lightbox-content p {
+      color: #fff;
+      padding: 15px;
+    }
+
+    .lightbox amp-img {
+      width: 100%;
+    }
+
+    figure {
+      margin: 0;
+    }
+
+    figcaption {
+      color: #6f757a;
+      padding: 15px 0;
+      font-size: .9em;
+    }
+
+    .author {
+      display: flex;
+      align-items: center;
+
+      background: #f4f4f4;
+      padding: 0 15px;
+
+      font-size: .8em;
+
+      border: solid #dcdcdc;
+      border-width: 1px 0;
+    }
+
+    .header-time {
+      color: #a8a3ae;
+      font-family: 'Roboto';
+      font-size: 12px;
+    }
+
+    .author p {
+      margin: 5px;
+    }
+
+    .byline {
+      font-family: 'Roboto';
+      display: inline-block;
+    }
+
+    .byline p {
+      line-height: normal;
+    }
+
+    .byline .brand {
+      color: #6f757a;
+    }
+
+    .standfirst {
+      color: #6f757a;
+    }
+
+    .mailto {
+      text-decoration: none;
+    }
+
+    #author-avatar {
+      margin: 10px;
+      border: 5px solid #fff;
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+    }
+
+    h1 {
+      margin: 5px 0;
+      font-weight: normal;
+    }
+
+    footer {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 226px;
+      background: #f4f4f4;
+    }
+
+    hr {
+      margin: 0;
+    }
+
+    amp-img {
+      background-color: #f4f4f4;
+    }
+    amp-sidebar ul {
+      list-style: none;
+    }
+    amp-sidebar li {
+      cursor: pointer;
+      height: 30px;
+    }
+    .hamburger{
+      width: 30px;
+      height: 15px;
+      display:block;
+      cursor: pointer;
+      border: 5px solid #000;
+      border-width: 5px 0;
+      position: fixed;
+      top: 0;
+      right: 0;
+    }
+    .hamburger:before {
+      display: block;
+      content: '';
+      border-top: 5px solid #000;
+      margin-top: 5px;
+      height: 5px;
+      width: 30px;
+      cursor: pointer;
+    }
+
+    amp-sidebar {
+      width: 50vw;
+    }
+  </style>
+  <script async src="../../dist/amp.js"></script>
+  <script async custom-element="amp-youtube" src="../../dist/v0/amp-accordion-0.1.max.js"></script>
+  <script async custom-element="amp-youtube" src="../../dist/v0/amp-sidebar-0.1.max.js"></script>
+  <script async custom-element="amp-youtube" src="../../dist/v0/amp-youtube-0.1.max.js"></script>
+  <script src="../../dist/v0/amp-lightbox-0.1.js"></script>
+
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+  <amp-sidebar id="sidebar1" layout="nodisplay">
+    <ul>
+      <li> Nav item 1</li>
+      <li> Nav item 2</li>
+      <li> Nav item 3</li>
+      <li> Nav item 4</li>
+      <li> Nav item 5</li>
+      <li> Nav item 6</li>
+      <li> Nav item 7</li>
+      <li> Nav item 8</li>
+      <li> Nav item 9</li>
+      <li> Nav item 10</li>
+      <li> Nav item 11</li>
+      <li> Nav item 12</li>
+      <li> Nav item 13</li>
+      <li> Nav item 14</li>
+      <li> Nav item 15</li>
+      <li> Nav item 16</li>
+      <li> Nav item 17</li>
+      <li> Nav item 18</li>
+      <li> Nav item 19</li>
+      <li> <a href="http://abcnews.go.com/">Google</a></li>
+      <li> <a href="http://www.wsj.com">WSJ</a></li>
+      <li on="tap:sidebar1.close"> Close</li>
+    </ul>
+    <amp-accordion>
+      <section>
+        <h2>Menu</h2>
+        <ul>
+          <li> Sub menu1 </li>
+          <li> Sub menu2 </li>
+        </ul>
+      </section>
+      <section>
+        <h2>Menu</h2>
+        <ul>
+          <li> Sub menu1 </li>
+          <li> Sub menu2 </li>
+        </ul>
+      </section>
+      <section>
+        <h2>Menu</h2>
+        <ul>
+          <li> Sub menu1 </li>
+          <li> Sub menu2 </li>
+        </ul>
+      </section>
+    </amp-accordion>
+  </amp-sidebar>
+  <h1>AMP #0</h1>
+  <div class="hamburger" on='tap:sidebar1.toggle'></div>
+  <amp-accordion>
+    <section>
+      <h2>Section 1</h2>
+      <div>
+        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
+      </div>
+    </section>
+    <section>
+      <h2>Section 2</h2>
+      <div>
+        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
+      </div>
+    </section>
+    <section>
+      <h2>Section 3</h2>
+      <div>
+        <amp-img id="img1" srcset="https://lh4.googleusercontent.com/kDqWeHQ0Zt-UFeHAlc2ydE9AwK7W-kbMXBqyuNvPNy0mNSGAP7FOVB3_1iAOdbQSsbZByErbehvvSKtnTb1L5GoYreijfKwgYwpP1eLCHyl9Am7BSpwRuBABOAO12PtyPBTirdAadnxOmfq9dH_rsLSTaYGmNz1D5QIwXeWd8UeDNUQ3f-cMgvkq4ePqmKoe9t5ySqqLMZs-v3wTi2pd4jV_CurzcMB76k_b4lyD5w77NUowkSaQfscYVQpkDjo6OgG2nBiKJ2TITWVDu2rvt6NuEoOD9xaHgXuv81OnOjXCokxZd5K6TZiAH-Qm1jTKGMANklXiXt6hbwrN3QPA1mq2FardxGNLj1_oqOpXaqfUuj8LvejFRY6zJMGq0r6S_TEtPvbyulIg4PkKPIaVzi5nVdGrAWWoesWh-ORqmxZ4FIhdbd_Igsdh5AcMETBcZz3l5-IX0hmnyUeT5IOPSGw-p3Esgp_abwWB9-kElEiiHPD4QuQ_swsRu0NSFwfRi_QefnJQJ5UATng6iVP3K0g7uumHcwLtFId0vCeHp4A=w1024-h768-no" width=512 height=344></amp-img>
+      </div>
+    </section>
+  </amp-accordion>
+  <amp-youtube data-videoid="mGENRKrdoGY" width="480" height="270">
+  </amp-youtube>
+  <article>
+    <figure>
+      <amp-img
+          srcset="
+              https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h1114-no/PANO_20150726_171347%257E2.jpg 2004w,
+              https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w1002-h557-no/PANO_20150726_171347%257E2.jpg 1002w"
+          layout="responsive" width="360" placeholder
+          alt="Curabitur convallis, urna quis pulvinar feugiat, purus diam posuere turpis, sit amet tincidunt purus justo et mi."
+          height="216" on="tap:headline-img-lightbox">
+      </amp-img>
+    </figure>
+
+    <amp-lightbox id="headline-img-lightbox" class="lightbox"
+        layout="nodisplay">
+
+      <div class="lightbox-content">
+        <amp-img id="floating-headline-img"
+            srcset="
+                https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h1114-no/PANO_20150726_171347%257E2.jpg 2004w,
+                https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w1002-h557-no/PANO_20150726_171347%257E2.jpg 1002w"
+            placeholder
+            width="360" height="216" layout="responsive">
+        </amp-img>
+        <p>
+          Fusce pretium tempor justo, vitae consequat dolor maximus eget.
+        </p>
+      </div>
+    </amp-lightbox>
+
+    <div class="content-container">
+      <header>
+        <h1 itemprop="headline">Lorem Ipsum</h1>
+        <time class="header-time" itemprop="datePublished"
+            datetime="2015-09-14 13:00">September 14, 2015</time>
+        <p class="standfirst">
+          Fusce pretium tempor justo, vitae consequat dolor maximus eget.
+        </p>
+      </header>
+
+      <div class="author">
+        <div class="byline">
+          <p>
+            by <span itemscope itemtype="http://schema.org/Person"
+            itemprop="author"><b>Lorem Ipsum</b>
+            <a class="mailto" href="mailto:lorem.ipsum@">
+            lorem.ipsum@</a></span>
+          </p>
+          <p class="brand">PublisherName News Reporter<p>
+        </div>
+      </div>
+      <div class="article-body" itemprop="articleBody">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus
+          luctus nunc ut elit cursus, et imperdiet diam vehicula.
+          Duis et nisi sed urna blandit bibendum et sit amet erat.
+          Suspendisse potenti. Curabitur consequat volutpat arcu nec
+          elementum. Etiam a turpis ac libero varius condimentum.
+          Maecenas sollicitudin felis aliquam tortor vulputate,
+          ac posuere velit semper.
+        </p>
+        <p>
+          Fusce pretium tempor justo, vitae consequat dolor maximus eget.
+          Aliquam iaculis tincidunt quam sed maximus. Suspendisse faucibus
+          ornare sodales. Nullam id dolor vitae arcu consequat ornare a
+          et lectus. Sed tempus eget enim eget lobortis.
+          Mauris sem est, accumsan sed tincidunt ut, sagittis vel arcu.
+          Nullam in libero nisi.
+        </p>
+
+        <div class="ad-container">
+          <amp-ad width=300 height=250
+              type="a9"
+              data-aax_size="300x250"
+              data-aax_pubname="abc123"
+              data-aax_src="302">
+          </amp-ad>
+        </div>
+
+        <p>
+          Sed pharetra semper fringilla. Nulla fringilla, neque eget
+          varius suscipit, mi turpis congue odio, quis dignissim nisi
+          nulla at erat. Duis non nibh vel erat vehicula hendrerit eget
+          vel velit. Donec congue augue magna, nec eleifend dui porttitor
+          sed. Cras orci quam, dignissim nec elementum ac, bibendum et purus.
+          Ut elementum mi eget felis ultrices tempus. Maecenas nec sodales
+          ex. Phasellus ultrices, purus non egestas ullamcorper, felis
+          lorem ultrices nibh, in tristique mauris justo sed ante.
+          Nunc commodo purus feugiat metus bibendum consequat. Duis
+          finibus urna ut ligula auctor, sed vehicula ex aliquam.
+          Sed sed augue auctor, porta turpis ultrices, cursus diam.
+          In venenatis aliquet porta. Sed volutpat fermentum quam,
+          ac molestie nulla porttitor ac. Donec porta risus ut enim
+          pellentesque, id placerat elit ornare.
+        </p>
+        <p>
+          Curabitur convallis, urna quis pulvinar feugiat, purus diam
+          posuere turpis, sit amet tincidunt purus justo et mi. Donec
+          sapien urna, aliquam ut lacinia quis, varius vitae ex.
+          Maecenas efficitur iaculis lorem, at imperdiet orci viverra
+          in. Nullam eu erat eu metus ultrices viverra a sit amet leo.
+          Pellentesque est felis, pulvinar mollis sollicitudin et,
+          suscipit eget massa. Nunc bibendum non nunc et consequat.
+          Quisque auctor est vel leo faucibus, non faucibus magna ultricies.
+          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+          posuere cubilia Curae; Vestibulum tortor lacus, bibendum et
+          enim eu, vehicula placerat erat. Nullam gravida rhoncus accumsan.
+          Integer suscipit iaculis elit nec mollis. Vestibulum eget arcu
+          nec lectus finibus rutrum vel sed orci.
+        </p>
+
+        <figure>
+          <amp-img class="full-bleed" placeholder
+              srcset="
+                  https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w2004-h1114-no/PANO_20150726_171347%257E2.jpg 2004w,
+                  https://lh4.googleusercontent.com/-okOlNNHeoOc/VbYyrlFYFII/AAAAAAABYdA/La-3j3c-QQI/w1002-h557-no/PANO_20150726_171347%257E2.jpg 1002w"
+              layout="responsive" width="360"
+              alt="Fusce pretium tempor justo, vitae consequat dolor maximus eget."
+              height="216">
+          </amp-img>
+          <figcaption>
+            Fusce pretium tempor justo, vitae consequat dolor maximus eget.
+          </figcaption>
+        </figure>
+        <hr>
+
+        <p>
+          Cum sociis natoque penatibus et magnis dis parturient montes,
+          nascetur ridiculus mus. Nulla et viverra turpis. Fusce
+          viverra enim eget elit blandit, in finibus enim blandit. Integer
+          fermentum eleifend felis non posuere. In vulputate et metus at
+          aliquam. Praesent a varius est. Quisque et tincidunt nisi.
+          Nam porta urna at turpis lacinia, sit amet mattis eros elementum.
+          Etiam vel mauris mattis, dignissim tortor in, pulvinar arcu.
+          In molestie sem elit, tincidunt venenatis tortor aliquet sodales.
+          Ut elementum velit fermentum felis volutpat sodales in non libero.
+          Aliquam erat volutpat.
+        </p>
+
+        <div class="ad-container">
+          <amp-ad width=300 height=200
+              type="adsense"
+              data-ad-client="ca-pub-9350112648257122">
+          </amp-ad>
+        </div>
+
+        <p>
+          Morbi at velit vitae eros congue congue venenatis non dui.
+          Sed lacus sem, feugiat sed elementum sed, maximus sed lacus.
+          Integer accumsan magna in sagittis pharetra. Class aptent taciti
+          sociosqu ad litora torquent per conubia nostra, per inceptos
+          himenaeos. Suspendisse ac nisl efficitur ligula aliquam lacinia
+          eu in magna. Vestibulum non felis odio. Ut consectetur venenatis
+          felis aliquet maximus. Class aptent taciti sociosqu ad litora
+          torquent per conubia nostra, per inceptos himenaeos.
+        </p>
+      </div>
+    </div>
+  </article>
+</body>
+</html>