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
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
<!-- Informational -->
<div class="flex gap-2 p-4 rounded-sm bg-accent-subdued" data-testid="banner-component">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke-width="1.5" viewbox="0 0 24 24" class="shrink-0 text-accent mt-0.5" aria-hidden="true">
    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12 11.5v5m0-8.99.01-.011M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
  </svg>
  <div class="flex flex-col items-start gap-2">
    <p class="text-lg leading-6 font-semibold">This is a informational Banner</p>
    <p class="text-base leading-5">Body text</p>
  </div>
</div>
<!-- Success -->
<div class="flex gap-2 p-4 rounded-sm bg-success-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-success mt-0.5" aria-hidden="true">
    <path d="M7 12.5L10 15.5L17 8.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
    <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" 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">This is a success Banner</p>
    <p class="text-base leading-5">Body text</p>
  </div>
</div>
<!-- Warning -->
<div class="flex gap-2 p-4 rounded-sm bg-warning-subdued" data-testid="banner-component">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke-width="1.5" viewbox="0 0 24 24" class="shrink-0 text-warning mt-0.5" aria-hidden="true">
    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12 7v6m0 4.01.01-.011M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path>
  </svg>
  <div class="flex flex-col items-start gap-2">
    <p class="text-lg leading-6 font-semibold">This is a warning Banner</p>
    <p class="text-base leading-5">Body text</p>
  </div>
</div>
<!-- Critical -->
<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">This is a critical Banner</p>
    <p class="text-base leading-5">Body text</p>
  </div>
</div>
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
<%# Informational %>
<%= anchor_banner(variant:) do |banner| %>
  <% banner.with_title_content("This is a #{variant} Banner") %>
  <% banner.with_body do %>
    <%= anchor_text("Body text") %>
  <% end %>
<% end %>
<%# Success %>
<%= anchor_banner(variant:) do |banner| %>
  <% banner.with_title_content("This is a #{variant} Banner") %>
  <% banner.with_body do %>
    <%= anchor_text("Body text") %>
  <% end %>
<% end %>
<%# Warning %>
<%= anchor_banner(variant:) do |banner| %>
  <% banner.with_title_content("This is a #{variant} Banner") %>
  <% banner.with_body do %>
    <%= anchor_text("Body text") %>
  <% end %>
<% end %>
<%# Critical %>
<%= anchor_banner(variant:) do |banner| %>
  <% banner.with_title_content("This is a #{variant} Banner") %>
  <% banner.with_body do %>
    <%= anchor_text("Body text") %>
  <% end %>
<% end %>

No notes provided.

No params configured.