<!DOCTYPE html>
<html class="pl">
  <head>
    <title>TYPO3 Living Styleguide</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
    
    <link rel="stylesheet" href="../../css/style.css?1503499685684" media="all" />
    <link rel="stylesheet" href="../../css/styleguide-specific.css?1503499685684" media="all" />
    <!-- <link rel="stylesheet" href="../../css/pattern-scaffolding.css?1503499685684" media="all" /> -->
    
    <!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
    <!-- never cache patterns -->
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

<link rel="stylesheet" href="../../styleguide/css/styleguide.min.css?1503499685684" media="all">
<link rel="stylesheet" href="../../styleguide/css/prism-typeahead.min.css?1503499685684" media="all" />

    <!-- End Pattern Lab -->
  
  </head>
  <body class="body">
    
<!-- View All Patterns in a Pattern Sub-Type -->
<div class="sg-main" role="main">
  
  <!-- Patterns -->
  <div id="sg-patterns">
<div id="viewall-atoms-lists" class="sg-pattern-category">
  <h2 class="sg-pattern-category-title"><a href="../../patterns/00-atoms-03-lists&#x2F;index.html" class="patternLink" data-patternpartial="viewall-atoms-lists">lists</a></h2>

  <div class="sg-pattern-category-body">
    
  </div><!--end sg-pattern-category-body-->
  
</div><!--end sg-pattern-category-->
<div id="atoms-unordered" class="sg-pattern">
  <div class="sg-pattern-head">
    <h3 class="sg-pattern-title">
      <a href="../../patterns/00-atoms-03-lists-00-unordered&#x2F;00-atoms-03-lists-00-unordered.rendered.html" class="patternLink" data-patternpartial="atoms-unordered" title="Link to Pattern">
          Unordered
      </a>
    </h3>
    <div class="sg-pattern-breadcrumb"></div>
    <a href="#" data-patternpartial="atoms-unordered" title="View Pattern Info" id="sg-pattern-extra-toggle-atoms-unordered" class="sg-pattern-extra-toggle"><span>&#9660;</span></a>
  </div>
  <div class="sg-pattern-extra" id="sg-pattern-extra-atoms-unordered">
    
  </div>
  <div class="sg-pattern-example">
    <div class="text unordered">
	<ul>
		<li>This is a list item in an unordered list</li>
		<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
		<li>
			Lists can be nested inside of each other
			<ul>
				<li>This is a nested list item</li>
				<li>This is another nested list item in an unordered list</li>
			</ul>
		</li>
		<li>This is the last list item</li>
	</ul>
</div>
  </div>
  <script type="text/json" id="sg-pattern-data-atoms-unordered" class="sg-pattern-data">
    {"cssEnabled":false,"patternLineageExists":false,"patternLineages":[],"lineage":[],"patternLineageRExists":true,"patternLineagesR":[{"lineagePattern":"organisms-article-body","lineagePath":"../../patterns/02-organisms-01-article-_00-article-body/02-organisms-01-article-_00-article-body.rendered.html"}],"lineageR":[{"lineagePattern":"organisms-article-body","lineagePath":"../../patterns/02-organisms-01-article-_00-article-body/02-organisms-01-article-_00-article-body.rendered.html"}],"patternLineageEExists":true,"patternDesc":"","patternBreadcrumb":{"patternType":"atoms","patternSubtype":"lists"},"patternExtension":"mustache","patternName":"Unordered","patternPartial":"atoms-unordered","patternState":"","patternEngineName":"mustache","extraOutput":{}}
  </script>
</div><!--end .sg-pattern-->
<div id="atoms-ordered" class="sg-pattern">
  <div class="sg-pattern-head">
    <h3 class="sg-pattern-title">
      <a href="../../patterns/00-atoms-03-lists-01-ordered&#x2F;00-atoms-03-lists-01-ordered.rendered.html" class="patternLink" data-patternpartial="atoms-ordered" title="Link to Pattern">
          Ordered
      </a>
    </h3>
    <div class="sg-pattern-breadcrumb"></div>
    <a href="#" data-patternpartial="atoms-ordered" title="View Pattern Info" id="sg-pattern-extra-toggle-atoms-ordered" class="sg-pattern-extra-toggle"><span>&#9660;</span></a>
  </div>
  <div class="sg-pattern-extra" id="sg-pattern-extra-atoms-ordered">
    
  </div>
  <div class="sg-pattern-example">
    <div class="text ordered">
	<ol>
		<li>This is a list item in an ordered list</li>
		<li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
		<li>
			Lists can be nested inside of each other
			<ol>
				<li>This is a nested list item</li>
				<li>This is another nested list item in an ordered list</li>
			</ol>
		</li>
		<li>This is the last list item</li>
	</ol>
