Polaris ViewComponents

Previews

No matching results.

Pages

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-horizontal-stack-align: ;--pc-horizontal-stack-wrap: wrap;--pc-horizontal-stack-gap-xs: var(--p-space-5)" class="Polaris-HorizontalStack">
  <h1 class="Polaris-Text--root Polaris-Text--headingXs Polaris-Text--semibold">
    Default
  </h1>
  <hr style="border-inline-start: var(--p-border-width-1) solid var(--p-color-border-subdued);inline-size: auto;min-block-size: 100%" class="Polaris-Divider"></hr>
<h1 class="Polaris-Text--root Polaris-Text--headingXs Polaris-Text--semibold">
  Border
</h1>
<hr style="border-inline-start: var(--p-border-width-1) solid var(--p-color-border);inline-size: auto;min-block-size: 100%" class="Polaris-Divider"></hr>
<h1 class="Polaris-Text--root Polaris-Text--headingXs Polaris-Text--semibold">
  Border inverse
</h1>
<hr style="border-inline-start: var(--p-border-width-1) solid var(--p-color-border-inverse);inline-size: auto;min-block-size: 100%" class="Polaris-Divider"></hr>
<h1 class="Polaris-Text--root Polaris-Text--headingXs Polaris-Text--semibold">
  Transparent
</h1>
<hr style="border-inline-start: var(--p-border-width-1) solid transparent;inline-size: auto;min-block-size: 100%" class="Polaris-Divider"></hr>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
<%= polaris_horizontal_stack(gap: "5") do %>
  <%= polaris_text(as: :h1, variant: :headingXs) { "Default" } %>
  <%= polaris_divider(direction: "block") %>
  <%= polaris_text(as: :h1, variant: :headingXs) { "Border" } %>
  <%= polaris_divider(border_color: "border", direction: "block") %>
  <%= polaris_text(as: :h1, variant: :headingXs) { "Border inverse" } %>
  <%= polaris_divider(border_color: "border-inverse", direction: "block") %>
  <%= polaris_text(as: :h1, variant: :headingXs) { "Transparent" } %>
  <%= polaris_divider(border_color: "transparent", direction: "block") %>
<% end %>

No notes provided.

No params configured.