Skip to content

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
<div class="tui-card">
  <div class="tui-card-title">Card Title</div>
  <div class="tui-card-content">This is the content of the card. You can put any HTML elements here.</div>
</div>

Card Variations

The TUI Card component comes with several variations to indicate different types of content:

Default Card

html
<div class="tui-card">
  <div class="tui-card-title">Default Card</div>
  <div class="tui-card-content">This is a default card with standard styling.</div>
</div>
Default Card
This is a default card with standard styling.

Primary Card

html
<div class="tui-card primary">
  <div class="tui-card-title">Primary Card</div>
  <div class="tui-card-content">This is a primary card, typically used for main content or actions.</div>
</div>
Primary Card
This is a primary card, typically used for main content or actions.

Info Card

html
<div class="tui-card info">
  <div class="tui-card-title">Info Card</div>
  <div class="tui-card-content">This is an info card, used to present information to the user.</div>
</div>
Info Card
This is an info card, used to present information to the user.

Warning Card

html
<div class="tui-card warning">
  <div class="tui-card-title">Warning Card</div>
  <div class="tui-card-content">This is a warning card, used to alert users about potential issues.</div>
</div>
Warning Card
This is a warning card, used to alert users about potential issues.

Danger Card

html
<div class="tui-card danger">
  <div class="tui-card-title">Danger Card</div>
  <div class="tui-card-content">This is a danger card, used to highlight critical information or errors.</div>
</div>
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
<div class="tui-card">
  <div class="tui-card-title">Markdown Card</div>
  <div class="tui-card-content">
    This card contains **Markdown** content that will be _rendered_ properly.
  </div>
</div>