<!DOCTYPE html>
<!--[if lte IE 6]>            <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IEMobile 7]>          <html class="no-js iem7" lang="en"> <![endif]-->
<!--[if (IE 7)&(!IEMobile)]>  <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>                <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>KSS Style Guide</title>

  <meta name="description" content="">
  <meta name="generator" content="kss-node">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="public/kss.css">
  <link rel="stylesheet" href="../../../addons/jquery/bootstrap/css/bootstrap-3.3.6.min.css">
<link rel="stylesheet" href="../../../addons/jquery/bootstrap/css/bootstrap-theme-3.3.6.min.css">
<link rel="stylesheet" href="../../../addons/jquery/swipe/style.min.css">
<link rel="stylesheet" href="../style/base.css">
<link rel="stylesheet" href="../style/lms.css">
<link rel="stylesheet" href="../static/main.min.css">

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

<div class="kss-sidebar kss-style">
  <header class="kss-header">
    <h1 class="kss-doc-title">KSS Style Guide</h1>
  </header>
  <nav class="kss-nav">
    <ul class="kss-nav__menu">
      <li class="kss-nav__menu-item">
        <a href="./">
          <span class="kss-nav__ref">0</span
          ><span class="kss-nav__name">Overview</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-1.html">
          <span class="kss-nav__ref">1</span
          ><span class="kss-nav__name">Typography</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-2.html">
          <span class="kss-nav__ref">2</span
          ><span class="kss-nav__name">Buttons</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-3.html">
          <span class="kss-nav__ref">3</span
          ><span class="kss-nav__name">Course Box</span>
        </a>
        <ul class="kss-nav__menu-child">
            <li class="kss-nav__menu-item">
              <a href="section-3.html#kssref-3-1">
                <span class="kss-nav__ref ">3.1</span
                ><span class="kss-nav__name">My courses</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-3.html#kssref-3-1">
                <span class="kss-nav__ref ">3.1</span
                ><span class="kss-nav__name">Course</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-3.html#kssref-3-2">
                <span class="kss-nav__ref ">3.2</span
                ><span class="kss-nav__name">Course Catalogue</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-3.html#kssref-3-3">
                <span class="kss-nav__ref ">3.3</span
                ><span class="kss-nav__name">Course Slider Menu</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-3.html#kssref-3-4">
                <span class="kss-nav__ref ">3.4</span
                ><span class="kss-nav__name">Course Statistic</span>
              </a>
            </li>
        </ul>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-3.html">
          <span class="kss-nav__ref">3</span
          ><span class="kss-nav__name">Section Course</span>
        </a>
        <ul class="kss-nav__menu-child">
            <li class="kss-nav__menu-item">
              <a href="section-3.html#kssref-3-1">
                <span class="kss-nav__ref ">3.1</span
                ><span class="kss-nav__name">My courses</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-3.html#kssref-3-1">
                <span class="kss-nav__ref ">3.1</span
                ><span class="kss-nav__name">Course</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-3.html#kssref-3-2">
                <span class="kss-nav__ref ">3.2</span
                ><span class="kss-nav__name">Course Catalogue</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-3.html#kssref-3-3">
                <span class="kss-nav__ref ">3.3</span
                ><span class="kss-nav__name">Course Slider Menu</span>
              </a>
            </li>
            <li class="kss-nav__menu-item">
              <a href="section-3.html#kssref-3-4">
                <span class="kss-nav__ref ">3.4</span
                ><span class="kss-nav__name">Course Statistic</span>
              </a>
            </li>
        </ul>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-4.html">
          <span class="kss-nav__ref">4</span
          ><span class="kss-nav__name">Top-bar</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-5.html">
          <span class="kss-nav__ref">5</span
          ><span class="kss-nav__name">Inputs</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-6.html">
          <span class="kss-nav__ref">6</span
          ><span class="kss-nav__name">Top-menu</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-7.html">
          <span class="kss-nav__ref">7</span
          ><span class="kss-nav__name">User Panel</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-8.html">
          <span class="kss-nav__ref">8</span
          ><span class="kss-nav__name">Aside</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-9.html">
          <span class="kss-nav__ref">9</span
          ><span class="kss-nav__name">Footer</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-10.html">
          <span class="kss-nav__ref">10</span
          ><span class="kss-nav__name">Icons</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-11.html">
          <span class="kss-nav__ref">11</span
          ><span class="kss-nav__name">Tooltip</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a href="section-12.html">
          <span class="kss-nav__ref">12</span
          ><span class="kss-nav__name">Homepage</span>
        </a>
      </li>
    </ul>
  </nav>
