SearchApi Design System
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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">
    <div class="flex items-center justify-between gap-3">
      <h2 class="text-sm font-semibold text-ink">Google Search</h2>
      <span class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold bg-badge-success text-badge-success-ink">Verified</span>
    </div>
  </div>
  <div class="p-5">
    <p class="text-sm text-ink-muted">
      A header slot lets a badge sit beside the title without the panel growing a
      parameter for it.
    </p>
  </div>
  <div class="bg-surface-subtle px-5 py-3 text-xs text-ink-muted">
    <div class="flex justify-end">
      <button type="button" class="inline-flex items-center justify-center gap-2 rounded-md px-4 text-sm font-medium transition-colors py-2 border border-line bg-surface-sunk text-ink hover:border-line-strong" >
        Run
      </button>
    </div>
  </div>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%= render PanelComponent.new do |panel| %>
  <% panel.with_header do %>
    <div class="flex items-center justify-between gap-3">
      <h2 class="text-sm font-semibold text-ink">Google Search</h2>
      <%= render BadgeComponent.new(meaning: :verified).with_content("Verified") %>
    </div>
  <% end %>
  <p class="text-sm text-ink-muted">
    A header slot lets a badge sit beside the title without the panel growing a
    parameter for it.
  </p>
  <% panel.with_footer do %>
    <div class="flex justify-end">
      <%= render ButtonComponent.new(variant: :secondary).with_content("Run") %>
    </div>
  <% end %>
<% end %>

The header slot and the footer slot, both filled.

No params configured.