---
layout: default
title: Atoms
permalink: /atoms/
---

<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">Atoms</h1>

      <p>
        The Gentux Style Guide is based on <a href="http://getbootstrap.com">Bootstrap</a>. We extend its base functionality and add our own style. Here, that allows us to show a simplified and easier to digest sample of elements. If you'd like to see more documentation or examples, links to the relevant sections on the Bootstrap website are provided&nbsp;below.
      </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.atoms %}
                <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.atoms %}

        <div id="{{ page.title }}" class="pt-5 mb-6">

          <h2>{{ page.title }}</h2>

          <hr class="mb-sm-5">

          <div class="row">
            <div class="col-xs-11 col-xs-offset-1">
              {{ page.content }}
            </div>
          </div><!-- /row -->

        </div>

      {% 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 }}/modules/" class="
        panel-link
        link-style-clear d-block
        p-4
        mb-4
      ">
        <h3 class="h4">Modules</h3>
        <p>Componenets built up of atoms. Think navigation, hero and content sections, etc.</p>
        <div class="text-right"><span class="glyphicon glyphicon-arrow-right"></span></div>
      </a>
    </div>
  </div>
</div><!-- /container -->