Paper Components

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
29
30
<div class="Polaris-LegacyCard">
  <div class="Polaris-LegacyCard__Header">
    <h2 class="Polaris-Text--root Polaris-Text--headingMd Polaris-Text--semibold">
      Shipment 1234
    </h2>
  </div>
  <div class="Polaris-LegacyCard__Section">
    <p>View a summary of your online store’s performance.</p>
  </div>
  <div class="Polaris-LegacyCard__Footer">
    <div class="Polaris-ButtonGroup">
      <div class="Polaris-ButtonGroup__Item">              <a href="#" data-controller="paper-button" class="Polaris-Button Polaris-Button--destructive">
          <span class="Polaris-Button__Content">
            <div class="Polaris-Button__Text">
              Cancel shipment
            </div>
          </span>
        </a>
      </div>
      <div class="Polaris-ButtonGroup__Item">              <a href="#" data-controller="paper-button" class="Polaris-Button Polaris-Button--primary">
          <span class="Polaris-Button__Content">
            <div class="Polaris-Button__Text">
              Add tracking number
            </div>
          </span>
        </a>
      </div>
    </div>
    </div>
</div>
1
2
3
4
5
6
<%= paper_card(title: "Shipment 1234") do |card| %>
  <p>View a summary of your online store’s performance.</p>
  <% card.with_primary_footer_action(url: "#") { "Add tracking number" } %>
  <% card.with_secondary_footer_action(url: "#", destructive: true) { "Cancel shipment" } %>
<% end %>

Use when a card action will delete merchant data or be otherwise difficult to recover from.

No params configured.