SearchApi Design System
x
1
2
3
4
5
6
7
8
9
10
11
<header class="max-w-2xl">
  <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
    <h1 class="font-display text-3xl tracking-tight text-ink">Google Search</h1>
    <span class="inline-flex items-baseline rounded-md bg-surface px-2 py-0.5">
      <code 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">engine</code><span
        class="font-mono text-sm text-ink-muted">=</span><code
        class="font-mono text-sm text-ink">google</code>
    </span>
  </div>
  <p class="mt-2 text-ink-muted">Returns Google Search results as structured JSON, from the same endpoint every engine answers on.</p>
</header>
1
2
3
4
api = Searchapi::Apis::BY_ENGINE.fetch(engine)
render EnginePageHeaderComponent.new(
  api: api, service: Searchapi::Services::BY_KEY.fetch(api.service)
)

Name, the constant a reader types, one sentence about what comes back — and nothing else. No mark: the picker above the page draws thirty-one of them. No background and no border: a header that boxes itself competes with the workbench under it.

Param Description Input

—