LoopOS UI v1.1.29.0-release.2025.q4.uxe.december.rc1

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
39
40
41
42
43
44
45
46
47
48
<div class="lui-marketplace-footer">
  <div class="lui-marketplace-footer__actions">
    <div class="lui-logo">
      <div class="loopos-logos-container">
        <img src="https://lookbook.lookbook.charizard.dev.loopos.app/assets/loopos-icon-7668bd7d.png" alt="Logo" class="loopos-logos--medium">
      </div>
    </div>
    
    <div class="lui-action_buttons">
      <div class="lui-action_buttons__button-group">
        <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button">
          <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
            <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-brands fa-facebook" data-lui--button-target="leadingIcon"></i></div>
          </div>
            
          <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
            <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;">
              progress_activity
            </i>
          </div>
        </button>
        <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button">
          <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
            <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-brands fa-instagram" data-lui--button-target="leadingIcon"></i></div>
          </div>
            
          <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
            <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;">
              progress_activity
            </i>
          </div>
        </button>
        <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button">
          <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
            <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-brands fa-twitter" data-lui--button-target="leadingIcon"></i></div>
          </div>
            
          <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
            <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 12px;">
              progress_activity
            </i>
          </div>
        </button>
      </div>
    </div>
  </div>
  <span class="lui-marketplace-footer__text">apoiocliente@decathlon.com</span>
</div>

No Usage documentation to display.

1
2
3
4
5
6
7
8
9
<%= render LooposUi::Marketplace::Footer.new(email: "apoiocliente@decathlon.com", logo_url: image_url("loopos-icon.png")) do |footer| %>
    <% footer.with_social_buttons do |sb| %>
        <% sb.with_button_group do |g| %>
            <% g.with_button(leading_icon: "fa-brands fa-facebook", type: :secondary, kind: :neutral) %>
            <% g.with_button(leading_icon: "fa-brands fa-instagram", type: :secondary, kind: :neutral) %>
            <% g.with_button(leading_icon: "fa-brands fa-twitter", type: :secondary, kind: :neutral) %>
        <% end %>
    <% end %>
<% end %>

No notes provided.

No params configured.

Marketplace Footer

Description

The MarketplaceFooter component provides a consistent footer layout for marketplace pages. It displays partner branding, social media buttons, and contact information in a structured footer format.

Arguments

Property Type Description Default
email String Contact email address to display in the footer
logo_url String URL for the logo image displayed in the footer

Slots

Renders One

  • social_buttons - Action buttons component for social media links and actions

Usage

<%= render LooposUi::Marketplace::Footer.new(email: "contact@marketplace.com", logo_url: image_url("loopos-icon.png")) do |footer| %>
  <% footer.with_social_buttons do |buttons| %>
    <%= buttons.with_button(
      text: "Follow on Twitter",
      href: "https://twitter.com/marketplace",
      leading_icon: "twitter"
    ) %>
    <%= buttons.with_button(
      text: "Like on Facebook",
      href: "https://facebook.com/marketplace",
      leading_icon: "facebook"
    ) %>
  <% end %>
<% end %>