<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
<:subject>Help</:subject>
<:lede words={@owner} />
<:lede words="Layout example" />
<:actions><a href="../../layout-help/#layout-help-refused-undo">{@owner}</a></:actions>
<:body id="main">
<Kit.Phoenix.Layouts.Help.help id="layout-help-refused-undo-help" subject_state={Kit.Phoenix.State.none()} topic_index_label="Topics">
<:page_refusal>
<Kit.Phoenix.Roles.Refusal.refusal id="help-undo-refused-1">
<:line>Undo is refused: support has already read the message you withdrew.</:line>
<:cause href="#support">Human support</:cause>
</Kit.Phoenix.Roles.Refusal.refusal>
</:page_refusal>
<:topic>Use the CSS core</:topic>
<:topic_index>
<ul>
<li>
<Kit.Phoenix.Roles.Destination.destination href="../../help/" current>Use the CSS core</Kit.Phoenix.Roles.Destination.destination>
<ul>
<li><Kit.Phoenix.Roles.Destination.destination href="../../help/">Load the stylesheet</Kit.Phoenix.Roles.Destination.destination></li>
<li><Kit.Phoenix.Roles.Destination.destination href="../../help/">Set the density</Kit.Phoenix.Roles.Destination.destination></li>
<li><Kit.Phoenix.Roles.Destination.destination href="../../help/">Copy a layout</Kit.Phoenix.Roles.Destination.destination></li>
</ul>
</li>
</ul>
</:topic_index>
<:keyboard_sheet_link><Kit.Phoenix.Roles.KeyboardSheet.opener sheet="help-keyboard-sheet" id="help-keyboard-sheet-opener">Keyboard shortcuts</Kit.Phoenix.Roles.KeyboardSheet.opener></:keyboard_sheet_link>
<:answer id="answer" labelledby="stylesheet" next_route={~H"""
<Kit.Phoenix.Roles.WayBack.way_back href="../../layout-help/#layout-help-refused-undo">Return to CSS core</Kit.Phoenix.Roles.WayBack.way_back>
"""}>
<p>Find the entry that matches the surface you are composing, <a href="#actions">then copy the HTML for the layout or role you need</a>, keeping the standard’s names as they stand.</p>
<h2 id="stylesheet">Load the stylesheet</h2>
<p>Load <code>kit.css</code> once, at the top of every page. Keep its fonts and icons in the folder beside the stylesheet, at the paths they ship with.</p>
<h2 id="density">Set the density</h2>
<p>Select the actor’s density on the surface with <code>data-kit-density="desk"</code>. Narrowing the page changes its arrangement, not its density.</p>
<Kit.Phoenix.Table.prose_table>
<:caption>Which density to select</:caption>
<:column_headings label="Density" />
<:column_headings label="Work" />
<:row cells={[%Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.words("Desk"), heading: true}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"Scan-dense")}]} />
<:row cells={[%Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.words("Field"), heading: true}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"Focused")}]} />
</Kit.Phoenix.Table.prose_table>
<h2 id="actions">Copy a layout</h2>
<ol>
<li>Open the page for the layout or role you need and read its example; the entry’s name is its density, and the window’s width settles the arrangement.</li>
<li>Copy the HTML as it stands.</li>
<li>Put your own words, links and native attributes in its place.</li>
</ol>
<p>A row copied out of its entry, with a hirer’s own booking put in place of the sample, reads like this:</p>
<pre><code><article data-kit-role="row">
<label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="booking" value="oakmere-12-april"><span>Select Oakmere Primary School, Main Hall, 12 April 2025</span></label>
<div data-kit-region="content-column">
<div data-kit-region="subject-column">
<div data-kit-region="line">
<div data-kit-region="subject-stamp">
<a data-kit-region="subject" href="/bookings/oakmere-primary-school/12-april/">Oakmere Primary School</a>
<span data-kit-role="stamp" data-kit-state="neutral">Awaiting payment</span>
</div>
<p data-kit-region="facts"><span data-kit-region="fact">Main Hall · 12 April 2025, 09:00–13:00 · £84.00 due on invoice BH2025041209001300MAINHALL00840</span></p>
</div>
</div>
</div>
</article></code></pre>
<p>The row’s own regions carry the booking; nothing is added around them.</p>
<div>
<p>Keep the example’s attributes as they are. The action keeps its label and dimensions while a submission waits, and the standing stays beside it.</p>
<ul>
<li>Keep every <code>data-kit-role</code> and <code>data-kit-region</code> attribute as the example has it, including the ones that look as though nothing reads them.</li>
<li>Add no class, style or wrapper of your own.</li>
<li>Set the density once, on the surface.</li>
</ul>
</div>
<Kit.Phoenix.Table.prose_table print_form="rows">
<:caption>Whole-page examples and what each one holds</:caption>
<:column_headings label="Example" />
<:column_headings label="Page address"><abbr title="Page address">URL</abbr></:column_headings>
<:column_headings label="Selection" />
<:column_headings label="Regions it fills" />
<:column_headings label="Where the actor meets it" />
<:row cells={[%Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"Shell")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"<code>/shell/desk/</code>")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"Desk")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"Identity strip, header, body")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"Scan-dense work")}]} />
<:row cells={[%Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"Shell")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"<code>/shell/field/</code>")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"Field")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"Header, body, navigation")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"Focused work")}]} />
<:row cells={[%Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"Help")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"<code>/help/</code>")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"None")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"Topic, index, answer, human support")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"One question answered")}]} />
<:row cells={[%Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"Record")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"<code>/record/</code>")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"None")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"Facts, decision, work, notes")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content(~H"One record under work")}]} />
</Kit.Phoenix.Table.prose_table>
<Kit.Phoenix.Table.prose_table print_form="rows">
<:caption>What each room includes</:caption>
<:column_headings label="Room" />
<:column_headings label="Capacity" />
<:column_headings label="Weekdays" />
<:column_headings label="Weekends" />
<:column_headings label="Deposit" />
<:column_headings label="Kitchen" />
<:column_headings label="Accessibility" />
<:column_headings label="Soundproofing" />
<:column_headings label="Refreshments" />
<:column_headings label="Parking" />
<:column_headings label="Cancellation" />
<:column_headings label="Availability" />
<:column_headings label="Projector" />
<:column_headings label="Microphones" />
<:column_headings label="Staging" />
<:column_headings label="Lighting" />
<:column_headings label="Heating" />
<:column_headings label="Storage" />
<:column_headings label="Cloakroom" />
<:column_headings label="Toilets" />
<:row cells={[%Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.words("Main Hall"), heading: true}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.named(reader(), Decimal.new("120"), "seated", 0))])}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "24.00"))), Kit.Phoenix.Words.text(" an hour")])}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "32.00"))), Kit.Phoenix.Words.text(" an hour")])}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "50.00")))])}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Full kitchen")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Step-free entrance")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Partial")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Tea and coffee")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Twelve spaces")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Fourteen days")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Mornings and evenings")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Ceiling mounted")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Two wireless")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Raised stage")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Dimmable")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Included")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Locked cupboard")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Staffed")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Four")}]} />
<:row cells={[%Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.words("Small Hall"), heading: true}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.named(reader(), Decimal.new("40"), "seated", 0))])}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "14.00"))), Kit.Phoenix.Words.text(" an hour")])}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "18.00"))), Kit.Phoenix.Words.text(" an hour")])}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "25.00")))])}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Kettle only")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Step-free entrance")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("None")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Tea and coffee")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Street only")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Seven days")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Afternoons")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Portable")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("None")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("None")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Fixed")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Included")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Shelving")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Unstaffed")}, %Kit.Phoenix.Table.ProseCell{value: Kit.Phoenix.Table.Fact.content("Two")}]} />
</Kit.Phoenix.Table.prose_table>
</:answer>
<:human_support id="support" labelledby="support-title" heading="Human support" heading_rest={%{id: "support-title"}}>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action href="mailto:support@example.test">Write to support</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
</:human_support>
</Kit.Phoenix.Layouts.Help.help>
</:body>
<:keyboard_sheet>
<Kit.Phoenix.Roles.KeyboardSheet.keyboard_sheet
id="help-keyboard-sheet"
aria-labelledby="help-shortcut-sheet-title"
>
<:heading rest={%{id: "help-shortcut-sheet-title"}}>Keyboard shortcuts</:heading>
<:group shortcuts={[%Kit.Phoenix.Roles.KeyboardSheet.Shortcut{name: "Find", keys: ["/"]}, %Kit.Phoenix.Roles.KeyboardSheet.Shortcut{name: "Today", keys: ["t"]}]}>Find and navigate</:group>
<:group shortcuts={[%Kit.Phoenix.Roles.KeyboardSheet.Shortcut{name: "New booking", keys: ["n"]}, %Kit.Phoenix.Roles.KeyboardSheet.Shortcut{name: "Keyboard sheet", keys: ["?"]}]}>Booking work</:group>
<:close>Close shortcuts</:close>
</Kit.Phoenix.Roles.KeyboardSheet.keyboard_sheet>
</:keyboard_sheet>
</Kit.Phoenix.Layouts.Shell.shell>