x
<div class="Polaris-Layout">
<div class="Polaris-Layout__Section Polaris-Layout__Section--oneThird">
<div class="Polaris-Card">
<div class="Polaris-Card__Header">
<h2 class="Polaris-Heading">First third</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--oneThird">
<div class="Polaris-Card">
<div class="Polaris-Card__Header">
<h2 class="Polaris-Heading">Second third</h2>
</div>
<div class="Polaris-Card__Section">
<p>Add tags to your order.</p>
</div>
</div>
</div>
<div class="Polaris-Layout__Section Polaris-Layout__Section--oneThird">
<div class="Polaris-Card">
<div class="Polaris-Card__Header">
<h2 class="Polaris-Heading">Third third</h2>
</div>
<div class="Polaris-Card__Section">
<p>Add tags to your order.</p>
</div>
</div>
</div>
</div>
<%= polaris_layout do |layout| %>
<% layout.section(one_third: true) do %>
<%= polaris_card(title: "First third", sectioned: true) do %>
<p>View a summary of your order.</p>
<% end %>
<% end %>
<% layout.section(one_third: true) do %>
<%= polaris_card(title: "Second third", sectioned: true) do %>
<p>Add tags to your order.</p>
<% end %>
<% end %>
<% layout.section(one_third: true) do %>
<%= polaris_card(title: "Third third", sectioned: true) do %>
<p>Add tags to your order.</p>
<% end %>
<% end %>
<% end %>

Use to create a ⅓ + ⅓ + ⅓ layout. Can be used to display content of equal importance. This layout will stack the columns on small screens.

No params configured.