x
1
<div data-react-class="ImpactCard" data-react-props="{"title":"teste","icon":"fa-regular fa-pencil","iconRails":true,"balanceValue":123,"reuseCost":"12","savedValue":"34","metricUnit":"val"}" 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.
Related components
-
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
<%= render LooposUi::DataCard.new( title: 'teste', icon: 'fa-regular fa-pencil', icon_rails: true, balance_value: 123, reuse_cost: '12', saved_value: '34', metric_unit: 'val') %>No notes provided.
No params configured.
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 |