Presence

<p class="specimen-case-line">Others on the page, one of them editing, opening who each is and what they are doing.</p>
<div data-kit-role="presence"><div data-kit-role="avatar-group"><button type="button" popovertarget="role-presence-others" aria-label="Priya Shah, Sam Okafor and jo@oakmerehall.uk are here"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">PS</span></span><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">SO</span></span><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">J</span></span></button><div id="role-presence-others" data-kit-role="popover" popover="auto"><ul><li><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">PS</span></span><span data-kit-region="name">Priya Shah</span><span data-kit-region="doing">Reading</span></li><li><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">SO</span></span><span data-kit-region="name">Sam Okafor</span><span data-kit-region="doing">Editing the deposit</span></li><li><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">J</span></span><span data-kit-region="name"><span data-kit-region="email"><span><span>jo@</span><wbr /><span>oakmerehall.uk</span></span></span></span><span data-kit-region="doing">Reading</span></li></ul></div></div></div>
<p class="specimen-case-line">A heading with its editor, hidden at phone.</p>
<section aria-labelledby="role-presence-deposit"><h2 id="role-presence-deposit">Deposit</h2><p data-kit-role="presence"><span data-kit-role="avatar" data-kit-size="small" role="img" aria-label="Sam Okafor"><span data-kit-region="initials">S</span></span><span data-kit-region="editing">editing</span></p><p>Held until the keys are returned.</p></section>