Boxes

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">
<p>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!</p>

</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">
<p>This is an in-progress, unapproved draft.</p>

</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">
<p>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!</p>

</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="/assets/images/icons.svg#icon-warning"></use></svg> Large header w/ Icon</header><div class="box-i">
<p>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!</p>

</div></aside>

Link list

{::nomarkdown}
{% include box.html type="start" title="Large header w/ Icon" class="linklist large icon" %}
{:/}


* [<svg focusable="false" aria-hidden="true" class="icon-chevron-right "><use xlink:href="/assets/images/icons.svg#icon-chevron-right"></use></svg> <span class="visual-a">adaptive strategies</span>](#)
* [<svg focusable="false" aria-hidden="true" class="icon-chevron-right "><use xlink:href="/assets/images/icons.svg#icon-chevron-right"></use></svg> <span class="visual-a">adaptive strategies</span>](#)
* [<svg focusable="false" aria-hidden="true" class="icon-chevron-right "><use xlink:href="/assets/images/icons.svg#icon-chevron-right"></use></svg> <span class="visual-a">adaptive strategies</span>](#)
* [<svg focusable="false" aria-hidden="true" class="icon-chevron-right "><use xlink:href="/assets/images/icons.svg#icon-chevron-right"></use></svg> <span class="visual-a">adaptive strategies</span>](#)
* [<svg focusable="false" aria-hidden="true" class="icon-chevron-right "><use xlink:href="/assets/images/icons.svg#icon-chevron-right"></use></svg> <span class="visual-a">adaptive strategies</span>](#)
{:.linklist}


{::nomarkdown}
{% include box.html type="end" %}
{:/}

Rendered Output

HTML output (DO NOT USE)

<aside class="box box-linklist box-large box-icon"><header class="box-h  box-h-linklist box-h-large box-h-icon"> Large header w/ Icon</header><div class="box-i">

<ul class="linklist">
  <li><a href="#"><svg focusable="false" aria-hidden="true" class="icon-chevron-right "><use xlink:href="/assets/images/icons.svg#icon-chevron-right"></use></svg> <span class="visual-a">adaptive strategies</span></a></li>
  <li><a href="#"><svg focusable="false" aria-hidden="true" class="icon-chevron-right "><use xlink:href="/assets/images/icons.svg#icon-chevron-right"></use></svg> <span class="visual-a">adaptive strategies</span></a></li>
  <li><a href="#"><svg focusable="false" aria-hidden="true" class="icon-chevron-right "><use xlink:href="/assets/images/icons.svg#icon-chevron-right"></use></svg> <span class="visual-a">adaptive strategies</span></a></li>
  <li><a href="#"><svg focusable="false" aria-hidden="true" class="icon-chevron-right "><use xlink:href="/assets/images/icons.svg#icon-chevron-right"></use></svg> <span class="visual-a">adaptive strategies</span></a></li>
  <li><a href="#"><svg focusable="false" aria-hidden="true" class="icon-chevron-right "><use xlink:href="/assets/images/icons.svg#icon-chevron-right"></use></svg> <span class="visual-a">adaptive strategies</span></a></li>
</ul>

</div></aside>

Help improve this page

{::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 &amp; 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="/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 &amp; 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">
<p>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 <a href="https://w3.org/WAI/">How People with Disabilities Use the Web</a>.</p>

</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">
<p>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 <a href="https://w3.org/WAI/">How People with Disabilities Use the Web</a>.</p>

</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">
<p>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 <a href="https://w3.org/WAI/">How People with Disabilities Use the Web</a>.</p>

</div></aside>