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
<div class="Polaris-Layout">
  <div class="Polaris-Layout__Section Polaris-Layout__Section--oneThird">    
    <div style="margin-top: var(--p-space-5)">
      <div class="Polaris-TextContainer">
        <h2 class="Polaris-Text--root Polaris-Text--headingMd Polaris-Text--semibold">
          Store details
        </h2>
        <p class="Polaris-Text--root Polaris-Text--bodyMd Polaris-Text--subdued Polaris-Text--regular">
          Shopify and your customers will use this information to contact
          you.
        </p>
        </div>
    </div>
  </div>
  <div class="Polaris-Layout__Section">    
    <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>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%= polaris_layout do |layout| %>
  <% layout.with_section(one_third: true) do %>
    <div style="margin-top: var(--p-space-5)">
      <%= polaris_text_container do %>
        <%= polaris_text(variant: :headingMd, as: :h2) do %>
          Store details
        <% end %>
        <%= polaris_text(color: :subdued, as: :p) do %>
          Shopify and your customers will use this information to contact
          you.
        <% end %>
        </div>
      <% end %>
  <% end %>
  <% layout.with_section do %>
    <%= polaris_card(title: "Online store dashboard", sectioned: true) do %>
      <p>View a summary of your online store’s performance.</p>
    <% end %>
  <% end %>
<% end %>

Use for settings pages. When settings are grouped thematically in annotated sections, the title and description on each section helps merchants quickly find the setting they’re looking for.

No params configured.