Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- Markup copied directly from the CodePen Assets pop-up;
I'm not using any of the data-attributes & such. -->
<!-- only thing I changed is to make it an <ol>, so that it's clear how the items are numbered -->
<ol class="design-asset-photo-list" id="design-asset-photo-list">
  <li data-download-location="https://api.unsplash.com/photos/jJbQBP_yh68/download"><img src="https://images.unsplash.com/photo-1500408698778-2afa347782f3?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=49d78fe6c3fb87bdbaf432faf191c536" alt="" data-clipboard-text="https://images.unsplash.com/photo-1500408698778-2afa347782f3?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=eee7dbe9afa5d3d020b3dcfb4832a181"
      class="asset-copy-as trigger-unsplash-api-guideline">
    <div>By <a href="https://unsplash.com/photos/jJbQBP_yh68?utm_source=CodePen&amp;utm_medium=referral&amp;utm_campaign=api-credit">Javier  García</a><button class="asset-dropdown-arrow button mini-button button-medium editor-dropdown-button" data-dropdown="#photo-dropdown-jJbQBP_yh68"><svg class="dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-down-mini"></use></svg></button>
      <ul
        id="photo-dropdown-jJbQBP_yh68" class="link-list is-dropdown editor-dropdown" data-dropdown-position="css">
        <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="https://images.unsplash.com/photo-1500408698778-2afa347782f3?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=eee7dbe9afa5d3d020b3dcfb4832a181">Copy URL <span>(Full)</span></a></li>
        <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="https://images.unsplash.com/photo-1500408698778-2afa347782f3?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=18c0420ef2a176001e43c81b1cf3fac1">Copy URL <span>(Small)</span></a></li>
        <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="<img src='https://images.unsplash.com/photo-1500408698778-2afa347782f3?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=eee7dbe9afa5d3d020b3dcfb4832a181' alt=''>">Copy as &lt;img&gt; <span>(Full)</span></a></li>
        <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="<img src='https://images.unsplash.com/photo-1500408698778-2afa347782f3?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=18c0420ef2a176001e43c81b1cf3fac1' alt=''>">Copy as &lt;img&gt; <span>(Small)</span></a></li>
        <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="background-image: url(https://images.unsplash.com/photo-1500408698778-2afa347782f3?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=eee7dbe9afa5d3d020b3dcfb4832a181);">Copy as background <span>(Full)</span></a></li>
        <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="background-image: url(https://images.unsplash.com/photo-1500408698778-2afa347782f3?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=18c0420ef2a176001e43c81b1cf3fac1);">Copy as background <span>(small)</span></a></li>
</ul>
</div>
</li>
<li data-download-location="https://api.unsplash.com/photos/uAFjFsMS3YY/download"><img src="https://images.unsplash.com/photo-1490127252417-7c393f993ee4?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=b8631f5f77aa616ff1ee9e76ff40c50e" alt="" data-clipboard-text="https://images.unsplash.com/photo-1490127252417-7c393f993ee4?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=260b256c6cfa222b6f8b39b7cce54d0c"
    class="asset-copy-as trigger-unsplash-api-guideline">
  <div>By <a href="https://unsplash.com/photos/uAFjFsMS3YY?utm_source=CodePen&amp;utm_medium=referral&amp;utm_campaign=api-credit">Mar Newhall</a><button class="asset-dropdown-arrow button mini-button button-medium editor-dropdown-button" data-dropdown="#photo-dropdown-uAFjFsMS3YY"><svg class="dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-down-mini"></use></svg></button>
    <ul
      id="photo-dropdown-uAFjFsMS3YY" class="link-list is-dropdown editor-dropdown" data-dropdown-position="css">
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="https://images.unsplash.com/photo-1490127252417-7c393f993ee4?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=260b256c6cfa222b6f8b39b7cce54d0c">Copy URL <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="https://images.unsplash.com/photo-1490127252417-7c393f993ee4?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=9c4c6cdb948cbd08460d98a8bc5cfc19">Copy URL <span>(Small)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="<img src='https://images.unsplash.com/photo-1490127252417-7c393f993ee4?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=260b256c6cfa222b6f8b39b7cce54d0c' alt=''>">Copy as &lt;img&gt; <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="<img src='https://images.unsplash.com/photo-1490127252417-7c393f993ee4?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=9c4c6cdb948cbd08460d98a8bc5cfc19' alt=''>">Copy as &lt;img&gt; <span>(Small)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="background-image: url(https://images.unsplash.com/photo-1490127252417-7c393f993ee4?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=260b256c6cfa222b6f8b39b7cce54d0c);">Copy as background <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="background-image: url(https://images.unsplash.com/photo-1490127252417-7c393f993ee4?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=9c4c6cdb948cbd08460d98a8bc5cfc19);">Copy as background <span>(small)</span></a></li>
      </ul>
  </div>
