---
title: Examples
description: "One Partial, Many Possibilities"
---
<div class="page-header">
  <h1>{{title}}</h1>
  <p class="lead">{{description}}</p>
</div>


<h2>Alert example</h2>
{{> alert }}

<h2>Button example</h2>
{{> button }}

<h2>"Panels"</h2>
<p class="lead">Every "module" on this page is constructed from the same "partial", the only difference is the data supplied to each one from <code>module.json</code>.</p>
<p class="lead"> The craziest thing about this is that I didn't (really) have to massacre the partial to make it work. I took liberties for the progress bars mostly, but considering how sparse the template is I don't feel too bad about it. </p>
<section id="panels">
  <div class="row">
    <div class="span3">

      {{! Three different ways to create partials. You can establish context inside the partials, like this: }}
      {{> module module.panel-primary}}
      {{> module module.panel-info}}
      {{> module module.panel-success}}
      {{> module module.panel-warning}}
      {{> module module.panel-danger}}
      {{> module module.panel-query}}

    </div>
    <div class="span9">

      {{! or you can wrap the partials in block expressions to establish context, like this: }}
      {{#module}}
        {{> module panel-inverse}}
      {{/module}}


      {{! or you can wrap them like this }}
      {{#module.panel-base}}
        {{> module }}
      {{/module.panel-base}}


      <h3>Alerts</h3>
      {{> module module.alert-info }}
      {{> module module.alert-success }}
      {{> module module.alert-warning }}
      {{> module module.alert-danger }}
      {{> module module.alert-block }}


      <h3>Progress Bars</h3>
      <div class="well">
        {{> module module.progress-info }}
        {{> module module.progress-success }}
        {{> module module.progress-warning }}
        {{> module module.progress-danger }}
      </div>


      <div class="row">
        <div class="span6">
          {{! or like this }}
          {{#module.panel-base}}
            {{> module }}
          {{/module.panel-base}}
        </div>
        <div class="span6">
          {{! or like this }}
          {{#module.panel-base}}
            {{> module }}
          {{/module.panel-base}}
        </div>
      </div>
    </div>

    <div class="span12">

      <hr>
      <h3>Wells</h3>
      {{! and even turn it into a different module, with like this }}
      {{> module module.well}}
      {{> module module.well-alt}}
      {{> icons }}
    </div>


  </div>
</section>