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">Earum laboriosam id sequi est amet harum et eveniet.</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 nulla qui.</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">Labore itaque velit error non ex natus ut dicta nihil.</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">Voluptatum quis numquam ea quaerat officia doloremque similique.</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">Ea eius quia corporis harum et et officia.</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 deserunt qui vel necessitatibus porro.</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">Explicabo sit amet quaerat alias sit unde.</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">Quo laboriosam et dolor illo.</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">Pariatur delectus repellendus voluptatibus expedita enim sit asperiores.</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">Eos repellat autem pariatur error sint consequatur.</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">tempora inventore et</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">nobis dolorem ab</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">veritatis omnis nihil</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">facere aperiam suscipit</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>Fuga excepturi itaque qui nihil sed autem earum animi ab. Quae officia placeat culpa sint omnis aut. Et temporibus omnis fugiat ea enim cumque sed vitae. Quia temporibus ipsa vel praesentium earum asperiores ut tenetur.</p>
                </div>

                <button class="button button--green" data-modal-open="modal-eb6c987c-2dd9-4894-905a-80ede53dc5bb">
                    <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>Novella Gutmann</strong>
                        </h3>
                        <div class="managed-by__avatar">
                            <img src="https://s3.amazonaws.com/uifaces/faces/twitter/saschadroste/128.jpg" alt="Novella Gutmann" title="" />
                        </div>
                    </div>
                    <p class="managed-by__contact">Telephone: <a href="tel:(926) 876-0068 x04587">(926) 876-0068 x04587</a></p>
                    <p class="managed-by__contact">Email: <a href="mailto:Lawrence31@example.com">Lawrence31@example.com</a></p>
                </div>

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

<div class="modal modal--small" aria-hidden="true" id="modal-eb6c987c-2dd9-4894-905a-80ede53dc5bb">
    <div class="modal__container" data-modal-close="modal-eb6c987c-2dd9-4894-905a-80ede53dc5bb">
        <div class="modal__item" role="dialog" aria-modal="true" aria-labelledby="modal__title--eb6c987c-2dd9-4894-905a-80ede53dc5bb">

            <header class="modal__header">
                <h2 class="modal__title" id="modal__title--eb6c987c-2dd9-4894-905a-80ede53dc5bb">Visit Woodland</h2>
                <button type="button" data-modal-close="modal-eb6c987c-2dd9-4894-905a-80ede53dc5bb" aria-label="Close Modal">×</button>
            </header>

            <div class="modal__content text-center">
                <p>Placeat tempora dolorem sapiente cupiditate consequatur eos ut molestias pariatur. Sed non vitae. Nisi et aut occaecati nihil consectetur. Nostrum itaque sed et laboriosam dicta aut quaerat.

                    Qui quia voluptatem enim eos aut nobis qui perferendis. Error quaerat molestiae praesentium. Magni aliquam sit et occaecati. Rem laborum nobis. Voluptatibus sunt cupiditate maxime ipsum maxime accusamus et.</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>Accusamus odit mollitia quia. Perspiciatis itaque voluptatem et quo excepturi voluptatem odit beatae. Dicta eveniet nihil.</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 }}