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

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

<a class="alerts my-guardian-follow-tag __FOLLOWING_CONTRIBUTOR_TAG__" href="x-gu://follow-contributor-tag/__CONTRIBUTOR_FOLLOWID__" data-follow-tag-id="__CONTRIBUTOR_FOLLOWID__">
    <span class="alerts_icon alerts__state--unfollow-tag">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.1667C17.0626 21.1667 21.1667 17.0626 21.1667 12C21.1667 6.93739 17.0626 2.83333 12 2.83333C6.93739 2.83333 2.83333 6.93739 2.83333 12C2.83333 17.0626 6.93739 21.1667 12 21.1667ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM11.4 12.6L11.6125 17.5H12.375L12.6 12.6L17.5 12.375V11.6125L12.6 11.4L12.375 6.5H11.6125L11.4 11.4L6.5 11.6125V12.375L11.4 12.6Z"
            />
        </svg>
        <span class="alerts__label">Follow __AUTHOR_NAME__</span>
    </span>
    <span class="alerts_icon alerts__state--follow-tag">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM10.2273 14.1468L7.95659 11.9776L7.15769 12.7765L9.86602 16.5682H10.3196L17.7752 8.8519L16.9546 8.05179L10.2273 14.1468Z" fill="currentColor"/>
        </svg>
        <span class="alerts__label">Following __AUTHOR_NAME__</span>
    </span>
</a>
</br>
<a class="alerts __CONTRIBUTOR_FOLLOWING__" href="x-gu://follow/__CONTRIBUTOR_FOLLOWID__" data-follow-alert-id="__CONTRIBUTOR_FOLLOWID__">
    <span class="alerts_icon alerts__state--unfollow-notifications">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.1667C17.0626 21.1667 21.1667 17.0626 21.1667 12C21.1667 6.93739 17.0626 2.83333 12 2.83333C6.93739 2.83333 2.83333 6.93739 2.83333 12C2.83333 17.0626 6.93739 21.1667 12 21.1667ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM6.83607 11.9953C6.83607 13.3231 7.30328 14.5403 8.05328 15.5239L7.79508 15.7821C6.70082 14.8846 6 13.5321 6 11.9953C6 10.4584 6.70082 9.10591 7.79508 8.20837L8.05328 8.46657C7.30328 9.45018 6.83607 10.6674 6.83607 11.9953ZM17.1392 11.9953C17.1392 10.6674 16.7089 9.45018 15.922 8.46657L16.2048 8.20837C17.2991 9.10591 17.9999 10.4584 17.9999 11.9953C17.9999 13.5321 17.2991 14.8846 16.2048 15.7821L15.922 15.5239C16.7089 14.5403 17.1392 13.3231 17.1392 11.9953ZM8.59434 11.9953C8.59434 12.7822 8.82794 13.483 9.23368 14.0608L8.90171 14.3805C8.27467 13.7535 7.91811 12.9297 7.91811 11.9953C7.91811 11.0608 8.27467 10.2002 8.90171 9.61002L9.23368 9.9174C8.82794 10.5076 8.59434 11.2084 8.59434 11.9953ZM15.4056 11.9953C15.4056 11.2084 15.172 10.5076 14.7786 9.9174L15.086 9.61002C15.713 10.2002 16.0819 11.0608 16.0819 11.9953C16.0819 12.9297 15.713 13.7535 15.086 14.3805L14.7786 14.0608C15.172 13.483 15.4056 12.7822 15.4056 11.9953ZM13.9671 11.9952C13.9671 13.0895 13.0942 13.9624 11.9999 13.9624C10.9057 13.9624 10.0327 13.0895 10.0327 11.9952C10.0327 10.901 10.9057 10.028 11.9999 10.028C13.0942 10.028 13.9671 10.901 13.9671 11.9952ZM13.2296 11.9952C13.2296 11.319 12.664 10.7657 12.0001 10.7657C11.2993 10.7657 10.7706 11.319 10.7706 11.9952C10.7706 12.6715 11.2993 13.2247 12.0001 13.2247C12.664 13.2247 13.2296 12.6715 13.2296 11.9952Z" />
        </svg>
        <span class="alerts__label">Notifications off</span>
    </span>
    <span class="alerts_icon alerts__state--follow-notifications">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM8.05328 15.5256C7.30328 14.542 6.83607 13.3248 6.83607 11.9969C6.83607 10.669 7.30328 9.45183 8.05328 8.46822L7.79508 8.21002C6.70082 9.10756 6 10.46 6 11.9969C6 13.5338 6.70082 14.8863 7.79508 15.7838L8.05328 15.5256ZM15.9221 8.46822C16.709 9.45183 17.1393 10.669 17.1393 11.9969C17.1393 13.3248 16.709 14.542 15.9221 15.5256L16.2049 15.7838C17.2991 14.8863 18 13.5338 18 11.9969C18 10.46 17.2991 9.10756 16.2049 8.21002L15.9221 8.46822ZM9.2336 14.0625C8.82786 13.4846 8.59425 12.7838 8.59425 11.9969C8.59425 11.21 8.82786 10.5092 9.2336 9.91907L8.90163 9.61169C8.27458 10.2019 7.91802 11.0625 7.91802 11.9969C7.91802 12.9314 8.27458 13.7551 8.90163 14.3822L9.2336 14.0625ZM14.7788 9.91907C15.1722 10.5092 15.4058 11.21 15.4058 11.9969C15.4058 12.7838 15.1722 13.4846 14.7788 14.0625L15.0861 14.3822C15.7132 13.7551 16.082 12.9314 16.082 11.9969C16.082 11.0625 15.7132 10.2019 15.0861 9.61169L14.7788 9.91907ZM11.9999 10.0297C13.0941 10.0297 13.9671 10.9026 13.9671 11.9969C13.9671 13.0911 13.0941 13.9641 11.9999 13.9641C10.9056 13.9641 10.0327 13.0911 10.0327 11.9969C10.0327 10.9026 10.9056 10.0297 11.9999 10.0297Z" />
        </svg>
        <span class="alerts__label">Notifications on</span>
    </span>
</a>