LoopOS UI v1.1.26.2

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
49
50
51
52
53
<div class="loopos-card loopos-card__full-width">
  <div class="loopos-card__title-wrapper">
    <div class="loopos-card__title">
      <div class="loopos-card__title text-[24px]">
        <span>New Catalog</span>
      </div>
    </div>
    <div class="loopos-card__actions">
    </div>
  </div>
  <div class="loopos-card__content">
    <!-- NEW CATALOG CARD -->
    <div class="loopos-core-action-card">
      <div class="loopos-card loopos-card__full-width">
        <div class="loopos-card__title-wrapper">
          <div class="loopos-card__title">
          </div>
          <div class="loopos-card__actions">
            <div data-react-class="Tag" data-react-props="{"text":"Coming soon","variant":"primary","kind":"neutral","tSize":"large","line":"solid"}" data-react-cache-id="Tag-0"></div>
          </div>
        </div>
        <div class="loopos-card__content">
          <div class="loopos-card__content-wrapper">
            <!-- TODO: ADD NEW CATALOG -->
            <div class="flex flex-col flex-1 items-center justify-center pt-[26px] pb-[58px]">
              <div data-react-class="Tooltip" data-react-props="{"text":"Coming soon","children":"                                        \u003cdiv data-react-class=\"Button\" data-react-props=\"{\u0026quot;text\u0026quot;:\u0026quot;Add new catalog\u0026quot;,\u0026quot;app\u0026quot;:\u0026quot;neutral\u0026quot;,\u0026quot;icon\u0026quot;:\u0026quot;fa-regular fa-plus\u0026quot;,\u0026quot;disabled\u0026quot;:\u0026quot;true\u0026quot;,\u0026quot;variant\u0026quot;:\u0026quot;terciary\u0026quot;,\u0026quot;size\u0026quot;:\u0026quot;large\u0026quot;,\u0026quot;iconPosition\u0026quot;:\u0026quot;left\u0026quot;,\u0026quot;dataAttributes\u0026quot;:{\u0026quot;action\u0026quot;:\u0026quot;\u0026quot;}}\" data-react-cache-id=\"Button-0\"\u003e\u003c/div\u003e\n","placement":"top"}" data-react-cache-id="Tooltip-0"></div>
            </div>
          </div>
        </div>
      </div>
                </div>
    <!-- EXTERNAL CATALOG CARD -->
    <div class="loopos-core-action-card">
      <div class="loopos-card loopos-card__full-width">
        <div class="loopos-card__title-wrapper">
          <div class="loopos-card__title">
          </div>
          <div class="loopos-card__actions">
            <div data-react-class="Tag" data-react-props="{"text":"Coming soon","variant":"primary","kind":"neutral","tSize":"large","line":"solid"}" data-react-cache-id="Tag-0"></div>
          </div>
        </div>
        <div class="loopos-card__content">
          <div class="loopos-card__content-wrapper">
            <!-- TODO: ADD EXTERNAL CATALOG -->
            <div class="flex flex-col flex-1 items-center justify-center pt-[26px] pb-[58px]">
              <div data-react-class="Tooltip" data-react-props="{"text":"Coming soon","children":"                                        \u003cdiv data-react-class=\"Button\" data-react-props=\"{\u0026quot;text\u0026quot;:\u0026quot;Add external catalog\u0026quot;,\u0026quot;app\u0026quot;:\u0026quot;neutral\u0026quot;,\u0026quot;icon\u0026quot;:\u0026quot;fa-regular fa-plus\u0026quot;,\u0026quot;disabled\u0026quot;:\u0026quot;true\u0026quot;,\u0026quot;variant\u0026quot;:\u0026quot;terciary\u0026quot;,\u0026quot;size\u0026quot;:\u0026quot;large\u0026quot;,\u0026quot;iconPosition\u0026quot;:\u0026quot;left\u0026quot;,\u0026quot;dataAttributes\u0026quot;:{\u0026quot;action\u0026quot;:\u0026quot;\u0026quot;}}\" data-react-cache-id=\"Button-0\"\u003e\u003c/div\u003e\n","placement":"top"}" data-react-cache-id="Tooltip-0"></div>
            </div>
          </div>
        </div>
      </div>
                </div>
  </div>
