<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Agaric</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./kss-assets/kss.css">
<link rel="stylesheet" href="../agaric/css/agaric.css">

</head>
<body id="kss-node" >

<!-- kss-sidebar -->
<div class="kss-sidebar">
    <header class="kss-sidebar__header">
        <a class="kss-link" href="index.html">
            <h1 class="kss-doc-title">Agaric</h1>
        </a>
    </header>
    <nav class="kss-nav">
        <ul class="kss-nav__menu">
                    <li class="kss-nav__menu-item">
                <a class="kss-nav__menu-link" href="section-componenet.html">
                  <!-- <span class="kss-nav__ref">1</span>  -->
                  Componenet</a>
                <!-- Design links stright to item tempplate -->
                                <ul class="kss-nav__menu-child">
                                        <li class="kss-nav__menu-item">
                                                <a class="kss-nav__menu-link" href="section-componenet.html#kssref-componenet-hero">
                                                    <!-- <span class="kss-nav__ref">1.1</span> -->
                            Hero
                        </a>
                    </li>
                                    </ul>
                            </li>
                    <li class="kss-nav__menu-item">
                <a class="kss-nav__menu-link" href="section-base.html">
                  <!-- <span class="kss-nav__ref">2</span>  -->
                  Base</a>
                <!-- Design links stright to item tempplate -->
                            </li>
                    <li class="kss-nav__menu-item">
                <a class="kss-nav__menu-link" href="section-layout.html">
                  <!-- <span class="kss-nav__ref">3</span>  -->
                  Layout</a>
                <!-- Design links stright to item tempplate -->
                            </li>
                    <li class="kss-nav__menu-item">
                <a class="kss-nav__menu-link" href="section-component.html">
                  <!-- <span class="kss-nav__ref">4</span>  -->
                  Component</a>
                <!-- Design links stright to item tempplate -->
                            </li>
                </ul>
    </nav>
</div>

<!-- kss-main -->
<div class="kss-main-wrap">
<article role="main" class="kss-main">


  <!-- Section -->
    <div id="" class="kss-section kss-section--depth-1 ">
  <a name="kssref-componenet"></a>
        <div class="kss-pattern"><!-- kss-pattern -->
          <!-- Header -->
          <div class="kss-pattern__header"><!-- kss-pattern__header -->
            <a class="kss-code-toggle" href="#componenet">Info</a>
                        <h1 class="kss-title">
                                <a class="kss-link" href="#kssref-componenet">1
                                    Componenet
                </a>
              </>
              <!-- Description -->
                          </div><!-- kss-pattern__header -->
            <!-- Parameters -->
            
                          <!-- Example -->
                                    <div id="componenet" class="kss-pattern-code"><!-- kss-pattern-code -->
            <a class="kss-code-toggle" href="#componenet">Close</a>
            <!-- Source -->
                        <!-- Markup -->
                                                </div><!-- kss-pattern-code -->
      </div><!-- kss-pattern -->

  </>


  <!-- Section -->
    <section id="" class="kss-section kss-section--depth-2 ">
  <a name="kssref-componenet-hero"></a>
        <div class="kss-pattern"><!-- kss-pattern -->
          <!-- Header -->
          <div class="kss-pattern__header"><!-- kss-pattern__header -->
            <a class="kss-code-toggle" href="#componenet-hero">Info</a>
                        <h2 class="kss-title">
                                <a class="kss-link" href="#kssref-componenet-hero">1.1
                                    Hero
                </a>
              </>
              <!-- Description -->
                              <div class="kss-description">
                  <p>Extends Bulma hero.</p>

                </div>
                          </div><!-- kss-pattern__header -->
            <!-- Parameters -->
                                          <div class="kss-parameters__title">Parameters:</div>
                <ul class="kss-parameters">
                                <li class="kss-parameters__item">
                  <div class="kss-parameters__name">
                    <code>.hero-main</code>
                  </div>
                  <div class="kss-parameters__description">
                    full image
                                      </div>
                </li>
                                                          <li class="kss-parameters__item">
                  <div class="kss-parameters__name">
                    <code>.hero-project</code>
                  </div>
                  <div class="kss-parameters__description">
                    large left image
                                      </div>
                </li>
                                                          <li class="kss-parameters__item">
                  <div class="kss-parameters__name">
                    <code>.hero-initiative</code>
                  </div>
                  <div class="kss-parameters__description">
                    medium left image
                                      </div>
                </li>
                                                          <li class="kss-parameters__item">
                  <div class="kss-parameters__name">
                    <code>.hero-person</code>
                  </div>
                  <div class="kss-parameters__description">
                    pers image with nav overlay
                                      </div>
                </li>
                                </ul>
                          
                          <!-- Example -->
                                    <div id="componenet-hero" class="kss-pattern-code"><!-- kss-pattern-code -->
            <a class="kss-code-toggle" href="#componenet-hero">Close</a>
            <!-- Source -->
                          <div class="kss-source kss-style">
                <b>Source</b><br>
                <code>agaric/_component.hero.scss</code>, line
                1
              </div>
                        <!-- Markup -->
                                                </div><!-- kss-pattern-code -->
      </div><!-- kss-pattern -->

  </>

</article>
</div>

<script src="../agaric/js/jquery-3.2.1.min.js"></script>

<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
<script>
  $(document).ready(function() {
    $(".kss-code-toggle").on("click tap", function(e) {
      e.preventDefault();
      var url = $(this).attr('href')
      var objRef = url.substring(url.indexOf('#') + 1);
      $("#" + objRef).toggleClass('active');
    });
  });
</script>
</body>
</html>