England Football

Efl Dynamic Page Layout 

<div class="page-wrapper efl-course-page">
    <section class="efl-hero-banner session" data-behavior="efl-hero-banner">
        <div class="efl-hero-banner__wrapper">
            <picture>
                <source media="(max-width: 819px)" srcset="/assets/example-content/hero-banner-2.jpg">
                <source media="(min-width: 820px)" srcset="/assets/example-content/hero-banner-1.jpg">
                <img src="/assets/example-content/hero-banner-1.jpg" alt="">
            </picture>
            <div class="efl-hero-banner__overlay">
                <div class="efl-hero-banner__overlay--wrapper">
                    <div class="category-tag">SESSIONS</div>
                    <h1><span class="jumpTohide">Receiving under pressure</span></h1>
                    <div class="efl-hero-banner-copy">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi tincidunt, sit amet blandit ante commodo.
                    </div>
                    <div class="efl-hero-banner-cta">
                        <a href="/" class="cta cta--primary  " tabindex="0">Primary CTA</a>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="efl-page-content__dynamic-placeholder">
        <!-- below placeholders are dynamic we need to update based on component-->
        <!--  overlaping on hero block  -->
        <div class="efl-column-layout efl-column-layout--overlap">
            <!-- overlaping on hero content -->
            <div class="rte-content rte-content--lead">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
            </div>

        </div>
        <!--  full width column block  -->
        <div class="efl-column-layout efl-column-layout--one full-width">
            <!-- full width content -->
        </div>

        <!--  minimum width column block  -->
        <div class="efl-column-layout efl-column-layout--one">
            <!-- minimum width content -->
        </div>

        <!--  two column block  -->
        <div class="efl-column-layout efl-column-layout--two">
            <div class="efl-column-layout__col">
                <!--  left column content  -->
            </div>
            <div class="efl-column-layout__col">
                <!--  right column content  -->
            </div>
        </div>
    </div>
</div>

No notes defined.

/* No context defined. */
 
<div class="page-wrapper efl-course-page">
    {{render '@efl-hero-banner'}}
    <div class="efl-page-content__dynamic-placeholder">
        <!-- below placeholders are dynamic we need to update based on component-->
        <!--  overlaping on hero block  -->
        <div class="efl-column-layout efl-column-layout--overlap">
             <!-- overlaping on hero content -->
             {{render '@rte--rte-lead'}}
        </div>
        <!--  full width column block  -->
        <div class="efl-column-layout efl-column-layout--one full-width">
             <!-- full width content -->
        </div>

        <!--  minimum width column block  -->
        <div class="efl-column-layout efl-column-layout--one">
            <!-- minimum width content -->
        </div>

        <!--  two column block  -->
        <div class="efl-column-layout efl-column-layout--two">
            <div class="efl-column-layout__col">
                <!--  left column content  -->
            </div>
            <div class="efl-column-layout__col">
                <!--  right column content  -->
            </div>
        </div>
    </div>
</div>