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 class="Polaris-Layout">
  <div class="Polaris-Layout__AnnotatedSection">
    <div class="Polaris-Layout__AnnotationWrapper">
      <div class="Polaris-Layout__Annotation">
        <div class="Polaris-TextContainer">
          <h2 class="Polaris-Text--root Polaris-Text--headingMd Polaris-Text--semibold">
            Store details
          </h2>
          <div class="Polaris-Layout__AnnotationDescription">
            <p>Shopify and your customers will use this information to contact you.</p>
          </div>
        </div>
    </div>
      <div class="Polaris-Layout__AnnotationContent">
        <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>
  </div>
</div>
1
2
3
4
5
6
7
<%= polaris_layout do |layout| %>
  <% layout.with_annotated_section(title: "Store details", description: "Shopify and your customers will use this information to contact you.") 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.