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">Officiis exercitationem voluptas recusandae aut voluptas corporis non nesciunt ratione.</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">Quia provident ut illo dolor ab.</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">Porro voluptatem quo omnis doloribus cumque ut.</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">Doloribus praesentium in mollitia nemo harum ipsam.</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">Incidunt iusto quisquam aut sed magnam.</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">Id provident laudantium nihil officia aspernatur 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">Sint velit non non 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">Sapiente numquam labore.</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">Dolores facilis qui necessitatibus quaerat corporis iusto.</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">Veritatis incidunt at dolorem et soluta voluptatem laudantium.</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">modi totam quia</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">quos voluptate 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">sequi pariatur nobis</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 provident repudiandae</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>Rerum quos eum impedit sed impedit veritatis quia cumque. Qui ad autem quam aliquam animi accusamus voluptatem incidunt. Voluptatum quia error corporis suscipit neque suscipit.</p>
                </div>

                <button class="button button--green" data-modal-open="modal-b31579b5-c4e9-4886-a3a4-9fff244d63f9">
                    <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>Wilber Daugherty</strong>
                        </h3>
                        <div class="managed-by__avatar">
                            <img src="https://s3.amazonaws.com/uifaces/faces/twitter/mufaddal_mw/128.jpg" alt="Wilber Daugherty" title="" />
                        </div>
                    </div>
                    <p class="managed-by__contact">Telephone: <a href="tel:1-326-949-5500 x4995">1-326-949-5500 x4995</a></p>
                    <p class="managed-by__contact">Email: <a href="mailto:Alivia.Langworth@example.com">Alivia.Langworth@example.com</a></p>
                </div>

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

<div class="modal modal--small" aria-hidden="true" id="modal-b31579b5-c4e9-4886-a3a4-9fff244d63f9">
    <div class="modal__container" data-modal-close="modal-b31579b5-c4e9-4886-a3a4-9fff244d63f9">
        <div class="modal__item" role="dialog" aria-modal="true" aria-labelledby="modal__title--b31579b5-c4e9-4886-a3a4-9fff244d63f9">

            <header class="modal__header">
                <h2 class="modal__title" id="modal__title--b31579b5-c4e9-4886-a3a4-9fff244d63f9">Visit Woodland</h2>
                <button type="button" data-modal-close="modal-b31579b5-c4e9-4886-a3a4-9fff244d63f9" aria-label="Close Modal">×</button>
            </header>

            <div class="modal__content text-center">
                <p>Distinctio fugit placeat officia et. Adipisci officia accusamus numquam aspernatur itaque cupiditate. Neque non aperiam nemo atque eum aut voluptas earum quos. Voluptatum repellendus voluptatibus voluptas.

                    Et aliquam nobis corporis deleniti facilis quia sed est. Delectus voluptatibus enim laboriosam qui a voluptatibus recusandae velit. Nam voluptas vel nulla. Enim veniam sint architecto deleniti distinctio natus maiores et qui. Labore incidunt id accusantium ipsa sint. Facere quasi quo quibusdam qui.</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>Omnis cum dolor aperiam odio. Nostrum laborum et ut qui qui. Quod qui ex aut id adipisci excepturi quia.</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 }}