</div>
<article role="main" class="kss-main">

      <div     id="kssref-3" class="kss-section kss-section--depth-1">

    <div class="kss-style">
      <h1 class="kss-title kss-title--level-1">
        <a class="kss-title__permalink" href="#kssref-3">
          <span class="kss-title__ref">
              3
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          Course Box
        </a>
      </h1>


      <div class="kss-description">
        <p>These are the restyled course boxes<br /></p>

      </div>
    </div>


      </div>
      <div     id="kssref-3" class="kss-section kss-section--depth-1">

    <div class="kss-style">
      <h1 class="kss-title kss-title--level-1">
        <a class="kss-title__permalink" href="#kssref-3">
          <span class="kss-title__ref">
              3
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          Section Course
        </a>
      </h1>


      <div class="kss-description">
        <p>These are the restyled course section<br /></p>

      </div>
    </div>


      </div>
      <section id="kssref-3-1" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-3-1">
          <span class="kss-title__ref">
              3.1
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          My courses
        </a>
      </h2>


      <div class="kss-description">
        <p>This is the restyled course box used in My Courses<br />
<strong>NB: The &#39;style&#39; attributes are just for this representation only, when implementing
be sure to delete them.</strong><br /></p>

      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
           <div class="row section-coourse">
   <div class="section-coourse__header col-lg-12">
     <div class="row">
       <div class="col-sm-3 text-center">
         <div class="row">
           <img src="path/to/img" class="img-responsive section-coourse__img">
         </div>
       </div>
       <div class="col-sm-9">
       <h1 class="section-coourse__title">Lorem ipsum dolor sit amet</h1>
         <div class="section-coourse__progress-cotainer">
           <div class="progress section-coourse__progress">
             <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60%</div>
     <span class="glyphicon glyphicon-signal pull-right" aria-hidden="true"></span>
       </div>
     </div>
   </div>
 </div>
</div>
 <div class="clearfix"></div>
 <div class="section-coourse__menu">
   <div class="col-sm-3 text-center">
     <div class="row">
       <div class="col-xs-12">
           <div class="btn-group btn-flex">
               <button type="button" class="btn btn-default">Menu</button>
               <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <span class="caret"></span>
               <span class="sr-only">Toggle Dropdown</span>
               </button>
             <ul class="dropdown-menu">
               <li><a href="#" data-id="menu_id"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span> <b>Lorem ipsum dolor</b></a></li>
             </ul>
           </div>
       </div>
   </div>
 </div>
        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html"> &lt;div class=&quot;row section-coourse&quot;&gt;
   &lt;div class=&quot;section-coourse__header col-lg-12&quot;&gt;
     &lt;div class=&quot;row&quot;&gt;
       &lt;div class=&quot;col-sm-3 text-center&quot;&gt;
         &lt;div class=&quot;row&quot;&gt;
           &lt;img src=&quot;path/to/img&quot; class=&quot;img-responsive section-coourse__img&quot;&gt;
         &lt;/div&gt;
       &lt;/div&gt;
       &lt;div class=&quot;col-sm-9&quot;&gt;
       &lt;h1 class=&quot;section-coourse__title&quot;&gt;Lorem ipsum dolor sit amet&lt;/h1&gt;
         &lt;div class=&quot;section-coourse__progress-cotainer&quot;&gt;
           &lt;div class=&quot;progress section-coourse__progress&quot;&gt;
             &lt;div class=&quot;progress-bar progress-bar-warning&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 60%;&quot;&gt;60%&lt;/div&gt;
     &lt;span class=&quot;glyphicon glyphicon-signal pull-right&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
 &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;section-coourse__menu&quot;&gt;
   &lt;div class=&quot;col-sm-3 text-center&quot;&gt;
     &lt;div class=&quot;row&quot;&gt;
       &lt;div class=&quot;col-xs-12&quot;&gt;
           &lt;div class=&quot;btn-group btn-flex&quot;&gt;
               &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;Menu&lt;/button&gt;
               &lt;button type=&quot;button&quot; class=&quot;btn btn-default dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
               &lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;
               &lt;span class=&quot;sr-only&quot;&gt;Toggle Dropdown&lt;/span&gt;
               &lt;/button&gt;
             &lt;ul class=&quot;dropdown-menu&quot;&gt;
               &lt;li&gt;&lt;a href=&quot;#&quot; data-id=&quot;menu_id&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-signal&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt; &lt;b&gt;Lorem ipsum dolor&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;
           &lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;</code></pre>
      </div>

      </section>
      <section id="kssref-3-1" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-3-1">
          <span class="kss-title__ref">
              3.1
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          Course
        </a>
      </h2>


      <div class="kss-description">
        <p>This is the restyled course section<br />
