This will be replaced by an automatically generated TOC when using Markdown formatting.
Default Box
{% # ::nomarkdown %}
{% include box.html type="start" title="Standard header" %}
{% # :/ %}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem laudantium, molestias perspiciatis corporis aspernatur earum quibusdam, sequi, error pariatur delectus accusantium, cum! Maxime ad, eos ea. Ab labore aliquam quam!
{% # ::nomarkdown %}
{% include box.html type="end" %}
{% # :/ %}
Rendered Output
HTML output (DO NOT USE)
<aside class="box"><header class="box-h ">Standard header</header><div class="box-i">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem laudantium, molestias perspiciatis corporis aspernatur earum quibusdam, sequi, error pariatur delectus accusantium, cum! Maxime ad, eos ea. Ab labore aliquam quam!
</div></aside>
Simple Box
{% # ::nomarkdown %}
{% include box.html type="start" title="Status: Draft" class="simple" %}
{% # :/ %}
This is an in-progress, unapproved draft.
{% # ::nomarkdown %}
{% include box.html type="end" %}
{% # :/ %}
Rendered Output
HTML output (DO NOT USE)
<aside class="box box-simple"><header class="box-h box-h-simple">Status: Draft</header><div class="box-i">
This is an in-progress, unapproved draft.
</div></aside>
Large Header
{% # ::nomarkdown %}
{% include box.html type="start" title="Standard header" %}
{% # :/ %}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem laudantium, molestias perspiciatis corporis aspernatur earum quibusdam, sequi, error pariatur delectus accusantium, cum! Maxime ad, eos ea. Ab labore aliquam quam!
{% # ::nomarkdown %}
{% include box.html type="end" %}
{% # :/ %}
Rendered Output
HTML output (DO NOT USE)
<aside class="box"><header class="box-h ">Standard header</header><div class="box-i">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem laudantium, molestias perspiciatis corporis aspernatur earum quibusdam, sequi, error pariatur delectus accusantium, cum! Maxime ad, eos ea. Ab labore aliquam quam!
</div></aside>
Large header w/ Icon
{% # ::nomarkdown %}
{% include box.html type="start" title="Large header w/ Icon" icon="warning" %}
{% # :/ %}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem laudantium, molestias perspiciatis corporis aspernatur earum quibusdam, sequi, error pariatur delectus accusantium, cum! Maxime ad, eos ea. Ab labore aliquam quam!
{% # ::nomarkdown %}
{% include box.html type="end" %}
{% # :/ %}
Rendered Output
HTML output (DO NOT USE)
<aside class="box"><header class="box-h box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-warning "><use xlink:href="/eleventy-plugin-wai-website-theme/assets/images/icons.svg#icon-warning"></use></svg>Large header w/ Icon</header><div class="box-i">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem laudantium, molestias perspiciatis corporis aspernatur earum quibusdam, sequi, error pariatur delectus accusantium, cum! Maxime ad, eos ea. Ab labore aliquam quam!
</div></aside>
{% # ::nomarkdown %}
{% include box.html type="start" title="Help improve this page" class="icon" icon="comments" %}
{% # :/ %}
<p>Please share your ideas, suggestions, or comments via email to the publicly-archived list <a href="#">wai-eo-editors@w3.org</a> or via GitHub.</p>
<div class="button-group">
<button class="button" type="submit"><span>Email</span></button>
<button class="button" type="submit"><span>Fork & Edit on GitHub</span></button>
<button class="button" type="submit"><span>List of GitHub Issues</span></button>
<button class="button" type="submit"><span>New GitHub Issue</span></button>
</div>
{% # ::nomarkdown %}
{% include box.html type="end" %}
{% # :/ %}
Rendered Output
HTML output (DO NOT USE)
<aside class="box box-icon"><header class="box-h box-h-icon box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-comments "><use xlink:href="/eleventy-plugin-wai-website-theme/assets/images/icons.svg#icon-comments"></use></svg>Help improve this page</header><div class="box-i">
<p>Please share your ideas, suggestions, or comments via email to the publicly-archived list <a href="#">wai-eo-editors@w3.org</a> or via GitHub.</p>
<div class="button-group">
<button class="button" type="submit"><span>Email</span></button>
<button class="button" type="submit"><span>Fork & Edit on GitHub</span></button>
<button class="button" type="submit"><span>List of GitHub Issues</span></button>
<button class="button" type="submit"><span>New GitHub Issue</span></button>
</div>
</div></aside>
Small box, floating right
{% # ::nomarkdown %}
{% include box.html type="start" title="More info" class="simple right aside" %}
{% # :/ %}
When you want to learn more about how different disabilities affect Web use, and read about scenarios of people with disabilities using the Web, see [How People with Disabilities Use the Web](https://w3.org/WAI/).
{% # ::nomarkdown %}
{% include box.html type="end" %}
{% # :/ %}
Rendered Output
HTML output (DO NOT USE)
<aside class="box box-simple box-right box-aside"><header class="box-h box-h-simple box-h-right box-h-aside">More info</header><div class="box-i">
When you want to learn more about how different disabilities affect Web use, and read about scenarios of people with disabilities using the Web, see [How People with Disabilities Use the Web](https://w3.org/WAI/).
</div></aside>
Highlighted Box
{% # ::nomarkdown %}
{% include box.html type="start" title="Highlighted" class="highlighted" %}
{% # :/ %}
When you want to learn more about how different disabilities affect Web use, and read about scenarios of people with disabilities using the Web, see [How People with Disabilities Use the Web](https://w3.org/WAI/).
{% # ::nomarkdown %}
{% include box.html type="end" %}
{% # :/ %}
Rendered Output
HTML output (DO NOT USE)
<aside class="box box-highlighted"><header class="box-h box-h-highlighted">Highlighted</header><div class="box-i">
When you want to learn more about how different disabilities affect Web use, and read about scenarios of people with disabilities using the Web, see [How People with Disabilities Use the Web](https://w3.org/WAI/).
</div></aside>
Specify Heading Level
{% # ::nomarkdown %}
{% include box.html type="start" title="This is a heading level 4" h="4" %}
{% # :/ %}
When you want to learn more about how different disabilities affect Web use, and read about scenarios of people with disabilities using the Web, see [How People with Disabilities Use the Web](https://w3.org/WAI/).
{% # ::nomarkdown %}
{% include box.html type="end" %}
{% # :/ %}
Rendered Output
HTML output (DO NOT USE)
<aside class="box"><header class="box-h "> <h4>This is a heading level 4 </h4></header><div class="box-i">
When you want to learn more about how different disabilities affect Web use, and read about scenarios of people with disabilities using the Web, see [How People with Disabilities Use the Web](https://w3.org/WAI/).
</div></aside>