Card

Define a rectangular component through Card.

Example

Card Title

This is the card content

Code:

<Card title="Card Title"> 
This is the card content
</Card>

Card content follows Markdown syntax.

Set Icon

Card with Icon

This is the card content

Code:

<Card title="Card with Icon" icon="material-two-tone-storefront"> 
This is the card content
</Card>

Clickable Navigation Card

Clicking the card will navigate to the Apifox official website

Code:

<Card title="Clickable Navigation Card" href="https://apifox.com" icon="material-two-tone-storefront">
Clicking the card will navigate to the Apifox official website
</Card>

Using Tailwind CSS Styles with the `class` Attribute

Card

Card content

Code：

<Card title="Card" class="text-center text-xl font-bold">
Card content
</Card>

Defining Styles Directly with `style`

Card

Card content

Code：

<Card title="Card" style="background-color: #f0f0f0; padding: 10px;">
Card content
</Card>

Parameter Description

Card

title

string

Title

required

Define the card title

href

string

URL address

optional

Define the card redirect URL

icon

string

Icon

optional

Define the icon. For details, refer to Icon

class

string

optional

Assign one or more class names to the HTML element, supporting Tailwind CSS.

style

string

optional

Inline style attribute, allows you to directly define CSS styles.

Example#

Set Icon#

Clickable Card for Navigation#

Using Tailwind CSS Styles with the class Attribute#

Defining Styles Directly with style#

Parameter Description#

Example

Set Icon

Clickable Card for Navigation

Using Tailwind CSS Styles with the `class` Attribute

Defining Styles Directly with `style`

Parameter Description