</div>
  </div>
  <script type="text/json" id="sg-pattern-data-atoms-ordered" class="sg-pattern-data">
    {"cssEnabled":false,"patternLineageExists":false,"patternLineages":[],"lineage":[],"patternLineageRExists":true,"patternLineagesR":[{"lineagePattern":"organisms-article-body","lineagePath":"../../patterns/02-organisms-01-article-_00-article-body/02-organisms-01-article-_00-article-body.rendered.html"}],"lineageR":[{"lineagePattern":"organisms-article-body","lineagePath":"../../patterns/02-organisms-01-article-_00-article-body/02-organisms-01-article-_00-article-body.rendered.html"}],"patternLineageEExists":true,"patternDesc":"","patternBreadcrumb":{"patternType":"atoms","patternSubtype":"lists"},"patternExtension":"mustache","patternName":"Ordered","patternPartial":"atoms-ordered","patternState":"","patternEngineName":"mustache","extraOutput":{}}
  </script>
</div><!--end .sg-pattern-->
<div id="atoms-definition" class="sg-pattern">
  <div class="sg-pattern-head">
    <h3 class="sg-pattern-title">
      <a href="../../patterns/00-atoms-03-lists-02-definition&#x2F;00-atoms-03-lists-02-definition.rendered.html" class="patternLink" data-patternpartial="atoms-definition" title="Link to Pattern">
          Definition
      </a>
    </h3>
    <div class="sg-pattern-breadcrumb"></div>
    <a href="#" data-patternpartial="atoms-definition" title="View Pattern Info" id="sg-pattern-extra-toggle-atoms-definition" class="sg-pattern-extra-toggle"><span>&#9660;</span></a>
  </div>
  <div class="sg-pattern-extra" id="sg-pattern-extra-atoms-definition">
    
  </div>
  <div class="sg-pattern-example">
    <dl>
	<dt>Definition List</dt>
	<dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd>
    <dt>This is a term.</dt>
    <dd>This is the definition of that term, which both live in a <code>dl</code>.</dd>
    <dt>Here is another term.</dt>
    <dd>And it gets a definition too, which is this line.</dd>
    <dt>Here is term that shares a definition with the term below.</dt>
    <dd>And it gets a definition too, which is this line.</dd>
</dl>
  </div>
  <script type="text/json" id="sg-pattern-data-atoms-definition" class="sg-pattern-data">
    {"cssEnabled":false,"patternLineageExists":false,"patternLineages":[],"lineage":[],"patternLineageRExists":false,"patternLineagesR":[],"lineageR":[],"patternLineageEExists":false,"patternDesc":"","patternBreadcrumb":{"patternType":"atoms","patternSubtype":"lists"},"patternExtension":"mustache","patternName":"Definition","patternPartial":"atoms-definition","patternState":"","patternEngineName":"mustache","extraOutput":{}}
  </script>
</div><!--end .sg-pattern-->
  </div> <!--end #sg-patterns-->

</div><!--end .sg-main-->
  
  <!--DO NOT REMOVE-->
  <script type="text/json" id="sg-pattern-data-footer" class="sg-pattern-data">
  {"patternPartial":"viewall-atoms-lists"}
</script>

<script>
  /*!
   * scriptLoader - v0.1
   *
   * Copyright (c) 2014 Dave Olsen, http://dmolsen.com
   * Licensed under the MIT license
   *
   */
  
  var scriptLoader = {
    
    run: function(js,cb,target) {
      var s  = document.getElementById(target+'-'+cb);
      for (var i = 0; i < js.length; i++) {
        var src = (typeof js[i] != 'string') ? js[i].src : js[i];
        var c   = document.createElement('script');
        c.src   = '../../'+src+'?'+cb;
        if (typeof js[i] != 'string') {
          if (js[i].dep !== undefined) {
            c.onload = function(dep,cb,target) {
              return function() {
                scriptLoader.run(dep,cb,target);
              }
            }(js[i].dep,cb,target);
          }
        }
        s.parentNode.insertBefore(c,s);
      }
    }
    
  }
</script>

<script id="pl-js-polyfill-insert-1503499685684">
  (function() {
    if (self != top) {
      var cb = '1503499685684';
      var js = [];
      if (typeof document !== 'undefined' && !('classList' in document.documentElement)) {
        js.push('styleguide/bower_components/classList.min.js');
      }
      scriptLoader.run(js,cb,'pl-js-polyfill-insert');
    }
  })();
</script>

<script id="pl-js-insert-1503499685684">
  (function() {
    if (self != top) {
      var cb = '1503499685684';
      var js = [ { 'src': 'styleguide/bower_components/jwerty.min.js', 'dep': [ 'styleguide/js/patternlab-pattern.min.js' ] } ];
      scriptLoader.run(js,cb,'pl-js-insert');
    }
  })();
</script>

  
  </body>
</html>
