Woodlands.co.uk Component Library

Woodland

Woodland Component

A complex component including the following;

  • Media
  • Read more
  • Buttons
  • Button Group
  • Accordion
<section id="" class="grid grid--2/3 grid--spaced grid--divider grid--woodland">
    <div class="grid__inner">
        <div class="grid__item grid__item--secondary">
            <template id="photoswipe">
                <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="pswp__bg"></div>

                    <div class="pswp__scroll-wrap">
                        <div class="pswp__container">
                            <div class="pswp__item"></div>
                            <div class="pswp__item"></div>
                            <div class="pswp__item"></div>
                        </div>

                        <div class="pswp__ui pswp__ui--hidden">

                            <div class="pswp__top-bar">

                                <div class="pswp__counter"></div>

                                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                                <button class="pswp__button pswp__button--share" title="Share"></button>

                                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                                <div class="pswp__preloader">
                                    <div class="pswp__preloader__icn">
                                        <div class="pswp__preloader__cut">
                                            <div class="pswp__preloader__donut"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                                <div class="pswp__share-tooltip"></div>
                            </div>

                            <button class="pswp__button pswp__button--arrow--left" title="Previous">
                            </button>

                            <button class="pswp__button pswp__button--arrow--right" title="Next">
                            </button>

                            <div class="pswp__caption">
                                <div class="pswp__caption__center"></div>
                            </div>

                        </div>

                    </div>

                </div>

            </template>

            <div class="gallery gallery--carousel">
                <ul class="gallery__list">
                    <li class="gallery__item" data-src="http://picsum.photos/1156/650" data-video="" data-width="1156" data-height="650">
                        <div class="media">
                            <div class="media__content">
                                <img src="http://picsum.photos/1156/650" alt="" title="" />
                            </div>
                        </div>

                        <p class="gallery__description">Quasi in quasi veniam ad unde consequatur.</p>
                    </li>
                    <li class="gallery__item" data-src="http://picsum.photos/1156/650" data-video="" data-width="1156" data-height="650">
                        <div class="media">
                            <div class="media__content">
                                <img src="http://picsum.photos/1156/650" alt="" title="" />
                            </div>
                        </div>

                        <p class="gallery__description">Accusamus cumque autem consequatur.</p>
                    </li>
                    <li class="gallery__item" data-src="http://picsum.photos/1156/650" data-video="" data-width="1156" data-height="650">
                        <div class="media">
                            <div class="media__content">
                                <img src="http://picsum.photos/1156/650" alt="" title="" />
                            </div>
                        </div>

                        <p class="gallery__description">Tempora ut distinctio.</p>
                    </li>
                    <li class="gallery__item" data-src="http://picsum.photos/1156/650" data-video="" data-width="1156" data-height="650">
                        <div class="media">
                            <div class="media__content">
                                <img src="http://picsum.photos/1156/650" alt="" title="" />
                            </div>
                        </div>

                        <p class="gallery__description">Iusto eum id consequatur officia rerum delectus sit veniam.</p>
                    </li>
                    <li class="gallery__item" data-src="http://picsum.photos/1156/650" data-video="" data-width="1156" data-height="650">
                        <div class="media">
                            <div class="media__content">
                                <img src="http://picsum.photos/1156/650" alt="" title="" />
                            </div>
                        </div>

                        <p class="gallery__description">Error explicabo qui et inventore soluta praesentium aperiam cumque.</p>
                    </li>
                    <li class="gallery__item" data-src="http://picsum.photos/1156/650" data-video="" data-width="1156" data-height="650">
                        <div class="media">
                            <div class="media__content">
                                <img src="http://picsum.photos/1156/650" alt="" title="" />
                            </div>
                        </div>

                        <p class="gallery__description">Ad consequatur alias rerum est porro quo eius magni.</p>
                    </li>
                    <li class="gallery__item" data-src="http://picsum.photos/1156/650" data-video="" data-width="1156" data-height="650">
                        <div class="media">
                            <div class="media__content">
                                <img src="http://picsum.photos/1156/650" alt="" title="" />
                            </div>
                        </div>

                        <p class="gallery__description">Sit enim omnis laudantium.</p>
                    </li>
                    <li class="gallery__item" data-src="http://picsum.photos/1156/650" data-video="" data-width="1156" data-height="650">
                        <div class="media">
                            <div class="media__content">
                                <img src="http://picsum.photos/1156/650" alt="" title="" />
                            </div>
                        </div>

                        <p class="gallery__description">Aut voluptas quia et omnis possimus molestiae eveniet reiciendis soluta.</p>
                    </li>
                    <li class="gallery__item" data-src="http://picsum.photos/1156/650" data-video="" data-width="1156" data-height="650">
                        <div class="media">
                            <div class="media__content">
                                <img src="http://picsum.photos/1156/650" alt="" title="" />
                            </div>
                        </div>

                        <p class="gallery__description">Rem velit deleniti est molestiae illo delectus at dolores.</p>
                    </li>
                    <li class="gallery__item" data-src="http://picsum.photos/1156/650" data-video="" data-width="1156" data-height="650">
                        <div class="media">
                            <div class="media__content">
                                <img src="http://picsum.photos/1156/650" alt="" title="" />
                            </div>
                        </div>

                        <p class="gallery__description">Dicta totam et sed hic harum ea.</p>
                    </li>
                    <li class="gallery__item" data-src="http://www.youtube.com/embed/dP15zlyra3c?html5&#x3D;1" data-video="http://www.youtube.com/embed/dP15zlyra3c?html5&#x3D;1&amp;enablejsapi&#x3D;1" data-width="" data-height="">
                        <div class="media">
                            <div class="media__content">
                                <iframe src="http://www.youtube.com/embed/dP15zlyra3c?html5&#x3D;1&amp;enablejsapi&#x3D;1"></iframe>
                            </div>
                        </div>

                    </li>
                </ul>
                <ul class="gallery__thumbnails">
                    <li class="gallery__item">
                        <a href="http://picsum.photos/1156/650">
                            <div class="media">
                                <div class="media__content">
                                    <img src="http://picsum.photos/400/225" alt="" title="" />
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="gallery__item">
                        <a href="http://picsum.photos/1156/650">
                            <div class="media">
                                <div class="media__content">
                                    <img src="http://picsum.photos/400/225" alt="" title="" />
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="gallery__item">
                        <a href="http://picsum.photos/1156/650">
                            <div class="media">
                                <div class="media__content">
                                    <img src="http://picsum.photos/400/225" alt="" title="" />
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="gallery__item">
                        <a href="http://picsum.photos/1156/650">
                            <div class="media">
                                <div class="media__content">
                                    <img src="http://picsum.photos/400/225" alt="" title="" />
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="gallery__item">
                        <a href="http://picsum.photos/1156/650">
                            <div class="media">
                                <div class="media__content">
                                    <img src="http://picsum.photos/400/225" alt="" title="" />
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="gallery__item">
                        <a href="http://picsum.photos/1156/650">
                            <div class="media">
                                <div class="media__content">
                                    <img src="http://picsum.photos/400/225" alt="" title="" />
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="gallery__item">
                        <a href="http://picsum.photos/1156/650">
                            <div class="media">
                                <div class="media__content">
                                    <img src="http://picsum.photos/400/225" alt="" title="" />
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="gallery__item">
                        <a href="http://picsum.photos/1156/650">
                            <div class="media">
                                <div class="media__content">
                                    <img src="http://picsum.photos/400/225" alt="" title="" />
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="gallery__item">
                        <a href="http://picsum.photos/1156/650">
                            <div class="media">
                                <div class="media__content">
                                    <img src="http://picsum.photos/400/225" alt="" title="" />
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="gallery__item">
                        <a href="http://picsum.photos/1156/650">
                            <div class="media">
                                <div class="media__content">
                                    <img src="http://picsum.photos/400/225" alt="" title="" />
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="gallery__item">
                        <a href="http://www.youtube.com/embed/dP15zlyra3c?html5&#x3D;1">
                            <div class="media">
                                <div class="media__content">
                                    <img src="http://picsum.photos/400/225" alt="" title="" />
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="tab tab--2/3 tab--spaced tab--divider tab--woodland" data-tab="">
                <div class="tab__navigation button-group">
                    <button class="button button--small button--inline button--green button--green--outline" data-tab-for=description>
                        <span>Description</span>
                    </button>
                    <button class="button button--small button--inline button--green button--green--outline" data-tab-for=maps>
                        <span>Maps</span>
                    </button>
                    <button class="button button--small button--inline button--green button--green--outline" data-tab-for=directions>
                        <span>Directions</span>
                    </button>
                </div>

                <div class="tab__items">
                    <div class="tab__item tab__item--description" data-tab-item="description">
                        <h3 class="tab__item__title">Description</h3>
                        Description
                    </div>
                    <div class="tab__item tab__item--maps" data-tab-item="maps">
                        <h3 class="tab__item__title">Maps</h3>
                        Maps
                    </div>
                    <div class="tab__item tab__item--directions" data-tab-item="directions">
                        <h3 class="tab__item__title">Directions</h3>
                        Directions
                    </div>
                </div>
            </div>

            <section class="section section--bg-yellow ">
                <div class="section__inner">
                    <div class="cta">
                        <h2 class="cta__title">Call to Action Listing</h2>
                        <div class="cta__items">
                            <div class="cta__item">
                                <h3 class="cta__item__title">sit voluptates repudiandae</h3>
                                <i class="icon icon--medium icon--yellow-dark">
                                    <img src="../../icons/tick.png" alt="" title="" />
                                </i>

                            </div>
                            <div class="cta__item">
                                <h3 class="cta__item__title">mollitia totam necessitatibus</h3>
                                <i class="icon icon--medium icon--yellow-dark">
                                    <img src="../../icons/tick.png" alt="" title="" />
                                </i>

                            </div>
                            <div class="cta__item">
                                <h3 class="cta__item__title">incidunt sit eum</h3>
                                <i class="icon icon--medium icon--yellow-dark">
                                    <img src="../../icons/tick.png" alt="" title="" />
                                </i>

                            </div>
                            <div class="cta__item">
                                <h3 class="cta__item__title">et et itaque</h3>
                                <i class="icon icon--medium icon--yellow-dark">
                                    <img src="../../icons/tick.png" alt="" title="" />
                                </i>

                            </div>
                        </div>
                    </div>

                </div>
            </section>
        </div>
        <div class="grid__item grid__item--primary">
            <div class="sticky">
                <div class="lede">
                    <p>Ipsa voluptas asperiores voluptate facere eum amet nobis nostrum dignissimos. Et velit qui exercitationem est pariatur. Ut accusamus alias molestiae ut iusto rerum deserunt nobis a. Maxime necessitatibus quae tempora perspiciatis qui ut temporibus. Et qui ut rerum minus. Rerum odio asperiores ullam.</p>
                </div>

                <button class="button button--green" data-modal-open="modal-ff20c45c-5ba7-4ce9-8b39-d99cfff48660">
                    <span>Visit this woodland</span>
                </button>

                <a href="#" class="button button--green--dark ">
                    <span>Download PDF Details</span>
                </a>

                <div class="managed-by">
                    <div class="managed-by__person">
                        <h3 class="managed-by__title">
                            Managed by <strong>Mrs. Kacey Barton</strong>
                        </h3>
                        <div class="managed-by__avatar">
                            <img src="https://s3.amazonaws.com/uifaces/faces/twitter/weglov/128.jpg" alt="Mrs. Kacey Barton" title="" />
                        </div>
                    </div>
                    <p class="managed-by__contact">Telephone: <a href="tel:475.513.6713 x5398">475.513.6713 x5398</a></p>
                    <p class="managed-by__contact">Email: <a href="mailto:Sophia67@example.com">Sophia67@example.com</a></p>
                </div>

            </div>
        </div>
    </div>
