Skip to content
Docs

InfoCard

@hua-labs/ui
v1.0.0

bash
npm install @hua-labs/hua
tsx
import { InfoCard } from "@hua-labs/hua";

title*string-Card title
icon*IconName-Icon name
tone"blue" | "purple" | "green" | "orange""blue"Color tone
childrenReact.ReactNode-Card content

docs:common.basicUsagetsx
1import { InfoCard } from '@hua-labs/hua';
2 
3<InfoCard icon="info" title="Information" tone="blue">
4  This is an informational message.
5</InfoCard>
docs:components.infoCard.examples.variousTonestsx
1<InfoCard icon="check" title="Success" tone="green">
2  Operation completed successfully.
3</InfoCard>
4 
5<InfoCard icon="warning" title="Warning" tone="orange">
6  Please review before proceeding.
7</InfoCard>
8 
9<InfoCard icon="lightbulb" title="Tip" tone="purple">
10  Here's a helpful suggestion.
11</InfoCard>

  • •docs:components.infoCard.accessibility.iconText: docs:components.infoCard.accessibility.iconTextDesc
FeatureCardSectionHeader