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
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="Polaris-LegacyCard">
  <div class="Polaris-LegacyCard__Header">
    <h2 class="Polaris-Text--root Polaris-Text--headingMd Polaris-Text--semibold">
      Secure your account with 2-step authentication
    </h2>
  </div>
  <div class="Polaris-LegacyCard__Section">
    <div class="Polaris-LegacyStack Polaris-LegacyStack--spacingLoose Polaris-LegacyStack--vertical">
      <div class="Polaris-LegacyStack__Item">        
        <p>
          Two-step authentication adds an extra layer of security when logging in
          to your account. A special code will be required each time you log in,
          ensuring only you can access your account.
        </p>
      </div>
      <div class="Polaris-LegacyStack__Item">        
        <div class="Polaris-LegacyStack Polaris-LegacyStack--distributionTrailing">
          <div class="Polaris-ButtonGroup">
            <div class="Polaris-ButtonGroup__Item"><button type="button" data-controller="polaris-button" class="Polaris-Button">
                <span class="Polaris-Button__Content">
                  <div class="Polaris-Button__Text">
                    Enable two-step authentication
                  </div>
                </span>
              </button></div>
            <div class="Polaris-ButtonGroup__Item Polaris-ButtonGroup__Item--plain"><button type="button" data-controller="polaris-button" class="Polaris-Button Polaris-Button--plain">
                <span class="Polaris-Button__Content">
                  <div class="Polaris-Button__Text">
                    Learn more
                  </div>
                </span>
              </button></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%= polaris_card(title: "Secure your account with 2-step authentication") do |card| %>
  <% card.with_section do %>
    <%= polaris_stack(spacing: :loose, vertical: true) do |stack| %>
      <% stack.with_item do %>
        <p>
          Two-step authentication adds an extra layer of security when logging in
          to your account. A special code will be required each time you log in,
          ensuring only you can access your account.
        </p>
      <% end %>
      <% stack.with_item do %>
        <%= polaris_stack(distribution: :trailing) do %>
          <%= polaris_button_group do |group| %>
            <% group.with_button { "Enable two-step authentication" } %>
            <% group.with_button(plain: true) { "Learn more" } %>
          <% end %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Use to present actionable content that is optional or not the primary purpose of the page.

No params configured.