styleguide.njk

---
title: 11ty.dev Style Guide
layout: layouts/docs.njk
---


<h2>Header/Footer</h2>

<h3>Home Header</h3>

<div class="elv-sg-component elv-sg-component-full">
{% set headerClass = "elv-header-default" %}
{% set title = "Home Header" %}
{% include "header.njk" %}
</div>

<h3>Docs Header</h3>

<div class="elv-sg-component elv-sg-component-full">
{% set headerClass = "elv-header-docs" %}
{% set title = "Docs Header" %}
{% include "header.njk" %}
</div>

<h3>Footer Navigation</h3>

<div class="elv-sg-component">
{% include "footer-nav.njk" %}
</div>


<h2>Lists</h2>

<div class="elv-sg-component">
<ul class="list-bare">
  <li class="list-bare-item"><a href="/docs/resources/#static-sites">Static Sites</a></li>
  <li class="list-bare-item"><a href="/docs/resources/#jamstack">JAMstack</a></li>
</ul>
</div>

<h3>Inline List</h3>

<div class="elv-sg-component">
<ul class="inlinelist">
  <li class="inlinelist-item"><a href="/docs/resources/#static-sites">Static Sites</a></li>
  <li class="inlinelist-item"><a href="/docs/resources/#jamstack">JAMstack</a></li>
</ul>
</div>

<h3>Number Flags</h3>

<div class="elv-sg-component">
<span class="numberflag">1</span>
<span class="numberflag">2</span>
<span class="numberflag">3</span>
<span class="numberflag">4</span>
<span class="numberflag">5</span>
<span class="numberflag">6</span>
<span class="numberflag">7</span>
<span class="numberflag">8</span>
<span class="numberflag">9</span>
</div>

<h4>Number Flags in Headings</h4>
<div class="elv-sg-component">
<h2><span class="numberflag"><span class="sr-only">Step</span> 1</span> Notice how the border disappears under the flag</h2>
<h3><span class="numberflag"><span class="sr-only">Step</span> 2</span> Do a thing</h3>
<h4><span class="numberflag"><span class="sr-only">Step</span> 3</span> Do a thing</h4>
<h5><span class="numberflag"><span class="sr-only">Step</span> 4</span> Do a thing</h5>
</div>

<h2>Blockquotes</h2>

<div class="elv-sg-component">
    <blockquote>“Seriously can't remember enjoying using a Static Site Generator this much. Yes Hugo is rapid, but this is all so logical. It feels like it was designed by someone who has been through lots of pain and success using other SSGs.”—<a href="https://twitter.com/philhawksworth">{% avatarlocalcache "twitter", "philhawksworth" %}Phil Hawksworth</a></blockquote>
</div>

<h2>Buzzwords</h2>

<h3>Inline Buzzwords</h3>

<div class="elv-sg-component">
<h2>This <a href="#" class="buzzword">Buzzword</a> is in a header</h2>
<h3>This <a href="#" class="buzzword">Buzzword</a> is in a header</h3>
<div><a href="#" class="buzzword">Buzzword</a></div>
<p><span class="buzzword">Buzzword</span></p>
</div>

<h3>Buzzword Lists</h3>

<div class="elv-sg-component">
<ul class="buzzword-list">
  <li><a href="/docs/resources/#static-sites">Static Sites</a></li>
  <li><a href="/docs/resources/#jamstack">JAMstack</a></li>
</ul>
</div>

<h2>Info Block</h2>

<div class="elv-sg-component">
    <div class="elv-callout">Default info message with an inline <code>Code block</code></div>
</div>

<div class="elv-sg-component">
    <div class="elv-callout elv-callout-warn">Default warning message with an inline <code>Code block</code></div>
</div>

<h3>Sticky info block</h3>

Use the <code>elv-callout-sticky</code> class to affix to the top of the viewport while scrolling.

<!-- <div class="elv-sg-component">
    <div class="elv-callout elv-callout-info">This documentation is for an upcoming version of Eleventy. Go to the <a href="https://www.11ty.dev/docs/">latest stable version of Eleventy docs</a> or check out the <a href="https://www.11ty.dev/docs/versions/">full release history.</a></div>
</div>

<div class="elv-sg-component">
    <div class="elv-callout elv-callout-warn">This documentation is for an older version. Go to the <a href="https://www.11ty.dev/docs/">newest Eleventy docs</a> or check out the <a href="https://www.11ty.dev/docs/versions/">full release history.</a></div>
</div> -->