<strong>NB: The &#39;style&#39; attributes are just for this representation only, when implementing
be sure to delete them.</strong><br /></p>
  <div class='col-md-9 section-coourse__menu-horizontal'>
   <div class="row">
     <div class="prv pull-left col-xs-1 text-center"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></div>
     <ul class="section-coourse__menu-slider col-xs-10">
       <li><a href="link">Lorem ipsum dolor sit amet</a></li>
       <li><a href="link">Lorem ipsum dolor sit amet</a></li>
     </ul>
       <div class="nxt pull-right col-xs-1 text-center"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></div>
       </div>
     </div>
    <div class="clearfix"></div>
   </div>
 </div>
      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
           <div class="row section-coourse">
   <div class="section-coourse__header col-lg-12">
     <div class="row">
       <div class="col-sm-3 text-center">
         <div class="row">
           <img src="path/to/img" class="img-responsive section-coourse__img">
         </div>
       </div>
       <div class="col-sm-9">
       <h1 class="section-coourse__title">Lorem ipsum dolor sit amet</h1>
         <div class="section-coourse__progress-cotainer">
           <div class="progress section-coourse__progress">
             <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60%</div>
     <span class="glyphicon glyphicon-signal pull-right" aria-hidden="true"></span>
       </div>
     </div>
   </div>
 </div>
