Polaris ViewComponents

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div style="--pc-vertical-stack-align: ;--pc-vertical-stack-order: column;--pc-vertical-stack-gap-xs: var(--p-space-5)" class="Polaris-VerticalStack">
  <h1 class="Polaris-Text--root Polaris-Text--headingXs Polaris-Text--semibold">
    Default
  </h1>
  <hr style="border-block-start: var(--p-border-width-1) solid var(--p-color-border-subdued)" class="Polaris-Divider"></hr>
<h1 class="Polaris-Text--root Polaris-Text--headingXs Polaris-Text--semibold">
  Border
</h1>
<hr style="border-block-start: var(--p-border-width-1) solid var(--p-color-border)" class="Polaris-Divider"></hr>
<h1 class="Polaris-Text--root Polaris-Text--headingXs Polaris-Text--semibold">
  Border inverse
</h1>
<hr style="border-block-start: var(--p-border-width-1) solid var(--p-color-border-inverse)" class="Polaris-Divider"></hr>
<h1 class="Polaris-Text--root Polaris-Text--headingXs Polaris-Text--semibold">
  Transparent
</h1>
<hr style="border-block-start: var(--p-border-width-1) solid transparent" class="Polaris-Divider"></hr>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
<%= polaris_vertical_stack(gap: "5") do %>
  <%= polaris_text(as: :h1, variant: :headingXs) { "Default" } %>
  <%= polaris_divider %>
  <%= polaris_text(as: :h1, variant: :headingXs) { "Border" } %>
  <%= polaris_divider(border_color: "border") %>
  <%= polaris_text(as: :h1, variant: :headingXs) { "Border inverse" } %>
  <%= polaris_divider(border_color: "border-inverse") %>
  <%= polaris_text(as: :h1, variant: :headingXs) { "Transparent" } %>
  <%= polaris_divider(border_color: "transparent") %>
<% end %>

No notes provided.

No params configured.