Icon Card
A simple component that allows an icon to be rendered on a field with a unified color scheme applied.
React Component
Icon Card
Icon Card with custom background_color and foreground_color
Icon Card - round
Sage Component
SageIconCard
<h3 class="t-sage-heading-6">Icon Card</h3>
<div class="sage-row">
<% SageTokens::STATUSES.each do | color | %>
<div class="sage-col-2">
<%= sage_component SageIconCard, {
color: color,
icon: "file",
label: "File graphic"
} %>
</div>
<% end %>
</div>
<h3 class="t-sage-heading-6">Icon Card with custom <code>background_color</code> and <code>foreground_color</code></h3>
<div class="sage-row">
<% [
{ background_color: "#A463F2", foreground_color: "#9EEBCF" },
{ background_color: "#9EEBCF", foreground_color: "#FF41B4" },
{ background_color: "#FF41B4", foreground_color: "#FBF1A9" },
{ background_color: "#FBF1A9", foreground_color: "#001B44" },
{ background_color: "#001B44", foreground_color: "#A463F2" },
].each do | color | %>
<div class="sage-col-2">
<%= sage_component SageIconCard, {
background_color: color[:background_color],
foreground_color: color[:foreground_color],
icon: "customize",
label: "Custom color"
} %>
</div>
<% end %>
</div>
<h3 class="t-sage-heading-6">Icon Card - round</h3>
<div class="sage-row">
<% SageTokens::STATUSES.each do | color | %>
<%= sage_component SageIconCard, {
color: color,
icon: "file",
label: "File graphic",
round: true
} %>
<% end %>
</div>
| Property | Description | Type | Default |
|---|---|---|---|
|
For setting additional attributes not defined above. Accepts a Ruby hash of valid key-value properties, such as data-attributes |
Hash |
|
|
The color set to use for the background color of the card. |
String |
|
|
The color set to use for the foreground and background colors of the card. |
|
|
|
The color set to use for the foreground color of the card. |
String |
|
|
The Sage icon to show inside the card. |
|
See Icons. |
|
Sets the label text for the component. |
|
nil |
|
When enabled, this gives the component a 50% |
Boolean |
|
|
The size desired for the icon. |
|
|