Previews

No matching results.

Pages

No matching results.

x
1
2
3
4
5
6
7
<a class="item item--link flex items-center justify-between" href="">
<div class="flex items-center gap">
<span class="icon icon--circle-check" aria-hidden="true"></span>
<h5 class="text-sm leading-none font-medium">Your profile has been verified</h5>
</div>
<span class="icon icon--arrow-right" aria-hidden="true"></span>
</a>
1
2
3
4
5
6
7
<%= link_to "", class: "item item--link flex items-center justify-between" do %>
<div class="flex items-center gap">
<span class="icon icon--circle-check" aria-hidden="true"></span>
<h5 class="text-sm leading-none font-medium">Your profile has been verified</h5>
</div>
<span class="icon icon--arrow-right" aria-hidden="true"></span>
<% end %>
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
.item {
background-color: var(--item-background, transparent);
border: 1px solid var(--item-border-color, var(--color-border));
border-radius: var(--rounded-md);
padding: var(--size-4);
}
.item--muted {
--item-background: rgb(from var(--color-border-light) r g b / .5);
}
.item--borderless {
--item-border-color: transparent;
}
.item--link:hover {
--item-background: rgb(from var(--color-border-light) r g b / .5);
}
.item--link:focus-visible {
outline: 2px solid var(--color-selected-dark);
}
.item--check:has(:checked) {
--item-background: rgb(from var(--color-border-light) r g b / .5);
--item-border-color: var(--color-primary);
}
Java Script is not required or multiple files are needed, check the notes.