@lrnwebcomponents/hax-body

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"> <title>HAX: h-a-x Demo</title> <script> window.process = window.process || { env: { NODE_ENV: "production" } }; window.WCGlobalBasePath = "/node_modules/"; </script> <script src="../../../node_modules/@lrnwebcomponents/deduping-fix/deduping-fix.js"></script> <script type="module"> import '@lrnwebcomponents/h-a-x/h-a-x.js'; import("@polymer/polymer/lib/utils/settings.js").then((esModule) => { esModule.setPassiveTouchGestures(true); }); </script> <style> body { margin: 100px;} @media screen and (max-width: 800px) { body { margin: 60px; } } </style> </head> <body> <h1>HAX Test</h1> <h-a-x app-store='{"url": "appstore.json"}' > <h2>Self-Check</h2> <dl> <dt>This is a term</dt> <dd>This is a definition</dd> <dt>This is term 2</dt> <dd>This is a definition of a 2nd thing</dd> <dt>This is term 3rd</dt> <dd>This is a definition of the third thing</dd> </dl> <section> Things and stuff are a section of tags. </section> <editable-table id="food-table" bordered condensed filter printable responsive sort striped> <table> <caption> Is it a <em>sandwich</em>? Food classification chart. </caption> <thead> <tr> <th scope="row">Food</th> <th scope="col">Enclosure</th> <th scope="col">Contents</th> <th scope="col">Orientation</th> </tr> </thead> <tbody> <tr> <th scope="row">Hamburger</th> <td>one bun, split into two</td> <td>meat, vegetables, cheese, <i>and/or</i> condiments</td> <td>horizontal</td> </tr> <tr> <th scope="row">Hoagie</th> <td>one bun</td> <td>meat, vegetables, cheese, <i>and/or</i> condiments</td> <td>vertical</td> </tr> <tr> <th scope="row">Hot Dog</th> <td>one bun</td> <td>meat, vegetables, cheese, <i>and/or</i> condiments</td> <td>vertical</td> </tr> <tr> <th scope="row">Hot Pocket</th> <td>two crusts sealed together</td> <td>meat, vegetables, cheese, <i>and/or</i> condiments</td> <td>horizontal</td> </tr> <tr> <th scope="row">Pie</th> <td>two crusts sealed together</td> <td>fruit or meat, vegetables, <i>and/or</i> cheese</td> <td>horizontal</td> </tr> <tr> <th scope="row">Taco</th> <td>one shell</td> <td>meat, vegetables, cheese, <i>and/or</i> condiments</td> <td>vertical</td> </tr> </tbody> </table> </editable-table> <p>Aenean eget nisl volutpat <lrn-math>a+b=c</lrn-math>, molestie purus eget, bibendum metus. Pellentesque magna velit, tincidunt quis pharetra id, gravida placerat erat. Maecenas id dui pretium risus pulvinar feugiat vel nec leo. Praesent non congue tellus. Suspendisse ac tincidunt purus. Donec eu dui a metus vehicula bibendum sed nec tortor. Nunc convallis justo sed nibh consectetur, at pharetra nulla accumsan.</p> <h2>Heading 2</h2> <grid-plate id="grid" layout="1-1-1-1">  <p slot="col-1"> Praesent a luctus nibh. Vestibulum purus quam, tincidunt eget consequat ut, venenatis <span>quis</span> lacus. Donec luctus aliquam ipsum quis sagittis. </p> <p slot="col-2">Bird</p> <p slot="col-2">Cat</p> <p slot="col-3">Dog</p> <p slot="col-3"><lrn-math>a+b=c</lrn-math></p> <a11y-figure close-text="Hide Aenean" open-text="Show Aenean" slot="col-4"> <figure> <img src="//placekitten.com/400/300" alt="random kitten"> <figcaption> <h4>Random Kitten</h4> <details> <summary>Aenean</summary> Aenean eget nisl volutpat, molestie purus eget, bibendum metus. Pellentesque magna velit, tincidunt quis pharetra id, gravida placerat erat. Maecenas id dui pretium risus pulvinar feugiat vel nec leo. Praesent non congue tellus. Suspendisse ac tincidunt purus. Donec eu dui a metus vehicula bibendum sed nec tortor. Nunc convallis justo sed nibh consectetur, at pharetra nulla accumsan. </details> </figcaption> </figure> </a11y-figure>  </grid-plate> <h3>Heading 3</h3> <stop-note title="Error Message" url="https://www.google.com"> <p slot="message">You can write any error message you want here.</p> </stop-note> <figure> <img src="https://picsum.photos/200/200" alt="random image"/> <figcaption><p>This is an image.</p></figcaption> </figure> <table> <caption>Table</caption> <tr><th>Test</th><td>123</td></tr> <tr><th>Testing</th><td>456</td></tr> </table>  <accent-card accent-color="cyan" accent-heading horizontal image-src="https://cdn.pixabay.com/photo/2015/08/24/12/54/banner-904887_960_720.jpg"> <h1 slot="heading">Accent Card</h1> <p slot="subheading">A card with optional accent stylings.</p> <p slot="content"> This card is highly customizable. There are a number of options for using <tt>accent-card</tt>. See documentation for more info. </p> </accent-card> <figure> <img src="https://cdn.pixabay.com/photo/2015/08/24/12/54/banner-904887_960_720.jpg"/> <figcaption>This is a nice <picture> of a cat.</picture> </figcaption> </figure>  <magazine-cover action="Touch to learn more" icon="icons:forward" image="https://cdn.pixabay.com/photo/2019/07/14/13/11/banner-4337089_960_720.jpg" header="" subheader="Use the platform!" event-data="{}"></magazine-cover> <1--<h2 id="header-0a02ffc4-e336-e988-9ceb-3b2a4ac7ab32">Cool stuff</h2> <p>testxt</p> <h3 id="specific">With id</h3> <video-player accent-color="purple" preload="auto"> <iframe src="//www.youtube.com/embed/NP0mQeLWCCo" allowfullscreen></iframe> <video><track label="English" kind="subtitles" srclang="en" src="./bueller.vtt"default></video> </video-player> <a11y-gif-player alt="It's Always Sunny in Philadelphia GIF Meme" src="https://media0.giphy.com/media/zHaPZZvl6cVHi/giphy.gif" src-without-animation="https://media0.giphy.com/media/zHaPZZvl6cVHi/480w_s.jpg" longdesc="Pepe Silvia scene from It's Always Sunny in Philadelphia. Jesus, dude, you're still making GIFs. The GIF's don't stop.".> </a11y-gif-player> <lrndesign-gallery id="gallery2" accent-color="green" dark> <figure> <img srcset="https://picsum.photos/id/1/200/200 200w, https://picsum.photos/id/1/600/800 800w, https://picsum.photos/id/1/1200/1900 800w" sizes="(max-width: 200px) 200px, (max-width: 800px) 800px, 1900px" src="https://picsum.photos/id/1/600/800" alt="A laptop"> <figcaption> <h3>Laptop</h3> <p>This is a <em>laptop</em> picture that is in <strong>portrait</strong>.</p> </figcaption> </figure> <figure sizing="contain"> <img srcset="https://picsum.photos/id/102/200/200 200w, https://picsum.photos/id/102/800/600 800w, https://picsum.photos/id/102/1900/1200 800w" sizes="(max-width: 200px) 200px, (max-width: 800px) 800px, 1900px" src="https://picsum.photos/id/102/800/600" alt="A picture of fruit."> <figcaption> <h3>Fruit</h3> <p>This is a <em>fruit</em> picture that is in <strong>landscape</strong>.</p> </figcaption> </figure> <figure> <img srcset="https://picsum.photos/id/1025/200/200 200w, https://picsum.photos/id/1025/600/600 800w, https://picsum.photos/id/1025/1200/1200 800w" sizes="(max-width: 200px) 200px, (max-width: 800px) 800px, 1900px" src="https://picsum.photos/id/1025/600/600" alt="A picture of a dog."> <figcaption> <h3>Dog</h3> <p>This is a <em>dop</em> picture that is almost a <strong>square</strong>.</p> </figcaption> </figure> </lrndesign-gallery> <h2 id="header-0a02ffc4-e336-e988-9ceb-3b2a4ac7ab32">Cool stuff</h2> <p>stuff and things2</p> <p>testxt</p> <img src="https://media0.giphy.com/media/zHaPZZvl6cVHi/480w_s.jpg" alt="dmd 100 course background art"/> <magazine-cover action="Touch to learn more" icon="icons:forward" image="https://cdn.pixabay.com/photo/2019/07/14/13/11/banner-4337089_960_720.jpg" header="" subheader="Use the platform!" event-data="{}"></magazine-cover-->  </h-a-x> </body> </html>