</li>
<li data-download-location="https://api.unsplash.com/photos/6nkOlqj9Qrk/download"><img src="https://images.unsplash.com/photo-1486036413660-59d02a64e549?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=62836d538160cb1d835109dc93503862" alt="" data-clipboard-text="https://images.unsplash.com/photo-1486036413660-59d02a64e549?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=04d65bb90c530caa0e774619160331c2"
    class="asset-copy-as trigger-unsplash-api-guideline">
  <div>By <a href="https://unsplash.com/photos/6nkOlqj9Qrk?utm_source=CodePen&amp;utm_medium=referral&amp;utm_campaign=api-credit">Christopher Burns</a><button class="asset-dropdown-arrow button mini-button button-medium editor-dropdown-button" data-dropdown="#photo-dropdown-6nkOlqj9Qrk"><svg class="dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-down-mini"></use></svg></button>
    <ul
      id="photo-dropdown-6nkOlqj9Qrk" class="link-list is-dropdown editor-dropdown" data-dropdown-position="css">
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="https://images.unsplash.com/photo-1486036413660-59d02a64e549?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=04d65bb90c530caa0e774619160331c2">Copy URL <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="https://images.unsplash.com/photo-1486036413660-59d02a64e549?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=c9681c8044bb15529053090b605e92e7">Copy URL <span>(Small)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="<img src='https://images.unsplash.com/photo-1486036413660-59d02a64e549?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=04d65bb90c530caa0e774619160331c2' alt=''>">Copy as &lt;img&gt; <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="<img src='https://images.unsplash.com/photo-1486036413660-59d02a64e549?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=c9681c8044bb15529053090b605e92e7' alt=''>">Copy as &lt;img&gt; <span>(Small)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="background-image: url(https://images.unsplash.com/photo-1486036413660-59d02a64e549?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=04d65bb90c530caa0e774619160331c2);">Copy as background <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="background-image: url(https://images.unsplash.com/photo-1486036413660-59d02a64e549?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=c9681c8044bb15529053090b605e92e7);">Copy as background <span>(small)</span></a></li>
      </ul>
  </div>
