x
1
2
3
4
5
6
7
8
<div class="rounded-2xl border border-line-faint bg-surface p-6 shadow-md"> <div class="flex flex-wrap items-baseline gap-3"> <span class="inline-flex items-baseline gap-1.5 rounded-sm px-1.5 py-px font-mono text-sm leading-5 bg-surface-sunk text-ink whitespace-nowrap">q</span> <span class="inline-flex items-baseline gap-1.5 rounded-sm px-1.5 py-px font-mono text-sm leading-5 bg-surface-sunk text-ink whitespace-nowrap">gl</span> <span class="inline-flex items-baseline gap-1.5 rounded-sm px-1.5 py-px font-mono text-sm leading-5 bg-surface-sunk text-ink whitespace-nowrap">num</span> <span class="inline-flex items-baseline gap-1.5 rounded-sm px-1.5 py-px font-mono text-sm leading-5 bg-surface-sunk text-ink whitespace-nowrap">time_period</span> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
<%# The tag is drawn on a panel, and that is a fact about the component rather than about this preview: its fill is `surface-sunk`, which the app resolves to the *canvas* in both modes — a sunk well is the page ground showing through. On the preview shell's bare canvas it would have no fill at all, so the demo draws the sheet the grid, the reference and the form all sit on. %><div class="rounded-2xl border border-line-faint bg-surface p-6 shadow-md"> <div class="flex flex-wrap items-baseline gap-3"> <% parameters.each do |parameter| %> <%= render ParamNameComponent.new(name: parameter.name) %> <% end %> </div></div>The tag with nothing added: the shape twenty repetitions down the grid's key column have to survive without reading as twenty widgets.
No params configured.