</section>

<div class="modal modal--small" aria-hidden="true" id="modal-ff20c45c-5ba7-4ce9-8b39-d99cfff48660">
    <div class="modal__container" data-modal-close="modal-ff20c45c-5ba7-4ce9-8b39-d99cfff48660">
        <div class="modal__item" role="dialog" aria-modal="true" aria-labelledby="modal__title--ff20c45c-5ba7-4ce9-8b39-d99cfff48660">

            <header class="modal__header">
                <h2 class="modal__title" id="modal__title--ff20c45c-5ba7-4ce9-8b39-d99cfff48660">Visit Woodland</h2>
                <button type="button" data-modal-close="modal-ff20c45c-5ba7-4ce9-8b39-d99cfff48660" aria-label="Close Modal">×</button>
            </header>

            <div class="modal__content text-center">
                <p>Ducimus et voluptatem. Eos rerum dolor. Nulla aliquid perspiciatis deleniti.

                    Et nisi id voluptate blanditiis ducimus sint aliquid. Distinctio quibusdam qui. Est necessitatibus et delectus rerum aliquam facere similique cumque. Consequuntur accusamus eaque voluptatibus. Consectetur illo ipsa ex accusamus asperiores voluptas est tempora aut. Ut sunt quia aut quia est corrupti est enim aliquam.</p>

                <button class="button button--green ">
                    <span>Download PDF Details</span>
                </button>

                <button class="button button--green--dark ">
                    <span>Print PDF Details</span>
                </button>

                <p>Nulla ipsam voluptatem sint. Dolorum hic sint aperiam ipsa harum magnam. Hic atque occaecati facilis quos nisi.</p>
            </div>

        </div>
    </div>
</div>
 
{{#> @grid modifiers="2/3,spaced,divider,woodland" }}
    <div class="grid__item grid__item--secondary">
        {{ render '@block--gallery--carousel' }}
        {{ render '@block--tabs' this }}
        {{#> @section modifiers='bg-yellow' }}
            {{ render '@block--cta--listing' cta merge=true }}
        {{/ @section }}
    </div>
    <div class="grid__item grid__item--primary">
        <div class="sticky">
            <div class="lede">
                <p>{{ lede }}</p>
            </div>

            <button class="button button--green" data-modal-open="modal-{{ modal.uuid }}">
                <span>Visit this woodland</span>
            </button>

            {{ render '@button' pdf merge=true }}

            {{ render '@block--managed-by' }}
        </div>
    </div>
{{/ @grid }}

{{#> @block--modal modifiers="small" title=modal.title uuid=modal.uuid }}
<div class="modal__content text-center">
    <p>{{ modal.intro }}</p>

    {{ render '@button' modal.pdf merge=true }}
    {{ render '@button' modal.print merge=true }}

    <p>{{ modal.extra }}</p>
</div>
{{/ @block--modal }}