styleguide.html

---
layout: layout.njk
skipHero: true
---

<div class="sg-c">
	<h1>Style Guide</h1>

	<h2>Colors</h2>
	<div class="sg-component">
		<span class="icon yellow"></span>
		<span class="icon dark-gray"></span>
		<span class="icon dark-gray-b"></span>
	</div>
	
	<h2>Primary Buttons</h2>
	<!-- <div class="sg-component">
		<a href="https://register.nejsconf.com/" class="btn-primary">Register</a>
	</div>

	<div class="sg-component">
		<a href="https://register.nejsconf.com/" class="btn-primary">Register <span>for NEJS CONF</span></a>
	</div> -->

	<div class="sg-component">
		<h2 class="hero-register"><a href="https://register.nejsconf.com/" class="btn-primary btn-primary-light">Register</a></h2>
	</div>

	<div class="sg-component sg-component-dark">
		<h2 class="hero-register"><a href="https://register.nejsconf.com/" class="btn-primary">Register</a></h2>
	</div>

	<div class="sg-component">
		<h2 class="hero-register"><a href="https://register.nejsconf.com/" class="btn-primary btn-primary-light">Register <span>for NEJS CONF</span></a></h2>
	</div>

	<div class="sg-component sg-component-dark">
		<h2 class="hero-register"><a href="https://register.nejsconf.com/" class="btn-primary">Register <span>for NEJS CONF</span></a></h2>
	</div>

	<h2>Icons</h2>

	<div class="sg-component">
		<span class="icon icon-moon"></span>
		<span class="icon icon-telescope"></span>
		<span class="icon icon-twitter" aria-label="Twitter"></span>
		<span class="icon icon-twitter-active" aria-label="Twitter"></span>
		<span class="icon icon-facebook" aria-label="Facebook"></span>
		<span class="icon icon-facebook-active" aria-label="Facebook"></span>
	</div>

	<h3>Block Icon</h3>
	<div class="sg-component">
		<a href="https://twitter.com/nejsconf" class="icon icon-block icon-twitter" aria-label="Twitter"></a>
	</div>

	<h2>Grouping Header</h2>

	<div class="sg-component">
		<h2 class="group-hed">Speakers</h2>
		<h2 class="group-hed group-hed-r">Schedule</h2>
		<h2 class="group-hed">Venue</h2>
	</div>

	<h2>Hero</h2>

	<h3>Space Background</h3>

	<div class="sg-component">
		<div style="height: 300px;" class="hero"></div>
	</div>

	<h3>Image</h3>

	<div class="sg-component">
		<div class="hero-img" style="height: 300px"></div>
	</div>

	<h3>Overlay</h3>

	<h3>Combination (Full Size)</h3>

	<div class="sg-component-full">
		{% include "components/hero.njk" %}
	</div>

	<h3>Combination (Shorter Height for Registration Page)</h3>

	<div class="sg-component-full">
		{% include "components/hero-sm.njk" %}
	</div>

	<h2>Hero Quote</h2>

	<div class="sg-component">
		<div class="hero-quote-c">
			<p class="hero-quote icon icon-moon">NEJS CONF is a single day, single track conference dedicated to Web Development and JavaScript.</p>
		</div>
	</div>

	<div class="sg-component">
		<div class="hero-quote-c">
			<div class="hero-quote icon icon-telescope">
				<p>The 300-seat capacity Suzanne and Walter Scott Recital Hall in the <a href="https://omahaperformingarts.org/our-venues/holland">Holland Performing Arts Center</a> makes every event feel casually sophisticated, with incredible black box acoustics and unique lighting options.</p>
			</div>
		</div>
	</div>

	<div class="sg-component">
		<div class="hero-quote-c">
			<div class="hero-quote">
				<h3>Code of Conduct</h3>
				<p>We want a safe environment for all of our staff, speakers, sponsors, and attendees. All conference participants must abide by our <a href="#">Code of Conduct</a>.</p>
			</div>
		</div>
	</div>

	<h2>Highlight</h2>

	<h3>in an Info Block</h3>
	<div class="sg-component">
		<h2 class="info-highlight">Omaha, Nebraska</h2>
		<p>Paragraph text</p>
	</div>

	<h3>Schedule Date</h3>
	<div class="sg-component">
		<h2 class="info-highlight info-highlight-b">July 27</h2>
		<p>Paragraph text</p>
	</div>
	

	<h2>Info Blocks</h2>

	<h3>Info Block (Single)</h3>
	<div class="sg-component">
		<div class="info-block">
			<h2 class="info-highlight">Omaha, Nebraska</h2>
			<p>Paragraph text</p>
		</div>
	</div>

	<h3>Info Block Group</h3>
	<p>All blocks in the same row should have the same height.</p>
	<div class="sg-component">
		<div class="info-block-group">
			<div class="info-block">
				<h2 class="info-highlight">Omaha, Nebraska</h2>
				<p>Paragraph text</p>
			</div>
			<div class="info-block">
				<h2 class="info-highlight">Omaha, Nebraska</h2>
				<p>Longer paragraph text. Longer paragraph text. Longer paragraph text. Longer paragraph text. Longer paragraph text. Longer paragraph text. Longer paragraph text. Longer paragraph text. Longer paragraph text. </p>
			</div>
		</div>
	</div>

	<h3>Info Block Group (Background Images)</h3>
	<div class="sg-component">
		<div class="info-block-group">
			<div class="info-block info-block-spacewalk lazy">
				<h2 class="info-highlight">Omaha, Nebraska</h2>
				<p>Paragraph text. <a href="#">This is a link.</a></p>
			</div>
			<div class="info-block info-block-moon lazy">
				<h2 class="info-highlight">Conference Passes Include:</h2>
				<p>Longer paragraph text. Longer paragraph text. Longer paragraph text. Longer paragraph text. Longer paragraph text. Longer paragraph text. Longer paragraph text. Longer paragraph text. Longer paragraph text. </p>
			</div>
		</div>
	</div>

	<h2>Venue Image</h2>
	<div class="sg-component-full">
		{% include "components/venue.njk" %}
	</div>

	<h2>Sponsors Grid</h2>
	<div class="sg-component">
		{% include "components/sponsors.njk" %}
	</div>

	<h2>Speakers</h2>
	<h3>Speaker Block</h3>
	<div class="sg-component">
		<a href="#" class="speaker">
			<img src="/assets/img/speakers/zachleat.png" alt="Zach Leatherman" class="speaker-img">
			<h2 class="speaker-name">Zach Leatherman</h2>
			<p class="speaker-talk">Ugh, how much can this dude talk about Web Fonts? (This is not a real talk—just a sample for the Style Guide)</p>
		</a>
	</div>

	<h3>Speakers Grid</h3>
	<div class="sg-component">
		{% include "components/speakers.njk" %}
	</div>

	<h2>Schedule</h2>
	<div class="sg-component">
		{% include "components/schedule.njk" %}
	</div>
</div>
<div style="height: 800px"></div>