SearchApi Design System
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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 class="text-xs font-normal text-ink-muted">string</span></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 class="text-xs font-normal text-ink-muted">integer</span></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">device<span class="text-xs font-normal text-ink-muted">enum</span></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 class="text-xs font-normal text-ink-muted">enum</span></span>
  </div>
  <div class="mt-4 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-xs leading-4.5 bg-surface-sunk text-ink whitespace-nowrap">q<span class="text-xs font-normal text-ink-muted">string</span></span>
    <span class="inline-flex items-baseline gap-1.5 rounded-sm px-1.5 py-px font-mono text-xs leading-4.5 bg-surface-sunk text-ink whitespace-nowrap">num<span class="text-xs font-normal text-ink-muted">integer</span></span>
    <span class="inline-flex items-baseline gap-1.5 rounded-sm px-1.5 py-px font-mono text-xs leading-4.5 bg-surface-sunk text-ink whitespace-nowrap">device<span class="text-xs font-normal text-ink-muted">enum</span></span>
    <span class="inline-flex items-baseline gap-1.5 rounded-sm px-1.5 py-px font-mono text-xs leading-4.5 bg-surface-sunk text-ink whitespace-nowrap">time_period<span class="text-xs font-normal text-ink-muted">enum</span></span>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%# 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, type: parameter.type) %>
    <% end %>
  </div>
  <div class="mt-4 flex flex-wrap items-baseline gap-3">
    <% parameters.each do |parameter| %>
      <%= render ParamNameComponent.new(name: parameter.name, type: parameter.type, size: :sm) %>
    <% end %>
  </div>
</div>

The declared type as a quieter suffix inside the tag, for the surfaces with no Type column — a rail, a caption, the page about one parameter.

No params configured.