WorkShop--EC-126 Component: Hero Block_Maxwell的博客

HTML页面

<input type="hidden" id="str1" value=${properties.hero_block} />

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"/>
<sly data-sly-call="${clientLib.js @ categories='hero_block'}"></sly>

<section class="hero hero-block red" id="hero-main" style="">
        <div class="hero-slide-menu">
                <div class="hero-slide-slant"></div>
                <button class="btn-hero-menu"><span class="slide-btn-open">&gt;</span><span class="slide-btn-close">×</span></button>
            <ul class="nav slide-nav" id="hero_name">
            </ul>
        </div>


        <div class="hero-background-container">
            <img class="hero-background large-loaded" id="pic" src="/content/dam/PeficientDigit/forresterwave_homepage_hero_lg.jpg" data-mobile-image="/content/dam/PeficientDigit/forresterwave_homepage_hero_lg.jpg" data-image="/content/dam/PeficientDigit/forresterwave_homepage_hero_lg.jpg">
            <div class="hero-caption"><a href="/go.html?url=#"></a></div>
        </div>
        <div class="color-container" style="background: no-repeat right bottom/85%; background-color: #cc1f20;">
            <i class="icon icon-blockangle" style=" color: #cc1f20 " ></i>
            <div class="hero-content">
                <h1 id="hero_name_i">Perficient Trusted to Deliver DPA</h1>

                <p id="hero_tip" style="color:white">Named a "Strong Performer" in the Forrester Wave</p>
                <a id="hero_btn" href="/go.html?url=https://blogs.perficient.com/2018/09/28/perficient-among-top-digital-process-automation-service-providers/" class="btn-hero">See Why</a>
            </div>
        </div>

    </section>

<input type="hidden" id="str1"