AJM hero component

dls-hero.html

<section id="hero" class="row section">
  <div class="large-12 columns">
    <h1>Hero</h1>
  </div>
  <span class="gist"><a class="icon icon-ajmn-embed" href="https://gist.github.com/capitalJT/0d388ec30882f6c7b3d7" target="_blank"></a></span>
  <hr>
	<div class="large-12 columns hero-component">
		<div class="hero">
	    <h1>Hello World!</h1>
	    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
	    <a href="#" class="button">Learn more</a>
		</div>			
	</div>
</section>

dls-hero.scss

.hero{
	background-color: $color-shadow;
	padding:20px;
	h1{
		line-height: 1em;
		margin:0;
		@extend %helvetica-bold;
		@extend %h2-font-size;
	}
	@include medium-screen{
		padding:40px;
	}
	@include large-screen{
		padding:60px;
		h1{
			font-size: 7em;
		}
	}
	.button{
		margin-bottom: 0;
	}
}
.hero-component{
	@extend %margin-bottom;
}