TextIconCard Component

This component displays an optional icon, title, text, and an optional button. It supports multiple themes.

Properties

Property	Type	Required	Default	Description
`icon`	`React.ComponentType<{ className: string; fill: string }>`	No		The optional icon component to display in the card.
`title`	`string`	Yes		The title text for the card.
`text`	`string`	Yes		The description or text content for the card.
`url`	`string`	No		The optional URL to navigate to when the button is clicked.
`className`	`string`	No		Additional CSS classes to apply to the card.
`theme`	`"yellow" \| "teal" \| "purple" \| "grey"`	No	`grey`	The theme color of the card.
`buttonText`	`string`	No		The optional text to display on the button.

Usage

TextIconCard
<TextIconCard
  icon={tbdRex}
  title="Rocket"
  text="An open source messaging service that enables wallet applications to communicate with financial institutions to discover and obtain liquidity."
  url="https://example.com"
  theme="yellow"
  buttonText="Talk Money To Me"
/>

Examples

Yellow Theme

Rocket

An open source messaging service that enables wallet applications to communicate with financial institutions to discover and obtain liquidity.

Talk Money To Me

Teal Theme

Liquidity Finder

A tool to help you find the best liquidity options available in the market.

Find Liquidity

Purple Theme

Market Watch

Keep track of market trends and make informed decisions with real-time data.

Watch Market

Teal Theme without Icon

No Icon

This card does not have an icon.

Find Out More

Purple Theme without Button and Icon

No Button and Icon

This card does not have a button and an icon.