Tussell Components

Previews

No matching results.

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
47
48
49
<div style="max-width: 480px; padding: 1rem;">
  <div class="c-tabbed-card" data-controller="tussell-components--tabs">
    <div class="c-tabbed-card__header">
      <h3 class="c-tabbed-card__title">Your saved searches</h3>
    </div>
    <div class="c-tabbed-card__tabs" role="tablist">
      <button
        type="button"
        class="c-tabbed-card__tab c-tabbed-card__tab--active"
        role="tab"
        aria-selected="true"
        data-tabs-target="tab"
        data-action="click->tussell-components--tabs#select"
        data-index="0"
        >
        Saved searches
        <span class="c-tabbed-card__count">1</span>
      </button>
      <button
        type="button"
        class="c-tabbed-card__tab "
        role="tab"
        aria-selected="false"
        data-tabs-target="tab"
        data-action="click->tussell-components--tabs#select"
        data-index="1"
        >
        Company searches
        <span class="c-tabbed-card__count">16</span>
      </button>
    </div>
    <div class="c-tabbed-card__panels">
      <div
        class="c-tabbed-card__panel c-tabbed-card__panel--active"
        role="tabpanel"
        data-tabs-target="panel"
      >
        <p>skate related contracts — Live Opportunities</p>
      </div>
      <div
        class="c-tabbed-card__panel "
        role="tabpanel"
        data-tabs-target="panel"
      >
        <p>16 company searches saved.</p>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
<div style="max-width: 480px; padding: 1rem;">
  <%= render TussellComponents::TabbedCardComponent.new(title: "Your saved searches") do |c| %>
    <% c.with_tab(label: "Saved searches", count: 1, selected: true) do %>
      <p>skate related contracts — Live Opportunities</p>
    <% end %>
    <% c.with_tab(label: "Company searches", count: 16) do %>
      <p>16 company searches saved.</p>
    <% end %>
  <% end %>
</div>

No notes provided.

No params configured.