Skip to content

Instantly share code, notes, and snippets.

@benphelps
Last active June 26, 2016 20:07
Show Gist options
  • Save benphelps/db1be1fdc75ab2fca7805b7b643ff5ab to your computer and use it in GitHub Desktop.
Save benphelps/db1be1fdc75ab2fca7805b7b643ff5ab to your computer and use it in GitHub Desktop.
mixin features(header, desc, features)
section.feature-1
h2= header
.container
.row
h4.col-sm-10.col-sm-offset-1.text-center= desc
each feature in features
.col-sm-3.text-center
i(class="fa fa-#{feature.icon} fa-#{feature.size}")
h4= feature.title
p= feature.p
-
features = [
{ title: 'Feature title', p: 'Feature content', icon: 'beer', size: 'lg' },
{ title: 'Feature title', p: 'Feature content', icon: 'beer', size: 'lg' },
{ title: 'Feature title', p: 'Feature content', icon: 'beer', size: 'lg' }
]
+features("Header", "Description", features)
<section class="feature-1">
<h2>Header</h2>
<div class="container">
<div class="row">
<h4 class="col-sm-10 col-sm-offset-1 text-center">Description</h4>
<div class="col-sm-3 text-center">
<i class="fa fa-beer fa-lg"></i>
<h4>Feature title</h4>
<p>Feature content</p>
</div>
<div class="col-sm-3 text-center">
<i class="fa fa-beer fa-lg"></i>
<h4>Feature title</h4>
<p>Feature content</p>
</div>
<div class="col-sm-3 text-center">
<i class="fa fa-beer fa-lg"></i>
<h4>Feature title</h4>
<p>Feature content</p>
</div>
</div>
</div>
</section>
<section class="feature-1">
<h2>Header</h2>
<div class="container">
<div class="row">
<h4 class="col-sm-10 col-sm-offset-1 text-center">Description</h4>
<div class="col-sm-3 text-center">
<i class="fa fa-beer fa-lg"></i>
<h4>Feature title</h4>
<p>Feature content</p>
</div>
<div class="col-sm-3 text-center">
<i class="fa fa-beer fa-lg"></i>
<h4>Feature title</h4>
<p>Feature content</p>
</div>
<div class="col-sm-3 text-center">
<i class="fa fa-beer fa-lg"></i>
<h4>Feature title</h4>
<p>Feature content</p>
</div>
</div>
</div>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment