Polaris ViewComponents

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="Polaris-LegacyCard">
  <div class="Polaris-LegacyCard__Header">
    <h2 class="Polaris-Text--root Polaris-Text--headingMd Polaris-Text--semibold">
      Online store dashboard
    </h2>
  </div>
  <div class="Polaris-LegacyCard__Section">
    <p>View a summary of your online store’s performance.</p>
  </div>
  <div class="Polaris-LegacyCard__Section">
    <p>
      View a summary of your online store’s performance, including sales,
      visitors, top products, and referrals.
    </p>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
<%= polaris_card(title: "Online store dashboard") do |card| %>
  <% card.with_section do %>
    <p>View a summary of your online store’s performance.</p>
  <% end %>
  <% card.with_section do %>
    <p>
      View a summary of your online store’s performance, including sales,
      visitors, top products, and referrals.
    </p>
  <% end %>
<% end %>

Use when you have two related but distinct pieces of information to communicate to merchants. Multiple sections can help break up complicated concepts to make them easier to scan and understand.

No params configured.