On Shell, Home, List, Record, Settings, Reports, Calendar
Popover
Words beside a fact
Deposit held: £150
The deposit comes back within five days of the hall being checked. How the hall is checked
Controls
Source
<details>
<summary>Words beside a fact</summary>
<p>Deposit held: £150 <button type="button" data-kit-role="icon-action" popovertarget="role-popover-deposit" aria-label="About the deposit"><svg data-kit-icon="info" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"/></svg></button></p>
<div id="role-popover-deposit" data-kit-role="popover" popover="auto">
<p>The deposit comes back within five days of the hall being checked. <a href="#role-popover">How the hall is checked</a></p>
</div>
</details>
<details>
<summary>Controls</summary>
<button type="button" data-kit-role="secondary-action" popovertarget="role-popover-reminder"><span data-kit-region="label">Remind me</span></button>
<div id="role-popover-reminder" data-kit-role="popover" popover="auto">
<div data-kit-role="form-group" id="role-popover-when-form-group">
<label for="role-popover-when">When</label>
<div data-kit-region="select"><select id="role-popover-when" name="when"><option value="day" selected>The day before</option><option value="week">A week before</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
<output for="role-popover-when">The day before</output>
</div>
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Set reminder</span></button>
</div>
</details>