</div>

Card

The Card component is a flexible container used to display related information in a concise, visually grouped layout.

-

Usage rules

  • ✅ Do
    • Use for visually grouping related content
    • Maintain a consistent card layout across similar content
  • ❌ Don't
    • Don’t overload the card with too much information
    • Don’t use inconsistent styles or sizes within a card group
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
49
50
51
<%= render LooposUi::Card::CardComponent.new(full_width: true) do |component|%>
        <!-- STYLING: Ajust padding -->
        <div class="mx-[8px] my-[12px]">
            <% component.with_title do %>
                <div class="loopos-card__title text-[24px]">
                    <span>New Catalog</span>
                </div>
            <% end %>
            <% component.with_card_content do %>
                <!-- NEW CATALOG CARD -->
                <div class="loopos-core-action-card">
                    <%= render LooposUi::Card::CardComponent.new(full_width: true) do |component|%>
                        <% component.with_action do %>
                            <%= react_component("Tag", { text: "Coming soon", variant: 'primary', kind: "neutral", tSize: "large",  line: "solid" }) %>
                        <% end %>
                        <% component.with_card_content do %>
                            <div class="loopos-card__content-wrapper">
                                <!-- TODO: ADD NEW CATALOG -->
                                <div class="flex flex-col flex-1 items-center justify-center pt-[26px] pb-[58px]">
                                    <% tooltip = capture do %>
                                        <%= react_component("Button", { text: "Add new catalog", app: "neutral", icon: "fa-regular fa-plus", disabled: "true", variant: "terciary", size: "large", iconPosition: "left", dataAttributes: { 'action': "" } }) %>
                                    <% end %>
                                    <%= react_component("Tooltip", { text: 'Coming soon' , children: tooltip, placement: "top" }) %>
                                </div>
                            </div>
                        <% end %>
                    <% end %>
                </div>
                <!-- EXTERNAL CATALOG CARD -->
                <div class="loopos-core-action-card">
                    <%= render LooposUi::Card::CardComponent.new(full_width: true) do |component|%>
                        <% component.with_action do %>
                            <%= react_component("Tag", { text: "Coming soon", variant: 'primary', kind: "neutral", tSize: "large",  line: "solid" }) %>
                        <% end %>
                        <% component.with_card_content do %>
                            <div class="loopos-card__content-wrapper">
                                <!-- TODO: ADD EXTERNAL CATALOG -->
                                <div class="flex flex-col flex-1 items-center justify-center pt-[26px] pb-[58px]">
                                    <% tooltip = capture do %>
                                        <%= react_component("Button", { text: "Add external catalog", app: "neutral", icon: "fa-regular fa-plus", disabled: "true", variant: "terciary", size: "large", iconPosition: "left", dataAttributes: { 'action': "" } }) %>
                                    <% end %>
                                    <%= react_component("Tooltip", { text: 'Coming soon' , children: tooltip, placement: "top" }) %>
                                </div>
                            </div>
                        <% end %>
                    <% end %>
                </div>
            <% end %>
        </div>
    <% end %>

No notes provided.

No params configured.

⚠️ This component is deprecated and will be removed in a future version. Please use CardV2 instead.

Card

Description

The Card component is a flexible container used to display related information in a concise, visually grouped layout.

Arguments

Property Default Description
full_width false Var that defines whether the card is full-width or not

Slots

Renders One

title - Title of the card component action - Card component action card_content - Content of Card component, can also have card components inside it footer - Footer of card component

Renders Many

top_contents - Contents that will appear on top of the card content, but below the header