</li>
<li data-download-location="https://api.unsplash.com/photos/qkVj3d0ayBc/download"><img src="https://images.unsplash.com/photo-1467353990244-fbb9633adb7f?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=c8e76c20b137eb66ead2ae9d47e5b721" alt="" data-clipboard-text="https://images.unsplash.com/photo-1467353990244-fbb9633adb7f?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=2b6705f0d1b359d6501c691bdd061839"
    class="asset-copy-as trigger-unsplash-api-guideline">
  <div>By <a href="https://unsplash.com/photos/qkVj3d0ayBc?utm_source=CodePen&amp;utm_medium=referral&amp;utm_campaign=api-credit">Filios Sazeides</a><button class="asset-dropdown-arrow button mini-button button-medium editor-dropdown-button" data-dropdown="#photo-dropdown-qkVj3d0ayBc"><svg class="dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-down-mini"></use></svg></button>
    <ul
      id="photo-dropdown-qkVj3d0ayBc" class="link-list is-dropdown editor-dropdown" data-dropdown-position="css">
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="https://images.unsplash.com/photo-1467353990244-fbb9633adb7f?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=2b6705f0d1b359d6501c691bdd061839">Copy URL <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="https://images.unsplash.com/photo-1467353990244-fbb9633adb7f?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=b4742ea6b3f376c8bee0d378ed4091c5">Copy URL <span>(Small)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="<img src='https://images.unsplash.com/photo-1467353990244-fbb9633adb7f?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=2b6705f0d1b359d6501c691bdd061839' alt=''>">Copy as &lt;img&gt; <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="<img src='https://images.unsplash.com/photo-1467353990244-fbb9633adb7f?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=b4742ea6b3f376c8bee0d378ed4091c5' alt=''>">Copy as &lt;img&gt; <span>(Small)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="background-image: url(https://images.unsplash.com/photo-1467353990244-fbb9633adb7f?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=2b6705f0d1b359d6501c691bdd061839);">Copy as background <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="background-image: url(https://images.unsplash.com/photo-1467353990244-fbb9633adb7f?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=b4742ea6b3f376c8bee0d378ed4091c5);">Copy as background <span>(small)</span></a></li>
      </ul>
  </div>
</li>
<li data-download-location="https://api.unsplash.com/photos/1OIs7FPS2q8/download"><img src="https://images.unsplash.com/photo-1508595792322-735ae2ca7000?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=cec754e799a1db4b843a853d183e76aa" alt="" data-clipboard-text="https://images.unsplash.com/photo-1508595792322-735ae2ca7000?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=f11a09d492e8c16c5390db4b932bf7a3"
    class="asset-copy-as trigger-unsplash-api-guideline">
  <div>By <a href="https://unsplash.com/photos/1OIs7FPS2q8?utm_source=CodePen&amp;utm_medium=referral&amp;utm_campaign=api-credit">Daniel van den Berg</a><button class="asset-dropdown-arrow button mini-button button-medium editor-dropdown-button" data-dropdown="#photo-dropdown-1OIs7FPS2q8"><svg class="dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-down-mini"></use></svg></button>
    <ul
      id="photo-dropdown-1OIs7FPS2q8" class="link-list is-dropdown editor-dropdown" data-dropdown-position="css">
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="https://images.unsplash.com/photo-1508595792322-735ae2ca7000?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=f11a09d492e8c16c5390db4b932bf7a3">Copy URL <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="https://images.unsplash.com/photo-1508595792322-735ae2ca7000?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=9becafe0220400e76d05a240d962c40e">Copy URL <span>(Small)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="<img src='https://images.unsplash.com/photo-1508595792322-735ae2ca7000?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=f11a09d492e8c16c5390db4b932bf7a3' alt=''>">Copy as &lt;img&gt; <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="<img src='https://images.unsplash.com/photo-1508595792322-735ae2ca7000?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=9becafe0220400e76d05a240d962c40e' alt=''>">Copy as &lt;img&gt; <span>(Small)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="background-image: url(https://images.unsplash.com/photo-1508595792322-735ae2ca7000?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=f11a09d492e8c16c5390db4b932bf7a3);">Copy as background <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="background-image: url(https://images.unsplash.com/photo-1508595792322-735ae2ca7000?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=9becafe0220400e76d05a240d962c40e);">Copy as background <span>(small)</span></a></li>
      </ul>
  </div>
