# tui-card The TUI Card component provides a simple and flexible way to create card-style UI elements with the TUI theme styling. Cards can be used to group related content and actions in a visually distinct container. ## Basic Usage To create a basic card, use the `tui-card` class on a container element: ```html

Card Title

This is the content of the card. You can put any HTML elements here.

``` ## Card Variations The TUI Card component comes with several variations to indicate different types of content: ### Default Card ```html

Default Card

This is a default card with standard styling.

```

Default Card

This is a default card with standard styling.

### Primary Card ```html

Primary Card

This is a primary card, typically used for main content or actions.

```

Primary Card

This is a primary card, typically used for main content or actions.

### Info Card ```html

Info Card

This is an info card, used to present information to the user.

```

Info Card

This is an info card, used to present information to the user.

### Warning Card ```html

Warning Card

This is a warning card, used to alert users about potential issues.

```

Warning Card

This is a warning card, used to alert users about potential issues.

### Danger Card ```html

Danger Card

This is a danger card, used to highlight critical information or errors.

```

Danger Card

This is a danger card, used to highlight critical information or errors.

## Example Here's an example of how the TUI Card component might look in your documentation:

Terminal Output

$ npm install vitepress-theme-tui
+ vitepress-theme-tui@1.0.0
added 1 package, and audited 42 packages in 2s
found 0 vulnerabilities

## Using Cards with Markdown You can use TUI Cards directly in your Markdown content: ```md

Markdown Card

This card contains **Markdown** content that will be _rendered_ properly.

```