- Product Homepage 2016
Redesigned product homepage
Default styling
{% 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 %}
- Header
Main header component featuring the logo, top navigation, main navigation bar, trial block and descriptive text.
Default styling
<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"> </li>
</ul>
</nav>
<nav class="mainHeaderNavigation">
<ul class="mainHeaderNavigation_list">
<li class="mainHeaderNavigation_item">Product & 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>
- USP
Unique selling points block showcasing four features of a product.
Default styling
<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>
- Testimonial
Component featuring a customer's photo combined with a quote.
Default styling
<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>
- Product specs
Component used to show a link list, together with a title, action button and supportive image.
Default styling
<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>
- Discover benefits
Component used to feature an image, with a two-column overlay that show benefits.
Default styling
<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>
- Request a free demo
Component showing a large title, description and call-to-action button
Default styling
<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>
- Frequently asked questions
Variation to currently existing 'accordion' component. Add .accordion--faq class to show this variation
Default styling
<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>