Polaris ViewComponents

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
<div class="Polaris-LegacyCard Polaris-LegacyCard--withoutTitle">
  <div class="Polaris-LegacyCard__Section Polaris-LegacyCard__Section--flush">
    <img alt="a sheet with purple and orange stripes" src="https://burst.shopifycdn.com/photos/[email protected]" />
  </div>
  <div class="Polaris-LegacyCard__Section Polaris-LegacyCard__Section--subdued">
    <div class="Polaris-TextContainer">
      You can use sales reports to see information about your customers’ orders
      based on criteria such as sales over time, by channel, or by staff.
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
<%= polaris_card do |card| %>
  <% card.with_section(flush: true) do %>
    <%= image_tag "https://burst.shopifycdn.com/photos/[email protected]",
      alt: "a sheet with purple and orange stripes" %>
  <% end %>
  <% card.with_section(subdued: true) do %>
    <%= polaris_text_container do %>
      You can use sales reports to see information about your customers’ orders
      based on criteria such as sales over time, by channel, or by staff.
    <% end %>
  <% end %>
<% end %>

Use when you need further control over the spacing of your card sections.

No params configured.