</li>
<li data-download-location="https://api.unsplash.com/photos/6eKIfK5ovGg/download"><img src="https://images.unsplash.com/photo-1516717100004-8b2682dd9759?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=ea3b72f351c833f16238ff0350cb7ac1" alt="" data-clipboard-text="https://images.unsplash.com/photo-1516717100004-8b2682dd9759?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=097ea69b0cd2d96af24ecf17aeda4307"
    class="asset-copy-as trigger-unsplash-api-guideline">
  <div>By <a href="https://unsplash.com/photos/6eKIfK5ovGg?utm_source=CodePen&amp;utm_medium=referral&amp;utm_campaign=api-credit">Oliver Plattner</a><button class="asset-dropdown-arrow button mini-button button-medium editor-dropdown-button" data-dropdown="#photo-dropdown-6eKIfK5ovGg"><svg class="dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-down-mini"></use></svg></button>
    <ul
      id="photo-dropdown-6eKIfK5ovGg" class="link-list is-dropdown editor-dropdown" data-dropdown-position="css">
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="https://images.unsplash.com/photo-1516717100004-8b2682dd9759?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=097ea69b0cd2d96af24ecf17aeda4307">Copy URL <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="https://images.unsplash.com/photo-1516717100004-8b2682dd9759?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=7df28b0a05b6d1d07a3e1ba1b8c78de4">Copy URL <span>(Small)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="<img src='https://images.unsplash.com/photo-1516717100004-8b2682dd9759?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=097ea69b0cd2d96af24ecf17aeda4307' alt=''>">Copy as &lt;img&gt; <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="<img src='https://images.unsplash.com/photo-1516717100004-8b2682dd9759?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=7df28b0a05b6d1d07a3e1ba1b8c78de4' alt=''>">Copy as &lt;img&gt; <span>(Small)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="background-image: url(https://images.unsplash.com/photo-1516717100004-8b2682dd9759?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=097ea69b0cd2d96af24ecf17aeda4307);">Copy as background <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="background-image: url(https://images.unsplash.com/photo-1516717100004-8b2682dd9759?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=7df28b0a05b6d1d07a3e1ba1b8c78de4);">Copy as background <span>(small)</span></a></li>
      </ul>
  </div>
</li>
<li data-download-location="https://api.unsplash.com/photos/rhKMk73CbBo/download"><img src="https://images.unsplash.com/photo-1520439490852-7086e8a1e548?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=1cf231ddc931924306da169eb56e28b2" alt="" data-clipboard-text="https://images.unsplash.com/photo-1520439490852-7086e8a1e548?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=bc970bd3ca6be1fb4500a09967fae959"
    class="asset-copy-as trigger-unsplash-api-guideline">
  <div>By <a href="https://unsplash.com/photos/rhKMk73CbBo?utm_source=CodePen&amp;utm_medium=referral&amp;utm_campaign=api-credit">Soroush Karimi</a><button class="asset-dropdown-arrow button mini-button button-medium editor-dropdown-button" data-dropdown="#photo-dropdown-rhKMk73CbBo"><svg class="dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-down-mini"></use></svg></button>
    <ul
      id="photo-dropdown-rhKMk73CbBo" class="link-list is-dropdown editor-dropdown" data-dropdown-position="css">
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="https://images.unsplash.com/photo-1520439490852-7086e8a1e548?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=bc970bd3ca6be1fb4500a09967fae959">Copy URL <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="https://images.unsplash.com/photo-1520439490852-7086e8a1e548?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=b07e2542a7d4f42e965bcdfa28e0f366">Copy URL <span>(Small)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="<img src='https://images.unsplash.com/photo-1520439490852-7086e8a1e548?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=bc970bd3ca6be1fb4500a09967fae959' alt=''>">Copy as &lt;img&gt; <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="<img src='https://images.unsplash.com/photo-1520439490852-7086e8a1e548?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=b07e2542a7d4f42e965bcdfa28e0f366' alt=''>">Copy as &lt;img&gt; <span>(Small)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="background-image: url(https://images.unsplash.com/photo-1520439490852-7086e8a1e548?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=bc970bd3ca6be1fb4500a09967fae959);">Copy as background <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="background-image: url(https://images.unsplash.com/photo-1520439490852-7086e8a1e548?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=b07e2542a7d4f42e965bcdfa28e0f366);">Copy as background <span>(small)</span></a></li>
      </ul>
  </div>
