ArticleTemplates/articleTemplateContainerImmersive.html

<div class="article article--immersive">
    <div class="article__header">
        <div class="article__header-bg" __IMMERSIVE_BG__>
            __IMMERSIVE_EMBED__
        </div>

        <div class="article__header-info">
            __IMMERSIVE_SERIES__
            <h1 class="article__headline headline selectable">
                __TITLE__
            </h1>
        </div>

        <div class="standfirst">
            <div class="standfirst__text">__STANDFIRST__</div>
            __IMMERSIVE_BYLINE__
        </div>

        <div class="article__meta __IMMERSIVE_IMAGE_NO_CAPTION__">
            <div class="immersive__caption">
                <span class="meta__image__caption__icon" data-icon="&#xe044;" aria-hidden="true"></span>
                <p class="meta__image__caption__text">
                    <span>__IMMERSIVE_IMAGE_CAPTION__</span>
                    <span class="meta__image__caption__credit">__IMMERSIVE_IMAGE_CREDIT__</span>
                </p>
            </div>
        </div>

        <div class="listen-to-article__container keyline">
            <div class="audio-player__wrapper">
                <div class="audio-player">
                    <div class="audio-player__button--loading ">
                        <div class='pulse touchpoint__button'></div>
                    </div>
                    <a role="button" aria-role="button" class="audio-player__button touchpoint touchpoint--primary" id="audio-play-button-new" href="x-gu://playaudio/__AUDIO_URI__">
                        <span class="touchpoint__button play" data-icon="&#xe04b;" aria-hidden="true"></span>
                        <span class="touchpoint__button pause" data-icon="&#xe04D;" aria-hidden="true"></span>
                        <span class="touchpoint__label screen-readable audio-player-readable">Play</span>
                    </a>
                    <div class="audio-player__info">
                        <div class="audio-player__info__label">Listen to this article</div>
                        <div class="audio-player__info__duration"></div>
                    </div>
                </div>
            </div>
            <div class="audio-player__waveform"></div>
        </div>

        <div class="article__meta keyline-4">
            <div class="immersive__meta">
                <div class="meta__published__comments">__COMMENT_CTA__</div>
                <div class='meta__published'>
                    <div class="meta__published__date"><span class="screen-readable" id="pubdate">Published: </span><span id="published-date">__PUBDATE__</span></div>
                </div>
            </div>
        </div>

        __SPONSORSHIP__

    </div>

    <div class="article__body" id="article-body">
        <div class="from-content-api prose resizable resizable-line-height selectable">
            <h2 class="section__rule"></h2>
            __BODY__
        </div>
    </div>

    <div class="tags" id="tags">
        <span class="screen-readable">Tags:</span>
        <ul class="inline-list tags__inline-list" id="tag-list"></ul>
    </div>
</div>

__RELATED_MODULE__
__COMMENTS_MODULE__