Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
executable file 111 lines (83 sloc) 3.2 KB
---
title: Style Guide
layout: layouts/houses.njk
layoutClass: elv-layout-full
---
<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="/resources/#static-sites">Static Sites</a></li>
<li class="list-bare-item"><a href="/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="/resources/#static-sites">Static Sites</a></li>
<li class="inlinelist-item"><a href="/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">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="/resources/#static-sites">Static Sites</a></li>
<li><a href="/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.
You can’t perform that action at this time.