<!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">10.0</span> - Product Homepage 2016</h1>

                <p><p>Redesigned product homepage</p>
</p>
                <h6>Default styling</h6>
                <script type="kss-example/html">{% extends 'layout/base--product-homepage-2016.html' %}
{% set pageTheme = 'essential' %}
{% block pageTitle %}Homepage{% endblock %}
{% block header %}{% endblock %}
{% block mainContent %}
{% include 'component/productHomepage2016/header.html' %}
{% include 'component/productHomepage2016/uspBlock.html' %}
{% include 'component/productHomepage2016/testimonial.html' %}
{% include 'component/productHomepage2016/productSpecs.html' %}
{% include 'component/productHomepage2016/discoverBenefits.html' %}
{% include 'component/productHomepage2016/requestDemo.html' %}
{% include 'component/productHomepage2016/faq.html' %}
{% endblock %}</script>


                <pre class="prettyprint lang-html linenums">{% extends &#x27;layout/base--product-homepage-2016.html&#x27; %}
{% set pageTheme = &#x27;essential&#x27; %}
{% block pageTitle %}Homepage{% endblock %}
{% block header %}{% endblock %}
{% block mainContent %}
{% include &#x27;component/productHomepage2016/header.html&#x27; %}
{% include &#x27;component/productHomepage2016/uspBlock.html&#x27; %}
{% include &#x27;component/productHomepage2016/testimonial.html&#x27; %}
{% include &#x27;component/productHomepage2016/productSpecs.html&#x27; %}
{% include &#x27;component/productHomepage2016/discoverBenefits.html&#x27; %}
{% include &#x27;component/productHomepage2016/requestDemo.html&#x27; %}
{% include &#x27;component/productHomepage2016/faq.html&#x27; %}
{% endblock %}</pre>

                <section>
                <h2 class="kss-title"><span class="patternLibary_subjectRef">10.1</span> - Header</h2>

                <p><p>Main header component featuring the logo, top navigation, main navigation bar, trial block and descriptive text.</p>
</p>
                <h6>Default styling</h6>
                <script type="kss-example/html"><div class="mainSection">
    <div class="mainHeader" style="background-image: url('../asset/images/sample/product-home-header.png');">
        <a class="mainNavigation_logo" href="#">Wolters Kluwer</a>
        <nav class="mainHeaderTopNav">
            <ul>
                <li class="mainHeaderTopNav_item">Login</li>
                <li class="mainHeaderTopNav_item">Cart 4</li>
                <li class="mainHeaderTopNav_item">EN</li>
                <li class="mainHeaderTopNav_item mainHeaderTopNav_item--search">&nbsp;</li>
            </ul>
        </nav>
        <nav class="mainHeaderNavigation">
            <ul class="mainHeaderNavigation_list">
                <li class="mainHeaderNavigation_item">Product &amp; Services</li>
                <li class="mainHeaderNavigation_item">Markets</li>
                <li class="mainHeaderNavigation_item">Experts</li>
                <li class="mainHeaderNavigation_item">News</li>
                <li class="mainHeaderNavigation_item">About</li>
                <li class="mainHeaderNavigation_item">Blog</li>
                <li class="mainHeaderNavigation_item">Product name</li>
            </ul>
        </nav>
        <section class="mainHeaderQuote">
            <div class="mainHeaderQuote_wrap">
                <h2 class="mainHeaderQuote_title">Useful tools and solutions for legal professionals</h2>
                <p class="mainHeaderQuote_text">Now with a free iPad Mini with a two-year contract worth 289,-</p>
            </div>
            <a href="#" class="mainHeaderQuote_button">Get a free trial</a>
        </section>
        <div class="mainHeaderDescription">
            <p class="mainHeaderDescription_paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus adipisci autem consequuntur cum delectus deleniti fugit, ipsum minus molestias obcaecati odit, officia, quo vero!</p>
        </div>
        <button type="button" class="mainNavigation_menuToggle">Menu</button>
    </div>
</div></script>


                <pre class="prettyprint lang-html linenums">&lt;div class=&quot;mainSection&quot;&gt;
    &lt;div class=&quot;mainHeader&quot; style=&quot;background-image: url(&#x27;../asset/images/sample/product-home-header.png&#x27;);&quot;&gt;
        &lt;a class=&quot;mainNavigation_logo&quot; href=&quot;#&quot;&gt;Wolters Kluwer&lt;/a&gt;
        &lt;nav class=&quot;mainHeaderTopNav&quot;&gt;
            &lt;ul&gt;
                &lt;li class=&quot;mainHeaderTopNav_item&quot;&gt;Login&lt;/li&gt;
                &lt;li class=&quot;mainHeaderTopNav_item&quot;&gt;Cart 4&lt;/li&gt;
                &lt;li class=&quot;mainHeaderTopNav_item&quot;&gt;EN&lt;/li&gt;
                &lt;li class=&quot;mainHeaderTopNav_item mainHeaderTopNav_item--search&quot;&gt;&amp;nbsp;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/nav&gt;
        &lt;nav class=&quot;mainHeaderNavigation&quot;&gt;
            &lt;ul class=&quot;mainHeaderNavigation_list&quot;&gt;
                &lt;li class=&quot;mainHeaderNavigation_item&quot;&gt;Product &amp;amp; Services&lt;/li&gt;
                &lt;li class=&quot;mainHeaderNavigation_item&quot;&gt;Markets&lt;/li&gt;
                &lt;li class=&quot;mainHeaderNavigation_item&quot;&gt;Experts&lt;/li&gt;
                &lt;li class=&quot;mainHeaderNavigation_item&quot;&gt;News&lt;/li&gt;
                &lt;li class=&quot;mainHeaderNavigation_item&quot;&gt;About&lt;/li&gt;
                &lt;li class=&quot;mainHeaderNavigation_item&quot;&gt;Blog&lt;/li&gt;
                &lt;li class=&quot;mainHeaderNavigation_item&quot;&gt;Product name&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/nav&gt;
        &lt;section class=&quot;mainHeaderQuote&quot;&gt;
            &lt;div class=&quot;mainHeaderQuote_wrap&quot;&gt;
                &lt;h2 class=&quot;mainHeaderQuote_title&quot;&gt;Useful tools and solutions for legal professionals&lt;/h2&gt;
                &lt;p class=&quot;mainHeaderQuote_text&quot;&gt;Now with a free iPad Mini with a two-year contract worth 289,-&lt;/p&gt;
            &lt;/div&gt;
            &lt;a href=&quot;#&quot; class=&quot;mainHeaderQuote_button&quot;&gt;Get a free trial&lt;/a&gt;
        &lt;/section&gt;
        &lt;div class=&quot;mainHeaderDescription&quot;&gt;
            &lt;p class=&quot;mainHeaderDescription_paragraph&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus adipisci autem consequuntur cum delectus deleniti fugit, ipsum minus molestias obcaecati odit, officia, quo vero!&lt;/p&gt;
        &lt;/div&gt;
        &lt;button type=&quot;button&quot; class=&quot;mainNavigation_menuToggle&quot;&gt;Menu&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>

                </section>
                <section>
                <h2 class="kss-title"><span class="patternLibary_subjectRef">10.2</span> - USP</h2>

                <p><p>Unique selling points block showcasing four features of a product.</p>
</p>
                <h6>Default styling</h6>
                <script type="kss-example/html"><div class="mainSection">
    <div class="uspBlock">
        <section class="uspBlock_item uspBlock_item--briefcase">
            <h2 class="uspBlock_title">All-in-one solution for all your business</h2>
            <p class="uspBlock_description">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        </section>
        <section class="uspBlock_item uspBlock_item--book">
            <h2 class="uspBlock_title">Legal sources and templates</h2>
            <p class="uspBlock_description">Lorem ipsum dolor sit amet</p>
        </section>
    </div>
    <div class="uspBlock">
        <section class="uspBlock_item uspBlock_item--people">
            <h2 class="uspBlock_title">Aquire new business</h2>
            <p class="uspBlock_description">Lorem ipsum dolor sit </p>
        </section>
        <section class="uspBlock_item uspBlock_item--ruler">
            <h2 class="uspBlock_title">Intelligent calculations</h2>
            <p class="uspBlock_description">Lorem ipsum dolor sit amet</p>
        </section>
    </div>
</div></script>


                <pre class="prettyprint lang-html linenums">&lt;div class=&quot;mainSection&quot;&gt;
    &lt;div class=&quot;uspBlock&quot;&gt;
        &lt;section class=&quot;uspBlock_item uspBlock_item--briefcase&quot;&gt;
            &lt;h2 class=&quot;uspBlock_title&quot;&gt;All-in-one solution for all your business&lt;/h2&gt;
            &lt;p class=&quot;uspBlock_description&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit&lt;/p&gt;
        &lt;/section&gt;
        &lt;section class=&quot;uspBlock_item uspBlock_item--book&quot;&gt;
            &lt;h2 class=&quot;uspBlock_title&quot;&gt;Legal sources and templates&lt;/h2&gt;
            &lt;p class=&quot;uspBlock_description&quot;&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
        &lt;/section&gt;
    &lt;/div&gt;
    &lt;div class=&quot;uspBlock&quot;&gt;
        &lt;section class=&quot;uspBlock_item uspBlock_item--people&quot;&gt;
            &lt;h2 class=&quot;uspBlock_title&quot;&gt;Aquire new business&lt;/h2&gt;
            &lt;p class=&quot;uspBlock_description&quot;&gt;Lorem ipsum dolor sit &lt;/p&gt;
        &lt;/section&gt;
        &lt;section class=&quot;uspBlock_item uspBlock_item--ruler&quot;&gt;
            &lt;h2 class=&quot;uspBlock_title&quot;&gt;Intelligent calculations&lt;/h2&gt;
            &lt;p class=&quot;uspBlock_description&quot;&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
        &lt;/section&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>

                </section>
                <section>
                <h2 class="kss-title"><span class="patternLibary_subjectRef">10.3</span> - Testimonial</h2>

                <p><p>Component featuring a customer&apos;s photo combined with a quote.</p>
</p>
                <h6>Default styling</h6>
                <script type="kss-example/html"><div class="mainSection">
    <div class="testimonial">
        <div class="testimonial_background" style="background-image: url('../asset/images/sample/product-home-testimonial.png');"></div>
        <section class="testimonial_quote">
            <h2 class="testimonial_title">"Using Kleos enables me to focus on the legal case instead of administration"</h2>
            <span class="testimonial_author">Phillippe van Kampen</span>
            <span class="testimonial_description">Lawyer, and divorce mediator at VPST</span>
        </section>
    </div>
</div></script>


                <pre class="prettyprint lang-html linenums">&lt;div class=&quot;mainSection&quot;&gt;
    &lt;div class=&quot;testimonial&quot;&gt;
        &lt;div class=&quot;testimonial_background&quot; style=&quot;background-image: url(&#x27;../asset/images/sample/product-home-testimonial.png&#x27;);&quot;&gt;&lt;/div&gt;
        &lt;section class=&quot;testimonial_quote&quot;&gt;
            &lt;h2 class=&quot;testimonial_title&quot;&gt;&quot;Using Kleos enables me to focus on the legal case instead of administration&quot;&lt;/h2&gt;
            &lt;span class=&quot;testimonial_author&quot;&gt;Phillippe van Kampen&lt;/span&gt;
            &lt;span class=&quot;testimonial_description&quot;&gt;Lawyer, and divorce mediator at VPST&lt;/span&gt;
        &lt;/section&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>

                </section>
                <section>
                <h2 class="kss-title"><span class="patternLibary_subjectRef">10.4</span> - Product specs</h2>

                <p><p>Component used to show a link list, together with a title, action button and supportive image.</p>
</p>
                <h6>Default styling</h6>
                <script type="kss-example/html"><div class="mainSection">
    <div class="productSpecs">
        <div class="productSpecs_imageBlock">
            <h2 class="productSpecs_title">Software for lawyers</h2>
            <div class="productSpecs_image" style="background-image: url('../asset/images/sample/product-home-software.png');"></div>
        </div>
        <div class="productSpecs_menu">
            <ul class="productSpecs_list">
                <li class="productSpecs_item"><a href="#" class="productSpecs_link">Geared to the legalpractice</a></li>
                <li class="productSpecs_item"><a href="#" class="productSpecs_link">Full integration with Microsoft Office software</a></li>
                <li class="productSpecs_item"><a href="#" class="productSpecs_link">Desktop and iPad application</a></li>
                <li class="productSpecs_item"><a href="#" class="productSpecs_link">Everywhere online work</a></li>
                <li class="productSpecs_item"><a href="#" class="productSpecs_link">Safe and reliable</a></li>
                <li class="productSpecs_item"><a href="#" class="productSpecs_link">User friendly</a></li>
            </ul>
            <a class="productSpecs_button" href="#TODO">More information</a>
        </div>
    </div>
</div></script>


                <pre class="prettyprint lang-html linenums">&lt;div class=&quot;mainSection&quot;&gt;
    &lt;div class=&quot;productSpecs&quot;&gt;
        &lt;div class=&quot;productSpecs_imageBlock&quot;&gt;
            &lt;h2 class=&quot;productSpecs_title&quot;&gt;Software for lawyers&lt;/h2&gt;
            &lt;div class=&quot;productSpecs_image&quot; style=&quot;background-image: url(&#x27;../asset/images/sample/product-home-software.png&#x27;);&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;productSpecs_menu&quot;&gt;
            &lt;ul class=&quot;productSpecs_list&quot;&gt;
                &lt;li class=&quot;productSpecs_item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;productSpecs_link&quot;&gt;Geared to the legalpractice&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;productSpecs_item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;productSpecs_link&quot;&gt;Full integration with Microsoft Office software&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;productSpecs_item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;productSpecs_link&quot;&gt;Desktop and iPad application&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;productSpecs_item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;productSpecs_link&quot;&gt;Everywhere online work&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;productSpecs_item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;productSpecs_link&quot;&gt;Safe and reliable&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;productSpecs_item&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;productSpecs_link&quot;&gt;User friendly&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;a class=&quot;productSpecs_button&quot; href=&quot;#TODO&quot;&gt;More information&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>

                </section>
                <section>
                <h2 class="kss-title"><span class="patternLibary_subjectRef">10.5</span> - Discover benefits</h2>

                <p><p>Component used to feature an image, with a two-column overlay that show benefits.</p>
</p>
                <h6>Default styling</h6>
                <script type="kss-example/html"><div class="mainSection">
    <div class="discoverBenefits">
        <div class="discoverBenefits_container" style="background-image: url('../asset/images/sample/product-home-device.png');">
            <section class="discoverBenefits_item">
                <h2 class="discoverBenefits_title">Cost Reduction</h2>
                <p class="discoverBenefits_description">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
            </section>
            <section class="discoverBenefits_item discoverBenefits_item--mediumblue discoverBenefits_item--flexibility">
                <h2 class="discoverBenefits_title">Flexibility</h2>
                <p class="discoverBenefits_description">Lorem ipsum dolor sit amet</p>
            </section>
            <section class="discoverBenefits_item discoverBenefits_item--mediumblue">
                <h2 class="discoverBenefits_title">Usability</h2>
                <p class="discoverBenefits_description">Lorem ipsum dolor sit </p>
            </section>
            <section class="discoverBenefits_item">
                <h2 class="discoverBenefits_title">Safety</h2>
                <p class="discoverBenefits_description">Lorem ipsum dolor sit amet</p>
            </section>
            <a class="discoverBenefits_button" href="#TODO">Discover all benefits</a>
        </div>
    </div>
</div></script>


                <pre class="prettyprint lang-html linenums">&lt;div class=&quot;mainSection&quot;&gt;
    &lt;div class=&quot;discoverBenefits&quot;&gt;
        &lt;div class=&quot;discoverBenefits_container&quot; style=&quot;background-image: url(&#x27;../asset/images/sample/product-home-device.png&#x27;);&quot;&gt;
            &lt;section class=&quot;discoverBenefits_item&quot;&gt;
                &lt;h2 class=&quot;discoverBenefits_title&quot;&gt;Cost Reduction&lt;/h2&gt;
                &lt;p class=&quot;discoverBenefits_description&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit&lt;/p&gt;
            &lt;/section&gt;
            &lt;section class=&quot;discoverBenefits_item discoverBenefits_item--mediumblue discoverBenefits_item--flexibility&quot;&gt;
                &lt;h2 class=&quot;discoverBenefits_title&quot;&gt;Flexibility&lt;/h2&gt;
                &lt;p class=&quot;discoverBenefits_description&quot;&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
            &lt;/section&gt;
            &lt;section class=&quot;discoverBenefits_item discoverBenefits_item--mediumblue&quot;&gt;
                &lt;h2 class=&quot;discoverBenefits_title&quot;&gt;Usability&lt;/h2&gt;
                &lt;p class=&quot;discoverBenefits_description&quot;&gt;Lorem ipsum dolor sit &lt;/p&gt;
            &lt;/section&gt;
            &lt;section class=&quot;discoverBenefits_item&quot;&gt;
                &lt;h2 class=&quot;discoverBenefits_title&quot;&gt;Safety&lt;/h2&gt;
                &lt;p class=&quot;discoverBenefits_description&quot;&gt;Lorem ipsum dolor sit amet&lt;/p&gt;
            &lt;/section&gt;
            &lt;a class=&quot;discoverBenefits_button&quot; href=&quot;#TODO&quot;&gt;Discover all benefits&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>

                </section>
                <section>
                <h2 class="kss-title"><span class="patternLibary_subjectRef">10.6</span> - Request a free demo</h2>

                <p><p>Component showing a large title, description and call-to-action button</p>
</p>
                <h6>Default styling</h6>
                <script type="kss-example/html"><div class="mainSection">
    <div class="requestDemo">
        <div class="requestDemo_quoteBlock">
            <section class="requestDemo_quote">
                <h2 class="requestDemo_title">Want to know how Product name can upgrade your profession?</h2>
            </section>
            <a class="requestDemo_button" href="#TODO">Request a free demo</a>
        </div>
        <div class="requestDemo_descriptionBlock">
            <div class="requestDemo_description">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dicta dolorem enim placeat quos soluta unde ut? Accusantium, commodi consectetur consequatur deserunt eaque minus nulla obcaecati officiis quibusdam sunt temporibus?
            </div>
        </div>
    </div>
</div></script>


                <pre class="prettyprint lang-html linenums">&lt;div class=&quot;mainSection&quot;&gt;
    &lt;div class=&quot;requestDemo&quot;&gt;
        &lt;div class=&quot;requestDemo_quoteBlock&quot;&gt;
            &lt;section class=&quot;requestDemo_quote&quot;&gt;
                &lt;h2 class=&quot;requestDemo_title&quot;&gt;Want to know how Product name can upgrade your profession?&lt;/h2&gt;
            &lt;/section&gt;
            &lt;a class=&quot;requestDemo_button&quot; href=&quot;#TODO&quot;&gt;Request a free demo&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class=&quot;requestDemo_descriptionBlock&quot;&gt;
            &lt;div class=&quot;requestDemo_description&quot;&gt;
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dicta dolorem enim placeat quos soluta unde ut? Accusantium, commodi consectetur consequatur deserunt eaque minus nulla obcaecati officiis quibusdam sunt temporibus?
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>

                </section>
                <section>
                <h2 class="kss-title"><span class="patternLibary_subjectRef">10.7</span> - Frequently asked questions</h2>

                <p><p>Variation to currently existing &apos;accordion&apos; component. Add .accordion--faq class to show this variation</p>
</p>
                <h6>Default styling</h6>
                <script type="kss-example/html"><div class="mainSection">
    <ul class="accordion accordion--faq">
        <li class="accordion_title">
            <span class="accordion_titleText">
            <a href="#">Frequently asked questions</a>
            </span>
        </li>
        <li class="accordion_item active">
            <span class="accordion_category">Updates</span>
            <span class="accordion_itemTitle">
                <a href="#">What happens to my current data, like administration when we will converge to Kleos?</a>
            </span>
            <div class="accordion_content">
                Donec vitae est aliquet, vehicula arcu id, ullamcorper turpis. Curabitur vel egestas risus. Suspendisse iaculis pulvinar suscipit.
            </div>
        </li>
        <li class="accordion_item">
            <span class="accordion_category">Updates</span>
            <span class="accordion_itemTitle">
                <a href="#">Legal & Regulatory</a></span>
            <div class="accordion_content">
                Maecenas eleifend lacinia ligula. Maecenas vel quam vitae nunc congue suscipit. Cras et mauris nisi. Praesent rhoncus libero a ligula posuere dapibus. Mauris lobortis lacus a mollis dictum. Maecenas sit amet diam diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
        </li>
        <li class="accordion_item">
            <span class="accordion_category">Updates</span>
            <span class="accordion_itemTitle">
                <a href="#">Financial & Compliance</a>
            </span>
            <div class="accordion_content">
                Nulla molestie ligula vitae lacus tristique efficitur. Cras felis augue, efficitur in iaculis id, pulvinar id elit. Nulla risus ipsum, pulvinar ut accumsan a, dapibus a tellus. Sed velit mi
            </div>
        </li>
        <li class="accordion_item">
            <span class="accordion_category">Updates</span>
            <span class="accordion_itemTitle">
                <a href="#">Health</a>
            </span>
            <div class="accordion_content">
                Nulla facilisi. Maecenas odio massa, maximus sed orci in, blandit semper enim. Curabitur efficitur est in ultrices sagittis. Nulla hendrerit maximus lectus in sagittis.
            </div>
        </li>
        <li class="accordion_item">
            <span class="accordion_category">Updates</span>
            <span class="accordion_itemTitle">
                <a href="#">Corporate Legal Services</a>
            </span>
            <div class="accordion_content">
                Donec auctor in erat eget lobortis. Fusce placerat nulla orci, quis dapibus eros condimentum non. Sed semper placerat ligula. Nunc mattis metus sed laoreet convallis. Nunc et eleifend urna.
            </div>
        </li>
    </ul>
    <div class="accordion_linkContainer">
        <a href="#" class="accordion_link">Go to customer service</a>
    </div>
</div></script>


                <pre class="prettyprint lang-html linenums">&lt;div class=&quot;mainSection&quot;&gt;
    &lt;ul class=&quot;accordion accordion--faq&quot;&gt;
        &lt;li class=&quot;accordion_title&quot;&gt;
            &lt;span class=&quot;accordion_titleText&quot;&gt;
            &lt;a href=&quot;#&quot;&gt;Frequently asked questions&lt;/a&gt;
            &lt;/span&gt;
        &lt;/li&gt;
        &lt;li class=&quot;accordion_item active&quot;&gt;
            &lt;span class=&quot;accordion_category&quot;&gt;Updates&lt;/span&gt;
            &lt;span class=&quot;accordion_itemTitle&quot;&gt;
                &lt;a href=&quot;#&quot;&gt;What happens to my current data, like administration when we will converge to Kleos?&lt;/a&gt;
            &lt;/span&gt;
            &lt;div class=&quot;accordion_content&quot;&gt;
                Donec vitae est aliquet, vehicula arcu id, ullamcorper turpis. Curabitur vel egestas risus. Suspendisse iaculis pulvinar suscipit.
            &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class=&quot;accordion_item&quot;&gt;
            &lt;span class=&quot;accordion_category&quot;&gt;Updates&lt;/span&gt;
            &lt;span class=&quot;accordion_itemTitle&quot;&gt;
                &lt;a href=&quot;#&quot;&gt;Legal &amp; Regulatory&lt;/a&gt;&lt;/span&gt;
            &lt;div class=&quot;accordion_content&quot;&gt;
                Maecenas eleifend lacinia ligula. Maecenas vel quam vitae nunc congue suscipit. Cras et mauris nisi. Praesent rhoncus libero a ligula posuere dapibus. Mauris lobortis lacus a mollis dictum. Maecenas sit amet diam diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class=&quot;accordion_item&quot;&gt;
            &lt;span class=&quot;accordion_category&quot;&gt;Updates&lt;/span&gt;
            &lt;span class=&quot;accordion_itemTitle&quot;&gt;
                &lt;a href=&quot;#&quot;&gt;Financial &amp; Compliance&lt;/a&gt;
            &lt;/span&gt;
            &lt;div class=&quot;accordion_content&quot;&gt;
                Nulla molestie ligula vitae lacus tristique efficitur. Cras felis augue, efficitur in iaculis id, pulvinar id elit. Nulla risus ipsum, pulvinar ut accumsan a, dapibus a tellus. Sed velit mi
            &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class=&quot;accordion_item&quot;&gt;
            &lt;span class=&quot;accordion_category&quot;&gt;Updates&lt;/span&gt;
            &lt;span class=&quot;accordion_itemTitle&quot;&gt;
                &lt;a href=&quot;#&quot;&gt;Health&lt;/a&gt;
            &lt;/span&gt;
            &lt;div class=&quot;accordion_content&quot;&gt;
                Nulla facilisi. Maecenas odio massa, maximus sed orci in, blandit semper enim. Curabitur efficitur est in ultrices sagittis. Nulla hendrerit maximus lectus in sagittis.
            &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class=&quot;accordion_item&quot;&gt;
            &lt;span class=&quot;accordion_category&quot;&gt;Updates&lt;/span&gt;
            &lt;span class=&quot;accordion_itemTitle&quot;&gt;
                &lt;a href=&quot;#&quot;&gt;Corporate Legal Services&lt;/a&gt;
            &lt;/span&gt;
            &lt;div class=&quot;accordion_content&quot;&gt;
                Donec auctor in erat eget lobortis. Fusce placerat nulla orci, quis dapibus eros condimentum non. Sed semper placerat ligula. Nunc mattis metus sed laoreet convallis. Nunc et eleifend urna.
            &lt;/div&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class=&quot;accordion_linkContainer&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;accordion_link&quot;&gt;Go to customer service&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>

                </section>
    </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>