</li>
<li data-download-location="https://api.unsplash.com/photos/3qkgF8wQ9EI/download"><img src="https://images.unsplash.com/photo-1473269712320-f24ce5aa6e5d?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=3feca85c5f1079e9450615c56e82f77f" alt="" data-clipboard-text="https://images.unsplash.com/photo-1473269712320-f24ce5aa6e5d?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=d5eeb1ed9a14185271e9dbae721bd1a4"
    class="asset-copy-as trigger-unsplash-api-guideline">
  <div>By <a href="https://unsplash.com/photos/3qkgF8wQ9EI?utm_source=CodePen&amp;utm_medium=referral&amp;utm_campaign=api-credit">Kuba Boski</a><button class="asset-dropdown-arrow button mini-button button-medium editor-dropdown-button" data-dropdown="#photo-dropdown-3qkgF8wQ9EI"><svg class="dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-down-mini"></use></svg></button>
    <ul
      id="photo-dropdown-3qkgF8wQ9EI" class="link-list is-dropdown editor-dropdown" data-dropdown-position="css">
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="https://images.unsplash.com/photo-1473269712320-f24ce5aa6e5d?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=d5eeb1ed9a14185271e9dbae721bd1a4">Copy URL <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="https://images.unsplash.com/photo-1473269712320-f24ce5aa6e5d?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=ac7f0c82b7ba8edf64bb1ab3256c5f71">Copy URL <span>(Small)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="<img src='https://images.unsplash.com/photo-1473269712320-f24ce5aa6e5d?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=d5eeb1ed9a14185271e9dbae721bd1a4' alt=''>">Copy as &lt;img&gt; <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="<img src='https://images.unsplash.com/photo-1473269712320-f24ce5aa6e5d?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=ac7f0c82b7ba8edf64bb1ab3256c5f71' alt=''>">Copy as &lt;img&gt; <span>(Small)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="background-image: url(https://images.unsplash.com/photo-1473269712320-f24ce5aa6e5d?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=d5eeb1ed9a14185271e9dbae721bd1a4);">Copy as background <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="background-image: url(https://images.unsplash.com/photo-1473269712320-f24ce5aa6e5d?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=ac7f0c82b7ba8edf64bb1ab3256c5f71);">Copy as background <span>(small)</span></a></li>
      </ul>
  </div>
</li>
<li data-download-location="https://api.unsplash.com/photos/zoN_TUPs5gA/download"><img src="https://images.unsplash.com/photo-1519894877873-978b7d957c3d?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=c02b40609056b22bbca9a24530c7eddd" alt="" data-clipboard-text="https://images.unsplash.com/photo-1519894877873-978b7d957c3d?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=fdc84ef44309c3f7e69c120659441916"
    class="asset-copy-as trigger-unsplash-api-guideline">
  <div>By <a href="https://unsplash.com/photos/zoN_TUPs5gA?utm_source=CodePen&amp;utm_medium=referral&amp;utm_campaign=api-credit">rawpixel.com</a><button class="asset-dropdown-arrow button mini-button button-medium editor-dropdown-button" data-dropdown="#photo-dropdown-zoN_TUPs5gA"><svg class="dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-down-mini"></use></svg></button>
    <ul
      id="photo-dropdown-zoN_TUPs5gA" class="link-list is-dropdown editor-dropdown" data-dropdown-position="css">
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="https://images.unsplash.com/photo-1519894877873-978b7d957c3d?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=fdc84ef44309c3f7e69c120659441916">Copy URL <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="https://images.unsplash.com/photo-1519894877873-978b7d957c3d?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=17f5230bf7fd4b3eea933e1174947be1">Copy URL <span>(Small)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="<img src='https://images.unsplash.com/photo-1519894877873-978b7d957c3d?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=fdc84ef44309c3f7e69c120659441916' alt=''>">Copy as &lt;img&gt; <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="<img src='https://images.unsplash.com/photo-1519894877873-978b7d957c3d?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=17f5230bf7fd4b3eea933e1174947be1' alt=''>">Copy as &lt;img&gt; <span>(Small)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="background-image: url(https://images.unsplash.com/photo-1519894877873-978b7d957c3d?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=fdc84ef44309c3f7e69c120659441916);">Copy as background <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="background-image: url(https://images.unsplash.com/photo-1519894877873-978b7d957c3d?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=17f5230bf7fd4b3eea933e1174947be1);">Copy as background <span>(small)</span></a></li>
      </ul>
  </div>
