<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <title>pattern library</title>
  <meta name="description" content="">
  <meta name="generator" content="kss-node" />

  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="/asset/css/product-homepage-2016.css">
  <link rel="stylesheet" href="public/kss.css">
</head>
<body>

<section class="patternLibrary">
    <nav class="patternLibrary_navigation">
        <h1>Pattern library</h1>
        <ul>
            <li><a href="index.html">0.0: Overview</a></li>
            <li><a href="section-1.html">1.0: Widget: text</a></li>
            <li><a href="section-8.html">8.0: Sharemenu</a></li>
            <li><a href="section-10.html">10.0: Product Homepage 2016</a></li>
        </ul>
    </nav>
    <article class="patternLibrary_article">


                <h1><span class="patternLibary_subjectRef">1.0</span> - Widget: text</h1>

                <p><p>This widget displays rich text</p>
</p>
                <h6>Default styling</h6>
                <script type="kss-example/html">{% set widgetTextTitle = widgetTextTitle|default('title') %}
{% set widgetTextBody = widgetTextBody|default('body') %}
{% set widgetTextNarrow = widgetTextNarrow|default(false) %}
<div class="widgetText{% if widgetTextNarrow %} widgetText--narrow{% endif %}">
    <h2 class="widgetText_title">{{widgetTextTitle}}</h2>
    <div class="widgetText_body">
        {% autoescape false %}{{widgetTextBody}}{% endautoescape %}
    </div>
</div></script>


                <pre class="prettyprint lang-html linenums">{% set widgetTextTitle = widgetTextTitle|default(&#x27;title&#x27;) %}
{% set widgetTextBody = widgetTextBody|default(&#x27;body&#x27;) %}
{% set widgetTextNarrow = widgetTextNarrow|default(false) %}
&lt;div class=&quot;widgetText{% if widgetTextNarrow %} widgetText--narrow{% endif %}&quot;&gt;
    &lt;h2 class=&quot;widgetText_title&quot;&gt;{{widgetTextTitle}}&lt;/h2&gt;
    &lt;div class=&quot;widgetText_body&quot;&gt;
        {% autoescape false %}{{widgetTextBody}}{% endautoescape %}
    &lt;/div&gt;
&lt;/div&gt;</pre>

    </article>
</section>

<!-- SCRIPTS -->
<script src="../asset/javascript/site.js"></script>
<script src="public/kss.js"></script>
<script src="public/prettify.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var codeBlockElements = document.querySelectorAll('pre > code')

        for ( var i = codeBlockElements.length - 1; i >= 0; i-- ){
            codeBlockElements[i].classList.add('prettyprint');
        }

        prettyPrint();

        var codeSampleElements = document.querySelectorAll('script[type="kss-example/html"]');

        for ( var i = codeSampleElements.length - 1; i >= 0; i-- ){
            (function(codeSampleElement){
                var html = codeSampleElement.innerHTML;
                var iframeElement = document.createElement('iframe');
                iframeElement.classList.add('patternLibrary_snippet');
                iframeElement.setAttribute('src', 'codeSample.html');

                codeSampleElement.parentNode.insertBefore(iframeElement, codeSampleElement.nextSibling);

                iframeElement.addEventListener('load', function(){
                    iframeElement.contentWindow.document.body.innerHTML = html;
                });
            })(codeSampleElements[i]);
        }
    });
</script>
</body>
</html>
