SearchApi Design System
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="space-y-6">
  <section class="overflow-hidden rounded-xl border border-line-faint bg-surface shadow-sm">
    <div class="flex items-center justify-between gap-4 bg-surface-subtle px-5 py-3.5">
      <span class="text-base font-semibold text-ink">Body on the panel surface</span>
      <span class="text-xs text-ink-muted">sunk: false</span>
    </div>
    <div class="p-5">
      <p class="text-sm text-ink-muted">Everything that is edited or acted on.</p>
    </div>
  </section>
  <section class="overflow-hidden rounded-xl border border-line-faint bg-surface shadow-sm">
    <div class="flex items-center justify-between gap-4 bg-surface-subtle px-5 py-3.5">
      <span class="text-base font-semibold text-ink">Body on the inset surface</span>
      <span class="text-xs text-ink-muted">sunk: true</span>
    </div>
    <div class="bg-surface-sunk p-5">
      <p class="text-sm text-ink-muted">A body that is read rather than edited.</p>
    </div>
  </section>
</div>
1
2
3
4
5
6
7
8
9
<div class="space-y-6">
  <%= render PanelComponent.new(title: "Body on the panel surface", hint: "sunk: false") do %>
    <p class="text-sm text-ink-muted">Everything that is edited or acted on.</p>
  <% end %>
  <%= render PanelComponent.new(title: "Body on the inset surface", hint: "sunk: true", sunk: true) do %>
    <p class="text-sm text-ink-muted">A body that is read rather than edited.</p>
  <% end %>
</div>

A body that is read rather than edited sits on the inset surface — the JSON viewer's home. Everything else sits on the panel's own surface.

No params configured.