Lens design system

Focus Embed

Focus (with embed)

A white section with a large embed positioned below the heading and description of the page. Used when the element is a focal part of the page.

Images and embeds in Lens use a 16:9 ratio for consistency.

<!-- COMPONENT: Focus -->
<section class="small-padding stack-section">
    <div class="row column text-center">
        <figure class="focus video">
            <!-- COMPONENT: Embedded media - Video -->
            <div class="embedded-media">
                <iframe src="https://player.vimeo.com/video/240689257" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" data-vimeo-tracked="true" data-ready="true" height="360" frameborder="0" width="640"></iframe>
            </div>
            <!-- End component: Embedded media - Video -->
        </figure>
    </div>
</section>
<!-- End component: Focus -->