{# Template : Groups #}

{% extends 'chop/layouts.twig' %}

{% block content %}

<div class="pageWrap">

    {% include 'navigation/breadcrumbs.twig' %}

    {% include 'includes/elements/title_wrap.twig' %}

    <div class="contentPageWrap">

        <div class="contentSidebar js_contentSidebar">
            <h3>Subpages</h3>
            <nav>
                <ul>
                    <li><a href="#">Subpage title here</a></li>
                    <li><a href="#">Subpage title here</a></li>
                    <li><a href="#">Subpage title here</a></li>
                    <li><a href="#">Subpage title here</a></li>
                </ul>
            </nav>
        </div> <!-- / .contentSidebar -->

        <div class="contentWrap">

            <ul class="group">

                <li class="first">
                    <div class="groupLeft">
                        <img src="http://placehold.it/82x82&amp;text=Thumb+1" alt="" />
                    </div>
                    <div class="groupRight">
                        <h2>Subtitle here</h2>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor.</p>
                        <a href="#" class="buttonAlt">Find out more</a>
                    </div>
                </li>

                <li>
                    <div class="groupLeft">
                        <img src="http://placehold.it/82x82&amp;text=Thumb+2" alt="" />
                    </div>
                    <div class="groupRight">
                        <h2>Subtitle here</h2>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor.</p>
                        <a href="#" class="buttonAlt">Find out more</a>
                    </div>
                </li>

                <li class="first">
                    <div class="groupLeft">
                        <img src="http://placehold.it/82x82&amp;text=Thumb+3" alt="" />
                    </div>
                    <div class="groupRight">
                        <h2>Subtitle here</h2>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor.</p>
                        <a href="#" class="buttonAlt">Find out more</a>
                    </div>
                </li>

                <li>
                    <div class="groupLeft">
                        <img src="http://placehold.it/82x82&amp;text=Thumb+4" alt="" />
                    </div>
                    <div class="groupRight">
                        <h2>Subtitle here</h2>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor.</p>
                        <a href="#" class="buttonAlt">Find out more</a>
                    </div>
                </li>

            </ul> <!-- .group -->

        </div> <!-- .contentWrap -->

    </div> <!-- .contentPageWrap -->

</div> <!-- .pageWrap -->

{% endblock %}
