Presence
Others on the page, one of them editing, opening who each is and what they are doing.
- Priya ShahReading
- Sam OkaforEditing the deposit
- jo@
oakmerehall.ukReading
A heading with its editor, hidden at phone.
Deposit
Sediting
Held until the keys are returned.
Source
<p class="specimen-case-line">Others on the page, one of them editing, opening who each is and what they are doing.</p>
<Kit.Phoenix.Roles.Presence.presence id="role-presence-others" label="Priya Shah, Sam Okafor and jo@oakmerehall.uk are here" people={[
%Kit.Phoenix.Roles.Avatar.Member{person: Kit.Phoenix.Roles.Avatar.person("Priya Shah", "PS"), doing: "Reading"},
%Kit.Phoenix.Roles.Avatar.Member{person: Kit.Phoenix.Roles.Avatar.person("Sam Okafor", "SO"), doing: "Editing the deposit"},
%Kit.Phoenix.Roles.Avatar.Member{person: Kit.Phoenix.Roles.Avatar.unnamed("jo@oakmerehall.uk"), doing: "Reading"}
]} />
<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><Kit.Phoenix.Roles.Presence.editor person={Kit.Phoenix.Roles.Avatar.person("Sam Okafor", "SO")} /><p>Held until the keys are returned.</p></section>