Share Lightbox {% include 'components/mean-bean/share-lightbox' %}
#
HTML
<a href="#" class="button show-lightbox" data-lightbox="1">Share lightbox</a> 
<div class="lightbox lightbox--large mean-bean" data-lightbox="1">
    <picture class="desktop-only">
        <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png, /images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile_@2x.png 2x">
            <img src="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png" class="lightbox-image" alt="Mean Bean Challenge">
        </picture>
        <h1>
            Invite a friend
        </h1>
        <p>Invite a friend to attempt the Mean Bean Challenge via…</p>
        <div class="share-container">
            <a href="#" class="share-button share-button--whatsapp">
                <div class="share-button__content">
                    <img src="/images/mainsite5/svg/social/twitter.svg" />
                    <div class="share-button__text"> Whatsapp</div>
                </div>
            </a>
            <a href="#" class="share-button share-button--email">
                <div class="share-button__content">
                    <img src="/images/mainsite5/svg/social/email.svg" />
                    <div class="share-button__text"> Email</div>
                </div>
            </a>
            <a href="#" class="share-button share-button--facebook">
                <div class="share-button__content">
                    <img src="/images/mainsite5/svg/social/facebook.svg" />
                    <div class="share-button__text"> Facebook</div>
                </div>
            </a>
        </div>
        <div class="lightbox__close-circle"><a href="#" class="lightbox__close lightbox__close--icon"></a></div>
    </div>
Twig
<a href="#" class="button show-lightbox" data-lightbox="1">Share lightbox</a> 
<div class="lightbox lightbox--large mean-bean" data-lightbox="1">
	<picture class="desktop-only">
    	<source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png, /images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile_@2x.png 2x">
        <img src="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png" class="lightbox-image" alt="Mean Bean Challenge">
    </picture>
    <h1>Invite a friend</h1>
    <p>Invite a friend to attempt the Mean Bean Challenge via…</p>
    <div class="share-container">
	    <a href="#" class="share-button share-button--whatsapp">
			<div class="share-button__content">
				<img src="/images/mainsite5/svg/social/twitter.svg" /> <div class="share-button__text"> Whatsapp</div>
			</div>
		</a>
		<a href="#" class="share-button share-button--email">
			<div class="share-button__content">
				<img src="/images/mainsite5/svg/social/email.svg" /> <div class="share-button__text"> Email</div>
			</div>
		</a>
		<a href="#" class="share-button share-button--facebook">
			<div class="share-button__content">
				<img src="/images/mainsite5/svg/social/facebook.svg" /> <div class="share-button__text"> Facebook</div>
			</div>
		</a>
	</div>
    <div class="lightbox__close-circle"><a href="#" class="lightbox__close lightbox__close--icon"></a></div>
</div>
{}
Share lightbox