Skip to content

Instantly share code, notes, and snippets.

@JakeBeresford
Created October 1, 2015 22:45
Show Gist options
  • Save JakeBeresford/19923edf0b37ecf28f5c to your computer and use it in GitHub Desktop.
Save JakeBeresford/19923edf0b37ecf28f5c to your computer and use it in GitHub Desktop.
<section class="template">
<!-- START 2 colum row -->
<div class="template__row">
<!-- Left column -->
<article class="template__spaced-med-50">
<h1 class="headline-title">
<!-- Article heading goes here-->
<!-- EXAMPLE FANCY BULLETED HEADING - SEE RESOURCE GUIDE FOR MORE INFO
remove this code if you are not using the bulleted style:
<i class="headline-title__large">s<span class="headline-title__mid">&bull;</span>w<span class="headline-title__mid">&bull;</span>e<span class="headline-title__mid">&bull;</span>e<span class="headline-title__mid">&bull;</span>t</i>
END EXAMPLE -->
</h1>
<p><img src="<!-- image URL -->" alt="<!-- REQUIRED: Image alt text -->" class="img-block"/></p>
<h2 class="title-3"><!-- Image figure text goes here --></h2>
<p class="bordered-text"><!-- Related content goes here --></p>
</article> <!--END Left Column -->
<!-- Right Column -->
<article class="template__spaced-med-50">
<h1 class="headline-title">
<!-- Article heading goes here-->
<!-- EXAMPLE 2 line large/small heading
remove this code if you are not using the bulleted style:
<i class="headline-title__large"> Large heading text here</i>
END EXAMPLE -->
</h1>
<p><img src="<!-- image URL -->" alt="<!-- REQUIRED: Image alt text -->" class="img-block"/></p>
<h2 class="title-3"><!-- Image figure text goes here --></h2>
<p class="bordered-text"><!-- Related content goes here --></p>
</article><!-- END Right column
<!-- END 2 colum row -->
</div>
<!-- START 2 colum row -->
<div class="template__row">
<!-- Left column -->
<article class="template__spaced-med-50">
<h1 class="headline-title">
<!-- Article heading goes here-->
<!-- EXAMPLE 2 line large/small heading with vertically centered stars
remove this code if you are not using the example styles:
<i class="headline-title__large">the</i>
D<span class="headline-title__mid">*</span>I<span class="headline-title__mid">*</span>Y
END EXAMPLE -->
</h1>
<p><img src="<!-- image URL -->" alt="<!-- REQUIRED: Image alt text -->" class="img-block"/></p>
<h2 class="title-3"><!-- Image figure text goes here --></h2>
<p class="bordered-text"><!-- Related content goes here --></p>
</article> <!-- END Left column-->
<!-- Right column -->
<article class="template__spaced-med-50">
<h1 class="headline-title"><!-- Article heading goes here--></h1>
<p><img src="<!-- image URL -->" alt="<!-- REQUIRED: Image alt text -->" class="img-block"/></p>
<h2 class="title-3"><!-- Image figure text goes here --></h2>
<p class="bordered-text"><!-- Related content goes here --></p>
</article><!-- END Right column-->
</div>
<p><a href="<!-- Button destination URL goes here -->" class="block-cta"><span class="block-cta__border"><!-- Button Text Goes here --></span></a></p>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment