LoopOS UI v1.1.26.2

Previews

No matching results.

x
1
<div data-react-class="ImpactCard" data-react-props="{"title":"Usage","icon":"fa-regular fa-house","iconRails":true,"balanceValue":1200,"reuseCost":"120","savedValue":"340","metricUnit":"value"}" data-react-cache-id="ImpactCard-0"></div>

DataCard

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
<%
options = params.slice(
      :title,
      :icon,
      :balance_value,
      :reuse_cost,
      :saved_value,
      :metric_unit).to_h.symbolize_keys
%>
<%= render LooposUi::DataCard.new(
    title: 'Usage',
    icon: 'fa-regular fa-house',
    balance_value: 1200,
    reuse_cost: '120',
    saved_value: '340',
    metric_unit: 'value',
    **options
) %>

No notes provided.

Param Description Input

—

—

—

—

—

—

Description

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

Arguments

Property Default Description
title `` The title of the data card
icon - The icon displayed before the title
icon_rails true Control whether it is a rails application or not, so that the icon is displayed correctly
balance_value - The balance value
reuse_cost - The reuse cost
saved_value - The saved value
metric_unit - The metric unit