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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div class="space-y-8">
  <div>
    <p class="mb-3 text-xs text-ink-muted">Underline</p>
    <nav aria-label="Sections">
      <ul class="flex flex-wrap items-center gap-x-5 border-b border-line">
        <li>
          <a href="#overview"
           class="-mb-px inline-block border-b-2 border-accent-line px-0.5 py-2 text-sm font-medium text-accent-line"
           aria-current="page">Overview</a>
        </li>
        <li>
          <a href="#parameters"
           class="-mb-px inline-block border-b-2 border-transparent px-0.5 py-2 text-sm font-medium text-ink-muted transition-colors hover:border-line-strong hover:text-ink"
           >Parameters</a>
        </li>
        <li>
          <a href="#response"
           class="-mb-px inline-block border-b-2 border-transparent px-0.5 py-2 text-sm font-medium text-ink-muted transition-colors hover:border-line-strong hover:text-ink"
           >Response</a>
        </li>
      </ul>
    </nav>
  </div>
  <div>
    <p class="mb-3 text-xs text-ink-muted">Segmented</p>
    <nav aria-label="Sections">
      <ul class="inline-flex flex-wrap gap-0.5 rounded-lg bg-surface-sunk p-0.5">
        <li>
          <a href="#overview"
           class="inline-block rounded-md bg-surface px-3 py-1 text-sm font-medium text-ink shadow-xs"
           aria-current="page">Overview</a>
        </li>
        <li>
          <a href="#parameters"
           class="inline-block rounded-md px-3 py-1 text-sm text-ink-muted transition-colors hover:text-ink"
           >Parameters</a>
        </li>
        <li>
          <a href="#response"
           class="inline-block rounded-md px-3 py-1 text-sm text-ink-muted transition-colors hover:text-ink"
           >Response</a>
        </li>
      </ul>
    </nav>
  </div>
</div>
1
2
3
4
5
6
7
8
<div class="space-y-8">
  <% TabsComponent::VARIANTS.each do |variant| %>
    <div>
      <p class="mb-3 text-xs text-ink-muted"><%= variant.to_s.capitalize %></p>
      <%= render TabsComponent.new(items: TabsComponentPreview::ITEMS, label: "Sections", variant: variant) %>
    </div>
  <% end %>
</div>

Both presentations side by side: underlined tabs for a region's sections, the compact trough for a language switcher.

No params configured.