---
layout: default
title: Modules
permalink: /modules/
---

<div class="bordered-bottom bordered-light
  pt-5 pt-md-6
  pb-4 pb-md-5
  mb-5 mb-md-5">
<div class="container-fluid">
  <div class="row">
    <div class="
      col-sm-7 col-sm-offset-3
      col-lg-6 col-lg-offset-2
      readable-line
    ">
      <h1 class="domd mb-3">Modules</h1>

      <p>
        Modules are content blocks built up of atoms.
      </p>
    </div><!-- /col -->
  </div><!-- /row -->
</div><!-- /container -->
</div>


<div class="container-fluid">

  <div class="row">

    <div class="
      col-sm-3
      col-md-3
      col-lg-2
      sticky
    ">
        <div class="row">
          <div class="col-sm-12 mt-5">
            <h5 class="mb-2">Module Types:</h5>
            <ul>
              {% for page in site.modules %}
                <li class="small"><a href="#{{ page.title }}">{{ page.title }}</a></li>
              {% endfor %}
            </ul>
            <div class="h5"><a href="#">Back to Top</a></div>

          </div><!--/col-->
        </div><!--/row-->
    </div><!-- /col -->


    <div class="
      col-sm-9
    ">

      {% for page in site.modules %}
        <div id="{{ page.title }}" class="pt-5">

          <h2 class="h5 bg-info d-inline-block p-3">{{ page.title }}</h2>

          <div class="shadow-level-3 bordered bordered-info" style="position:relative;">
                {{ page.content }}
          </div> <!-- /container -->

          <div class="py-5 bg-gray-light">
            <div class="row">
              <div class="col-xs-12">

                <div class="p-4">
                  <div class="row">

                    <div class="col-sm-12 mb-3">
                      <h3>Reference</h3>
                    </div>

                    <div class="col-sm-7">
                      <h4 class="mb-3">Markup:</h4>
                      <div class="copy-to-clipboard">
                        <div class="clipboard-content">
                          {% highlight html %} {{ page.content }} {% endhighlight %}
                        </div>
                        <div class="clipboard-init btn btn-primary mt-3">Copy to Clipboard</div>
                      </div>
                    </div><!-- /col -->

                    <div class="col-sm-5">
                      <h4 class="mb-3">View Module on it's own&nbsp;page:</h4>
                      <a href="{{ site.baseurl }}{{ page.url }}" class="btn btn-primary">Open Module</a>
                    </div><!-- /col -->

                  </div><!--/row-->
                </div><!--/shadow-->
              </div><!--/col-->

            </div><!-- /row -->
          </div><!-- /container -->

      {% endfor %}

    </div><!-- /col -->

  </div><!-- /row -->


</div><!-- /container -->



<div class="container-fluid">
  <div class="row">
    <div class="
      col-sm-7 col-sm-offset-3
      col-lg-6 col-lg-offset-3
    ">
      <h2 class="domd
        mt-5 mt-md-5
        mb-4
      ">Next Steps
      </h2>
    </div><!-- /col -->
  </div><!-- /row -->

  <div class="row">
    <div class="
      col-sm-8 col-sm-offset-3
      col-lg-6 col-lg-offset-3
    ">
      <a href="{{ site.baseurl }}/atoms/" class="
        panel-link
        link-style-clear d-block
        p-4
        mb-4
      ">
        <h3 class="h4">Atoms</h3>
        <p>The core building blocks. Think typography, colors, buttons, etc.</p>
        <div class="text-right"><span class="glyphicon glyphicon-arrow-right"></span></div>
      </a>
    </div>
  </div>
</div><!-- /container -->