Polaris ViewComponents

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
<div class="Polaris-LegacyCard">
  <div class="Polaris-LegacyCard__Header">
    <div class="Polaris-LegacyStack Polaris-LegacyStack--alignmentTrailing">
      <div class="Polaris-LegacyStack__Item Polaris-LegacyStack__Item--fill">        
        <h2 class="Polaris-Text--root Polaris-Text--headingMd Polaris-Text--semibold">
          Online store dashboard
        </h2>
      </div>
      <div class="Polaris-LegacyStack__Item">          
        <div class="Polaris-ButtonGroup">
          <div class="Polaris-ButtonGroup__Item Polaris-ButtonGroup__Item--plain"><a content="Add variant" href="https://bao.agency" data-controller="polaris-button" class="Polaris-Button Polaris-Button--plain">
              <span class="Polaris-Button__Content">
                <div class="Polaris-Button__Text">
                  Add variant
                </div>
              </span>
            </a></div>
        </div>
      </div>
    </div>
  </div>
  <div class="Polaris-LegacyCard__Section">
    <p>View a summary of your online store’s performance.</p>
  </div>
</div>
1
2
3
4
5
6
<%= polaris_card(
  title: "Online store dashboard",
  actions: [{ content: "Add variant", url: "https://bao.agency" }]
) do %>
  <p>View a summary of your online store’s performance.</p>
<% end %>

Use for less important card actions, or actions merchants may do before reviewing the contents of the card. For example, merchants may want to add items to a card containing a long list, or enter a customer’s new address.

No params configured.