Anchor ViewComponents

Pages

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="border border-subdued" data-testid="panel-component">
  <div class="border-subdued px-6 py-4 border-b" data-testid="panel-header">
    <p class="text-sm leading-4 font-bold uppercase">Test Results</p>
  </div>
  <div class="p-6" data-testid="panel-body">
    <div class="flex gap-2 p-4 rounded-sm bg-critical-subdued" data-testid="banner-component">
      <!-- Source: Iconoir, added via `bin/add_icon` -->
      <svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0 text-critical mt-0.5" aria-hidden="true">
        <path d="M20.0429 21H3.95705C2.41902 21 1.45658 19.3364 2.22324 18.0031L10.2662 4.01533C11.0352 2.67792 12.9648 2.67791 13.7338 4.01532L21.7768 18.0031C22.5434 19.3364 21.581 21 20.0429 21Z" stroke="currentColor" stroke-linecap="round"></path>
        <path d="M12 9V13" stroke="currentColor" stroke-linecap="round"></path>
        <path d="M12 17.01L12.01 16.9989" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      <div class="flex flex-col items-start gap-2">
        <p class="text-lg leading-6 font-semibold">Additional testing is required.</p>
      </div>
    </div>
    <p class="mt-3">Panel body</p>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
<%= anchor_panel(active: true) do |panel| %>
  <% panel.with_header_content("Test Results") %>
  <% panel.with_body do %>
    <%= anchor_banner(variant: :critical) do |banner| %>
      <% banner.with_title_content("Additional testing is required.") %>
    <% end %>
    <%= tag.p "Panel body", class: "mt-3" %>
  <% end %>
<% end %>

No notes provided.

No params configured.