</div>
 <div class="clearfix"></div>
 <div class="section-coourse__menu">
   <div class="col-sm-3 text-center">
     <div class="row">
       <div class="col-xs-12">
           <div class="btn-group btn-flex">
               <button type="button" class="btn btn-default">Menu</button>
               <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <span class="caret"></span>
               <span class="sr-only">Toggle Dropdown</span>
               </button>
             <ul class="dropdown-menu">
               <li><a href="#" data-id="menu_id"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span> <b>Lorem ipsum dolor</b></a></li>
             </ul>
           </div>
       </div>
   </div>
 </div>
        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html"> &lt;div class=&quot;row section-coourse&quot;&gt;
   &lt;div class=&quot;section-coourse__header col-lg-12&quot;&gt;
     &lt;div class=&quot;row&quot;&gt;
       &lt;div class=&quot;col-sm-3 text-center&quot;&gt;
         &lt;div class=&quot;row&quot;&gt;
           &lt;img src=&quot;path/to/img&quot; class=&quot;img-responsive section-coourse__img&quot;&gt;
         &lt;/div&gt;
       &lt;/div&gt;
       &lt;div class=&quot;col-sm-9&quot;&gt;
       &lt;h1 class=&quot;section-coourse__title&quot;&gt;Lorem ipsum dolor sit amet&lt;/h1&gt;
         &lt;div class=&quot;section-coourse__progress-cotainer&quot;&gt;
           &lt;div class=&quot;progress section-coourse__progress&quot;&gt;
             &lt;div class=&quot;progress-bar progress-bar-warning&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 60%;&quot;&gt;60%&lt;/div&gt;
     &lt;span class=&quot;glyphicon glyphicon-signal pull-right&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
 &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
 &lt;div class=&quot;section-coourse__menu&quot;&gt;
   &lt;div class=&quot;col-sm-3 text-center&quot;&gt;
     &lt;div class=&quot;row&quot;&gt;
       &lt;div class=&quot;col-xs-12&quot;&gt;
           &lt;div class=&quot;btn-group btn-flex&quot;&gt;
               &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;Menu&lt;/button&gt;
               &lt;button type=&quot;button&quot; class=&quot;btn btn-default dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
               &lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;
               &lt;span class=&quot;sr-only&quot;&gt;Toggle Dropdown&lt;/span&gt;
               &lt;/button&gt;
             &lt;ul class=&quot;dropdown-menu&quot;&gt;
               &lt;li&gt;&lt;a href=&quot;#&quot; data-id=&quot;menu_id&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-signal&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt; &lt;b&gt;Lorem ipsum dolor&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;
           &lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;</code></pre>
      </div>

      </section>
      <section id="kssref-3-2" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-3-2">
          <span class="kss-title__ref">
              3.2
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          Course Catalogue
        </a>
      </h2>


      <div class="kss-description">
        <p>This is the restyled course box used in Course Catalogue<br />
