materialize-css/jade/page-contents/chips_content.html

Builds Materialize distribution packages

<div class="container">
  <div class="row">

    <div class="col s12 m9 l10">

      <div id="introduction" class="section scrollspy">
        <h4>Introduction</h4>
        <p class="caption">
          Collapsibles can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.
        </p>
        <div class="chip">
          <img src="images/yuna.jpg" alt="Contact Person">
          Jane Doe
        </div>
        <div class="chip">
          Tag
          <i class="material-icons">close</i>
        </div>
      </div>

      <div id="contact" class="section scrollspy">
        <h4>Contacts</h4>
         <p class="caption">
          To create a contact chip just add an img inside.
        </p>
        <pre><code class="language-markup">
  &lt;div class="chip">
    &lt;img src="images/yuna.jpg" alt="Contact Person">
    Jane Doe
  &lt;/div>
        </code></pre>
      </div>

      <div id="tag" class="section scrollspy">
        <h4>Tags</h4>
         <p class="caption">
          To create a tag chip just add an close icon inside.
        </p>
        <pre><code class="language-markup">
  &lt;div class="chip">
    Tag
    &lt;i class="material-icons">close&lt;/i>
  &lt;/div>
        </code></pre>
      </div>

    </div>


    <!-- Table of Contents -->
    <div class="col hide-on-small-only m3 l2">
      <div class="toc-wrapper">
        <div class="buysellads hide-on-small-only">
          <!-- CarbonAds Zone Code -->
          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
        </div>
        <div style="height: 1px;">
          <ul class="section table-of-contents">
            <li><a href="#contact">Contacts</a></li>
            <li><a href="#tag">Tags</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>