x
<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-Heading">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-Card">
<div class="Polaris-Card__Header">
<h2 class="Polaris-Heading">Online store dashboard</h2>
</div>
<div class="Polaris-Card__Section">
<p>View a summary of your online store’s performance.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<%= polaris_layout do |layout| %>
<% layout.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.