<strong>NB: The &#39;style&#39; attributes are just for this representation only, when implementing
be sure to delete them.</strong><br />
Also the id attribute of the forma-button here is used by YUI, so when the refactor ends<br />
it will likely disappear.</p>

      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
           <div style="max-width: 404px;">
   <div class="course-box">
     <div class="course-box__item">
       <div class="course-box__title">Lorem ipsum dolor sit amet</div>
     </div>
     <div class="course-box__item course-box__item--no-padding">
       <div class="course-box__img">
         <img src="" alt="">
         <div class="course-box__img-title">lorem ipsum</div>
       </div>
     </div>
     <div class="course-box__item">
       <div class="course-box__desc">
         Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Facilis ponatur
         infinito oderis obruamus. Effectices, terroribus cognosci elegans totam
         atilli arare p minuendas.
       </div>
     </div>
     <div class="course-box__item">
       <div class="course-box__date-box calendar-icon--check">31 agosto 2016</div>
       <i class="fa fa-angle-right" aria-hidden="true"></i>
       <div class="course-box__date-box course-box__date-box--end calendar-icon--green-cross">30 novembre 2017</div>
     </div>
     <div class="course-box__item" id="">
       <a class="forma-button forma-button--orange-hover forma-button--full" href="">
         <span class="forma-button__label">
           Entra nel corso
         </span>
       </a>
     </div>
   </div>
 </div>
        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html"> &lt;div style=&quot;max-width: 404px;&quot;&gt;
   &lt;div class=&quot;course-box&quot;&gt;
     &lt;div class=&quot;course-box__item&quot;&gt;
       &lt;div class=&quot;course-box__title&quot;&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class=&quot;course-box__item course-box__item--no-padding&quot;&gt;
       &lt;div class=&quot;course-box__img&quot;&gt;
         &lt;img src=&quot;&quot; alt=&quot;&quot;&gt;
         &lt;div class=&quot;course-box__img-title&quot;&gt;lorem ipsum&lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class=&quot;course-box__item&quot;&gt;
       &lt;div class=&quot;course-box__desc&quot;&gt;
         Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Facilis ponatur
         infinito oderis obruamus. Effectices, terroribus cognosci elegans totam
         atilli arare p minuendas.
       &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class=&quot;course-box__item&quot;&gt;
       &lt;div class=&quot;course-box__date-box calendar-icon--check&quot;&gt;31 agosto 2016&lt;/div&gt;
       &lt;i class=&quot;fa fa-angle-right&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
       &lt;div class=&quot;course-box__date-box course-box__date-box--end calendar-icon--green-cross&quot;&gt;30 novembre 2017&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class=&quot;course-box__item&quot; id=&quot;&quot;&gt;
       &lt;a class=&quot;forma-button forma-button--orange-hover forma-button--full&quot; href=&quot;&quot;&gt;
         &lt;span class=&quot;forma-button__label&quot;&gt;
           Entra nel corso
         &lt;/span&gt;
       &lt;/a&gt;
     &lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;</code></pre>
      </div>

      </section>
      <section id="kssref-3-3" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-3-3">
          <span class="kss-title__ref">
              3.3
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          Course Slider Menu
        </a>
      </h2>


      <div class="kss-description">
        <p>Internal menu of courses</p>

      </div>
    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
          <div class="section-coourse__menu col-xs-12">
   <div class="row-fluid">
     <div class="section-coourse__dropdown col-sm-5 text-center">
       <div class="row">
         <div class="col-xs-12">
           <div class="forma-dropdown">
             <button type="button" class="forma-dropdown__selected forma-button dropdown-toggle has-icon icon--coourse-menu icon--coourse-menu-area-corso" data-toggle="dropdown">Area corso</button>
             <button type="button" class="forma-dropdown__toggle forma-button dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <span class="glyphicon glyphicon-chevron-down"></span>
               <span class="sr-only">Toggle Dropdown</span>
             </button>
             <ul class="dropdown-menu">
                 <li>
                   <a href="" data-id="" class="has-icon icon--coourse-menu icon--coourse-menu-area-corso">
                     <span class="" aria-hidden="true"></span>
                     Area corso
                   </a>
                 </li>
                 <li>
                   <a href="" data-id="" class="has-icon icon--coourse-menu icon--coourse-menu-statistiche">
                     <span class="" aria-hidden="true"></span>
                     Statistiche
                   </a>
                 </li>
                 <li>
                   <a href="" data-id="" class="has-icon icon--coourse-menu icon--coourse-menu-area-social">
                     <span class="" aria-hidden="true"></span>
                     Area social
                   </a>
                 </li>
                 <li>
                   <a href="" data-id="" class="has-icon icon--coourse-menu icon--coourse-menu-gestione">
                     <span class="" aria-hidden="true"></span>
                     Gestione
                   </a>
                 </li>
            </ul>
           </div>
         </div>
       </div>
     </div>
       <div class="col-sm-7 section-coourse__menu-horizontal">
         <ul class="slider-menu">
           <li class="slider-menu__item is-selected">
             <a href="">Materiali</a>
           </li>
           <li class="slider-menu__item">
             <a href="">Valutazioni</a>
           </li>
           <li class="slider-menu__item">
             <a href="">Scheda corso</a>
           </li>
         </ul>
       </div>
     </div>
     <div class="clearfix"></div>
   </div>
        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class=&quot;section-coourse__menu col-xs-12&quot;&gt;
   &lt;div class=&quot;row-fluid&quot;&gt;
     &lt;div class=&quot;section-coourse__dropdown col-sm-5 text-center&quot;&gt;
       &lt;div class=&quot;row&quot;&gt;
         &lt;div class=&quot;col-xs-12&quot;&gt;
           &lt;div class=&quot;forma-dropdown&quot;&gt;
             &lt;button type=&quot;button&quot; class=&quot;forma-dropdown__selected forma-button dropdown-toggle has-icon icon--coourse-menu icon--coourse-menu-area-corso&quot; data-toggle=&quot;dropdown&quot;&gt;Area corso&lt;/button&gt;
             &lt;button type=&quot;button&quot; class=&quot;forma-dropdown__toggle forma-button dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
               &lt;span class=&quot;glyphicon glyphicon-chevron-down&quot;&gt;&lt;/span&gt;
               &lt;span class=&quot;sr-only&quot;&gt;Toggle Dropdown&lt;/span&gt;
             &lt;/button&gt;
             &lt;ul class=&quot;dropdown-menu&quot;&gt;
                 &lt;li&gt;
                   &lt;a href=&quot;&quot; data-id=&quot;&quot; class=&quot;has-icon icon--coourse-menu icon--coourse-menu-area-corso&quot;&gt;
                     &lt;span class=&quot;&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                     Area corso
                   &lt;/a&gt;
                 &lt;/li&gt;
                 &lt;li&gt;
                   &lt;a href=&quot;&quot; data-id=&quot;&quot; class=&quot;has-icon icon--coourse-menu icon--coourse-menu-statistiche&quot;&gt;
                     &lt;span class=&quot;&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                     Statistiche
                   &lt;/a&gt;
                 &lt;/li&gt;
                 &lt;li&gt;
                   &lt;a href=&quot;&quot; data-id=&quot;&quot; class=&quot;has-icon icon--coourse-menu icon--coourse-menu-area-social&quot;&gt;
                     &lt;span class=&quot;&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                     Area social
                   &lt;/a&gt;
                 &lt;/li&gt;
                 &lt;li&gt;
                   &lt;a href=&quot;&quot; data-id=&quot;&quot; class=&quot;has-icon icon--coourse-menu icon--coourse-menu-gestione&quot;&gt;
                     &lt;span class=&quot;&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                     Gestione
                   &lt;/a&gt;
                 &lt;/li&gt;
            &lt;/ul&gt;
           &lt;/div&gt;
         &lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
       &lt;div class=&quot;col-sm-7 section-coourse__menu-horizontal&quot;&gt;
         &lt;ul class=&quot;slider-menu&quot;&gt;
           &lt;li class=&quot;slider-menu__item is-selected&quot;&gt;
             &lt;a href=&quot;&quot;&gt;Materiali&lt;/a&gt;
           &lt;/li&gt;
           &lt;li class=&quot;slider-menu__item&quot;&gt;
             &lt;a href=&quot;&quot;&gt;Valutazioni&lt;/a&gt;
           &lt;/li&gt;
           &lt;li class=&quot;slider-menu__item&quot;&gt;
             &lt;a href=&quot;&quot;&gt;Scheda corso&lt;/a&gt;
           &lt;/li&gt;
         &lt;/ul&gt;
       &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class=&quot;clearfix&quot;&gt;&lt;/div&gt;
   &lt;/div&gt;</code></pre>
      </div>

      </section>
      <section id="kssref-3-4" class="kss-section kss-section--depth-2">

    <div class="kss-style">
      <h2 class="kss-title kss-title--level-2">
        <a class="kss-title__permalink" href="#kssref-3-4">
          <span class="kss-title__ref">
              3.4
            <span class="kss-title__permalink-hash">
                #permalink
            </span>
          </span>
          Course Statistic
        </a>
      </h2>


    </div>

      <div class="kss-modifier__wrapper">
        <div class="kss-modifier__heading kss-style">
          Example
        </div>
        <div class="kss-modifier__example">
           <div class="section-coourse-modal">
 <div class="modal-body">
   <div class="row">
       <div class="modal__item col-sm-12 col-md-4">
         <h3 class="title">
             Tempo parziale
         </h3>
         <p class="text">
           00m
         </p>
       </div>
       <div class="modal__item col-sm-12 col-md-4">
         <h3 class="title">
             Tempo totale
         </h3>
         <p class="text">
             19h 49m
         </p>
       </div>
     <div class="modal__item col-sm-12 col-md-4">
       <h3 class="title">
           Utenti on line
       </h3>
       <p class="text">
           1
       </p>
     </div>
     <div class="modal__item col-sm-12 col-md-4">
       <h3 class="title">
           Materiali
       </h3>
       <p class="text">
           3
       </p>
     </div>
     <div class="modal__item col-sm-12 col-md-4">
       <h3 class="title">
           Completato
       </h3>
       <p class="text">
           1
       </p>
     </div>
     <div class="modal__item col-sm-12 col-md-4">
       <h3 class="title">
           progress failed
       </h3>
       <p class="text">
           2
       </p>
     </div>
     <div class="modal__item col-sm-12 col-md-6">
       <h3 class="title">
           passed
       </h3>
       <p class="text">
           1
       </p>
     </div>
     <div class="modal__item col-sm-12 col-md-6">
       <h3 class="title">
           failed
       </h3>
       <p class="text">
           0
       </p>
     </div>
   </div>
 </div>
 </div>
        </div>
      </div>

      <div class="kss-markup kss-style">
        <pre class="prettyprint linenums lang-html"><code data-language="html"> &lt;div class=&quot;section-coourse-modal&quot;&gt;
 &lt;div class=&quot;modal-body&quot;&gt;
   &lt;div class=&quot;row&quot;&gt;
       &lt;div class=&quot;modal__item col-sm-12 col-md-4&quot;&gt;
         &lt;h3 class=&quot;title&quot;&gt;
             Tempo parziale
         &lt;/h3&gt;
         &lt;p class=&quot;text&quot;&gt;
           00m
         &lt;/p&gt;
       &lt;/div&gt;
       &lt;div class=&quot;modal__item col-sm-12 col-md-4&quot;&gt;
         &lt;h3 class=&quot;title&quot;&gt;
             Tempo totale
         &lt;/h3&gt;
         &lt;p class=&quot;text&quot;&gt;
             19h 49m
         &lt;/p&gt;
       &lt;/div&gt;
     &lt;div class=&quot;modal__item col-sm-12 col-md-4&quot;&gt;
       &lt;h3 class=&quot;title&quot;&gt;
           Utenti on line
       &lt;/h3&gt;
       &lt;p class=&quot;text&quot;&gt;
           1
       &lt;/p&gt;
     &lt;/div&gt;
     &lt;div class=&quot;modal__item col-sm-12 col-md-4&quot;&gt;
       &lt;h3 class=&quot;title&quot;&gt;
           Materiali
       &lt;/h3&gt;
       &lt;p class=&quot;text&quot;&gt;
           3
       &lt;/p&gt;
     &lt;/div&gt;
     &lt;div class=&quot;modal__item col-sm-12 col-md-4&quot;&gt;
       &lt;h3 class=&quot;title&quot;&gt;
           Completato
       &lt;/h3&gt;
       &lt;p class=&quot;text&quot;&gt;
           1
       &lt;/p&gt;
     &lt;/div&gt;
     &lt;div class=&quot;modal__item col-sm-12 col-md-4&quot;&gt;
       &lt;h3 class=&quot;title&quot;&gt;
           progress failed
       &lt;/h3&gt;
       &lt;p class=&quot;text&quot;&gt;
           2
       &lt;/p&gt;
     &lt;/div&gt;
     &lt;div class=&quot;modal__item col-sm-12 col-md-6&quot;&gt;
       &lt;h3 class=&quot;title&quot;&gt;
           passed
       &lt;/h3&gt;
       &lt;p class=&quot;text&quot;&gt;
           1
       &lt;/p&gt;
     &lt;/div&gt;
     &lt;div class=&quot;modal__item col-sm-12 col-md-6&quot;&gt;
       &lt;h3 class=&quot;title&quot;&gt;
           failed
       &lt;/h3&gt;
       &lt;p class=&quot;text&quot;&gt;
           0
       &lt;/p&gt;
     &lt;/div&gt;
   &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;</code></pre>
      </div>

      </section>
</article>

<!-- SCRIPTS -->
<script src="public/kss.js"></script>
<script src="public/prettify.js"></script>
<script>
  prettyPrint();
</script>
<script src="../../../addons/jquery/core/jquery-1.12.3.min.js"></script>
<script src="../../../addons/jquery/core/ui/js/jquery-ui-1.11.4.min.js"></script>
<script src="../../../addons/jquery/bootstrap/js/bootstrap-3.3.6.min.js"></script>
<script src="../static/main.js"></script>



<!-- Automatically generated using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>
