x
<div class="Polaris-Layout">
<div class="Polaris-Layout__Section">
<div class="Polaris-Card">
<div class="Polaris-Card__Header">
<h2 class="Polaris-Heading">Order details</h2>
</div>
<div class="Polaris-Card__Section">
<p>View a summary of your order.</p>
</div>
</div>
</div>
<div class="Polaris-Layout__Section Polaris-Layout__Section--secondary">
<div class="Polaris-Card">
<div class="Polaris-Card__Header">
<h2 class="Polaris-Heading">Tags</h2>
</div>
<div class="Polaris-Card__Section">
<p>Add tags to your order.</p>
</div>
</div>
</div>
</div>
<%= polaris_layout do |layout| %>
<% layout.section do %>
<%= polaris_card(title: "Order details", sectioned: true) do %>
<p>View a summary of your order.</p>
<% end %>
<% end %>
<% layout.section(secondary: true) do %>
<%= polaris_card(title: "Tags", sectioned: true) do %>
<p>Add tags to your order.</p>
<% end %>
<% end %>
<% end %>

Use to follow a normal section with a secondary section to create a 2/3 + 1/3 layout on detail pages (such as individual product or order pages). Can also be used on any page that needs to structure a lot of content. This layout stacks the columns on small screens.

No params configured.