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">Libero eos cum.</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">Natus perspiciatis ducimus quo cumque tenetur sed amet.</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">Eveniet explicabo in neque unde ea officiis rerum.</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">Voluptates nulla commodi et esse.</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">Provident ea rem et exercitationem qui corrupti.</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">Consequatur voluptatibus ad quia.</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">Perspiciatis quis expedita expedita non vero.</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">Mollitia eveniet soluta dolorum architecto illo ut voluptas.</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">Sed vel ea sunt quia.</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">Sunt libero voluptatem.</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">quis alias qui</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">cum assumenda ipsam</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">doloremque ducimus dolores</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">sit non omnis</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>Consequatur fuga et fuga doloremque blanditiis rerum cupiditate sit atque. Sint quas officiis. Neque necessitatibus et officiis itaque fugit ut aut. Enim vitae iste rerum ut. Ad eum et cupiditate. Quia reiciendis sapiente est ab repellat quas unde.</p>
                </div>

                <button class="button button--green" data-modal-open="modal-6880707c-e92d-48b1-b9f6-c23efbb62aa7">
                    <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. Kirsten Rowe</strong>
                        </h3>
                        <div class="managed-by__avatar">
                            <img src="https://s3.amazonaws.com/uifaces/faces/twitter/javorszky/128.jpg" alt="Mrs. Kirsten Rowe" title="" />
                        </div>
                    </div>
                    <p class="managed-by__contact">Telephone: <a href="tel:(486) 438-6615 x62264">(486) 438-6615 x62264</a></p>
                    <p class="managed-by__contact">Email: <a href="mailto:Freddie.Funk@example.com">Freddie.Funk@example.com</a></p>
                </div>

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

<div class="modal modal--small" aria-hidden="true" id="modal-6880707c-e92d-48b1-b9f6-c23efbb62aa7">
    <div class="modal__container" data-modal-close="modal-6880707c-e92d-48b1-b9f6-c23efbb62aa7">
        <div class="modal__item" role="dialog" aria-modal="true" aria-labelledby="modal__title--6880707c-e92d-48b1-b9f6-c23efbb62aa7">

            <header class="modal__header">
                <h2 class="modal__title" id="modal__title--6880707c-e92d-48b1-b9f6-c23efbb62aa7">Visit Woodland</h2>
                <button type="button" data-modal-close="modal-6880707c-e92d-48b1-b9f6-c23efbb62aa7" aria-label="Close Modal">×</button>
            </header>

            <div class="modal__content text-center">
                <p>Eveniet minus est sed repellendus perspiciatis facere aliquid rerum. Et culpa qui blanditiis et tempora. Quae sit officia molestiae est ab voluptatem. Quia iusto earum veritatis quis accusantium. Vel quibusdam nisi fugit aspernatur.

                    Consequuntur modi qui velit qui aut. Quo atque et odio error quis sint. Quidem dolore facilis aut voluptas ipsam dolorem odit. Qui similique nemo error. Doloremque qui non porro quam quos mollitia ut qui quaerat.</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>Aut reiciendis esse voluptatibus soluta doloribus distinctio culpa. Et ex odit. Dolores vero in vero placeat.</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 }}