Pages

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
<div class="flex flex-col min-h-screen" data-testid="page-component">
<header class="py-6 border-b border-subdued" data-testid="page-header">
<div class="flex flex-col gap-8">
<div class="px-10"><nav aria-label="Breadcrumb" data-testid="breadcrumbs">
<ol class="flex items-center">
<li class="flex text-sm items-center text-secondary whitespace-nowrap">
<a class="underline hover:no-underline focus:no-underline text-secondary hover:text-primary" href="#">Breadcrumb 1</a>
</li>
<li class="flex text-sm items-center text-secondary whitespace-nowrap">
<span aria-hidden="true" class="mx-2">/</span>
<a class="underline hover:no-underline focus:no-underline text-secondary hover:text-primary" href="#">Breadcrumb 2</a>
</li>
<li aria-current="page" class="flex text-sm items-center text-secondary whitespace-nowrap">
<span aria-hidden="true" class="mx-2">/</span>
Breadcrumb 3
</li>
</ol>
</nav></div>
<div class="px-10">
<div class="flex gap-6">
<img class="w-[100px] aspect-square object-cover rounded-full" src="https://plus.unsplash.com/premium_photo-1664453547090-0e8a92a6ed4c?auto=format&fit=crop&q=80&w=2716&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<div>
<span class="inline-block px-2 py-0.5 rounded-full text-xs text-black bg-success-subdued mb-1">
Qualified
</span>
<p class="text-2xl leading-7 font-semibold mb-2">Aaron Grosbard</p>
<p>Buoy ID: 1234</p>
</div>
</div>
</div>
</div>
</header>
<div class="px-10 py-6 grow" data-testid="page-body"> Page content
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%= anchor_page do |page| %>
<% page.with_header(border: true) do |header| %>
<% header.with_breadcrumbs do |breadcrumbs| %>
<% breadcrumbs.with_item(href: "#").with_content("Breadcrumb 1") %>
<% breadcrumbs.with_item(href: "#").with_content("Breadcrumb 2") %>
<% breadcrumbs.with_item_content("Breadcrumb 3") %>
<% end %>
<% header.with_custom_content do %>
<div class="flex gap-6">
<img class="w-[100px] aspect-square object-cover rounded-full" src="https://plus.unsplash.com/premium_photo-1664453547090-0e8a92a6ed4c?auto=format&fit=crop&q=80&w=2716&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
<div>
<%= anchor_badge("Qualified", variant: :success, class: "mb-1") %>
<%= anchor_text("Aaron Grosbard", variant: :heading_2xl, class: "mb-2") %>
<p>Buoy ID: 1234</p>
</div>
</div>
<% end %>
<% end %>
<% page.with_body do %>
Page content
<% end %>
<% end %>