HAS Green Academy styleguide

Media Experience

1179 × 333 
<section class="o-layer o-layer--large">
    <article class="c-media-experience">
        <div class="c-media-experience__image-container">
            <picture>
                <img class="c-img  lazyload  c-media-experience__image" data-srcset="https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy&#x3D;0.503208513960338,0.5411104104798846&amp;width&#x3D;375&amp;height&#x3D;375&amp;rnd&#x3D;133032324600500000 375w, https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy&#x3D;0.503208513960338,0.5411104104798846&amp;width&#x3D;767&amp;height&#x3D;767&amp;rnd&#x3D;133032324600500000 767w, https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy&#x3D;0.503208513960338,0.5411104104798846&amp;width&#x3D;1280&amp;height&#x3D;587&amp;rnd&#x3D;133032324600500000 1280w, https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy&#x3D;0.503208513960338,0.5411104104798846&amp;width&#x3D;1920&amp;height&#x3D;880&amp;rnd&#x3D;133032324600500000 1920w, " data-src="https://has-accept-cm.azurewebsites.net/media/mi5btdei/has-websize-220.jpg?rxy&#x3D;0.503208513960338,0.5411104104798846&amp;width&#x3D;1920&amp;height&#x3D;880&amp;rnd&#x3D;133032324600500000" alt="" sizes="auto" width="1920" height="880">
            </picture>

        </div>

        <div class="c-media-experience__content-box o-flow o-retain o-layer o-layer--large">
            <h2 class="c-media-experience__heading">Korte alinea titel met afbeelding</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fringilla odio velit, eu auctor sem dictum vel. Donec porttitor velit in pulvinar malesuada. Sed mattis interdum enim, vel cursus quam.</p>
            <a class="c-button      c-button--has-icon          ">
                <span class="c-button__inner">
                    <span class="c-button__label  " data-module-bind="btn-label">
                        Kom sfeer proeven
                    </span>

                    <span class="c-button__wrap-icon">
                        <svg class="c-icon    " aria-hidden="true">
                            <use xlink:href="../../dist/sprite.svg#icon-arrow-right" />
                        </svg>

                    </span>

                </span>
            </a>
        </div>
    </article>

</section>
 
<section class="o-layer o-layer--large">
  {{ render '@molecules-media-experience' }}
</section>
 
/* No context defined. */

No notes defined.