</li>
<li data-download-location="https://api.unsplash.com/photos/kvjqj1KCJIM/download"><img src="https://images.unsplash.com/photo-1508432020590-bd69d4f6d0d1?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1080&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=12768df48aa3b0288daec8cccdd382c3" alt="" data-clipboard-text="https://images.unsplash.com/photo-1508432020590-bd69d4f6d0d1?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=552c9d46dd83cc80e05aadaea20a2621"
    class="asset-copy-as trigger-unsplash-api-guideline">
  <div>By <a href="https://unsplash.com/photos/kvjqj1KCJIM?utm_source=CodePen&amp;utm_medium=referral&amp;utm_campaign=api-credit">Annie Spratt</a><button class="asset-dropdown-arrow button mini-button button-medium editor-dropdown-button" data-dropdown="#photo-dropdown-kvjqj1KCJIM"><svg class="dropdown-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-down-mini"></use></svg></button>
    <ul
      id="photo-dropdown-kvjqj1KCJIM" class="link-list is-dropdown editor-dropdown" data-dropdown-position="css">
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="https://images.unsplash.com/photo-1508432020590-bd69d4f6d0d1?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=552c9d46dd83cc80e05aadaea20a2621">Copy URL <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="https://images.unsplash.com/photo-1508432020590-bd69d4f6d0d1?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=5d6e37a743d8bf5550988f68060ceb04">Copy URL <span>(Small)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="<img src='https://images.unsplash.com/photo-1508432020590-bd69d4f6d0d1?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=552c9d46dd83cc80e05aadaea20a2621' alt=''>">Copy as &lt;img&gt; <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="<img src='https://images.unsplash.com/photo-1508432020590-bd69d4f6d0d1?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=5d6e37a743d8bf5550988f68060ceb04' alt=''>">Copy as &lt;img&gt; <span>(Small)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="background-image: url(https://images.unsplash.com/photo-1508432020590-bd69d4f6d0d1?ixlib=rb-0.3.5&amp;q=85&amp;fm=jpg&amp;crop=entropy&amp;cs=srgb&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=552c9d46dd83cc80e05aadaea20a2621);">Copy as background <span>(Full)</span></a></li>
      <li><a href="#0" id="" class="asset-copy-as trigger-unsplash-api-guideline" data-clipboard-text="background-image: url(https://images.unsplash.com/photo-1508432020590-bd69d4f6d0d1?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjE0NTg5fQ&amp;s=5d6e37a743d8bf5550988f68060ceb04);">Copy as background <span>(small)</span></a></li>
      </ul>
  </div>
</li>
</ol>
              
            
!

CSS

              
                /* CodePen CSS is imported as assets, these are the changes */
body {
  height: auto;
  overflow: auto;
  color: royalBlue;
}

.design-asset-photo-list { 
  padding: 0;
  margin-top: 0.5rem;
  list-style: decimal-leading-zero;
  height: 130vw; /* arbitrary value that works with the content, 
                    to evenly fill the full three columns */
  align-content: space-between;
}

.design-asset-photo-list>li {
  display: list-item;
  list-style-position: inside;
  text-align: center;
  border-top: solid;
  width: 32%;
}

.design-asset-photo-list>li:nth-of-type(3n + 1) {
  order: 1;
}
.design-asset-photo-list>li:nth-of-type(3n + 2) {
  order: 2;
}
.design-asset-photo-list>li:nth-of-type(3n) {
  order: 3;
}

.design-asset-photo-list>li img {
}

              
            
!

JS

              
                
              
            
!
999px

Console