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
19
20
21
22
23
24
25
26
27
28
<div style="height: 200px">
  <div class="Polaris-LegacyCard Polaris-LegacyCard--withoutTitle">
    <div class="Polaris-LegacyCard__Section">
      <div class="Polaris-LegacyStack Polaris-LegacyStack--vertical">
        <div class="Polaris-LegacyStack__Item">        <button data-controller="polaris-button polaris" data-target="#collapsible-block" data-action="polaris#toggleCollapsible" type="button" class="Polaris-Button">
            <span class="Polaris-Button__Content">
              <div class="Polaris-Button__Text">
                Toggle
              </div>
            </span>
          </button>
        </div>
        <div class="Polaris-LegacyStack__Item">        
          <div id="collapsible-block" data-controller="polaris-collapsible" style="max-height: 0px; overflow: hidden;" class="Polaris-Collapsible Polaris-Collapsible--isFullyClosed">
            <div class="Polaris-TextContainer">
              <p>
                Your mailing list lets you contact customers or visitors who
                have shown an interest in your store. Reach out to them with
                exclusive offers or updates about your products.
              </p>
              <a href="#" data-polaris-unstyled="true" class="Polaris-Link">Test link</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </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
<div style="height: 200px">
  <%= polaris_card do %>
    <%= polaris_stack(vertical: :true) do |stack| %>
      <% stack.with_item do %>
        <%= polaris_button(
          data: {
            controller: "polaris",
            target: "#collapsible-block",
            action: "polaris#toggleCollapsible"
          }
        ) { "Toggle" } %>
      <% end %>
      <% stack.with_item do %>
        <%= polaris_collapsible(id: "collapsible-block") do %>
          <%= polaris_text_container do %>
            <p>
              Your mailing list lets you contact customers or visitors who
              have shown an interest in your store. Reach out to them with
              exclusive offers or updates about your products.
            </p>
            <%= polaris_link(url: "#") { "Test link" } %>
          <% end %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
</div>

No notes provided.

No params configured.