@guardian/mobile-apps-article-templates/ArticleTemplates/articleTemplateContainerFeatures.html

Templates for articles on both iOS and Android next-gen apps

<div class="article article--feature" id="feature-article-container">
    <div class="article__header" id="feature-header">
        <div class="section section__container hide" id="section">
            <div class="content__container">
                <div class="content__labels__container">
                    <div class="content__labels">__SECTION__</div>
                    <div class="content__series-label content__labels">__SERIES__</div>
                </div>
                __COMMENT_CTA__
            </div>
        </div>
        <div class="main-media main-media--hidden-caption" id="main-media">
            __MAIN_MEDIA__
        </div>

        <div class="article-kicker">
            __BADGE__
            <div class="article-kicker__copy">
                <div class='article-kicker__section'>__SECTION__</div>
                <div class='article-kicker__series'>
                    <span class='article-kicker__highlight'>__SERIES__</span>
                </div>
            </div>
        </div>

        <h1 class="headline selectable" id="headline">__TITLE__ __REVIEW_RATING__</h1>
        <div class="standfirst selectable" id="standfirst">
            <div class="standfirst__inner">__STANDFIRST__</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="meta keyline-4" id="meta">
            <div class="meta__misc">
                <div class="meta__published__comments">__COMMENT_CTA__</div>
                <div class="meta__byline">
                    __BYLINE__
                </div>
                <p class="meta__pubdate hide"><span class="screen-readable" id="pubdate">Published: </span><span id="published-date">__PUBDATE__</span></p>
                <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>
                __ALERTS__
            </div>
        </div>
    </div>

    __SPONSORSHIP__

    <div class="article__body" id="feature-body">
        <div class="from-content-api prose resizable resizable-line-height selectable" id="feature-body-blocks">
            __BODY__
        </div>
        __TELL_ME_WHEN__
    </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__