Card

Single-card comparison: text/graphics behind the card, toggle background (refraction / glass / blur / mask) via the switch. refraction is the recommended advanced style.

Card backgrounds (scroll)

Demo loads on client.

Empty Layout

Card with Empty

Demo loads on client.

Card compositions

Demo loads on client.

Card Sizes

size

Demo loads on client.

Layout Props (padding / radius)

layout props

Demo loads on client.

States (clickable / loading / disabled)

states

Demo loads on client.

Selection Guide (TxBaseSurface vs TxCard)

Prefer TxCard for higher-level, production-oriented usage. It already bundles variant/shadow/slots/loading/inertial and pointer-light + spring interactions.
Use TxBaseSurface when you need low-level material tuning, especially refraction/filter parameters (displace, distortionScale, redOffset/greenOffset/blueOffset, filterSaturation/filterContrast/filterBrightness, refractionHaloOpacity).
Convention: keep TxCard as a stable, out-of-the-box API; do material experiments and brand-level rendering in TxBaseSurface.

API Reference

Props

Prop	Type	Default	Description
variant	`'solid' \| 'dashed' \| 'plain'`	`'solid'`	Description for variant.
background	`'blur' \| 'glass' \| 'refraction' \| 'mask'`	`'refraction'`	Background style mapping: `blur`=filter layer, `glass`=glass layer, `refraction`=glass+filter (default recommended), `mask`=mask layer
shadow	`'none' \| 'soft' \| 'medium'`	`'none'`	Description for shadow.
size	`'small' \| 'medium' \| 'large'`	`'medium'`	TextSize
radius	`number`	`18`	Description for radius.
padding	`number`	-	Description for padding.
glassBlur	`boolean`	`true`	Applies when `background='glass' \| 'refraction'`: enables blur.
glassBlurAmount	`number`	`22`	Applies when `background='glass' \| 'refraction'`: blur strength (px).
glassOverlay	`boolean`	`true`	Applies when `background='glass' \| 'refraction'`: enables highlight overlay.
glassOverlayOpacity	`number`	`0.18`	Applies when `background='glass' \| 'refraction'`: overlay opacity.
fallbackMaskOpacity	`number`	`0.26`	Mask opacity (0-1) while motion fallback is active.
refractionStrength	`number`	`62`	Applies when `background='refraction'`: refraction strength (0-100), controlling dispersion and distortion.
refractionProfile	`'soft' \| 'filmic' \| 'cinematic'`	`'filmic'`	Applies when `background='refraction'`: refraction style preset.
refractionTone	`'mist' \| 'balanced' \| 'vivid'`	`'vivid'`	Applies when `background='refraction'`: refraction tone preset (`vivid` by default to avoid gray haze).
refractionAngle	`number`	`-24`	Applies when `background='refraction'`: primary dispersion angle in degrees.
refractionLightFollowMouse	`boolean`	`false`	Applies when `background='refraction'`: binds the highlight anchor to pointer position.
refractionLightFollowIntensity	`number`	`0.45`	Applies when `background='refraction'`: pointer follow intensity (0-1), controlling angle/strength coupling.
refractionLightSpring	`boolean`	`true`	Applies when `background='refraction'`: enables spring interpolation for pointer light tracking.
refractionLightSpringStiffness	`number`	`0.18`	Applies when `background='refraction'`: pointer-light spring stiffness (recommended 0.01-0.55).
refractionLightSpringDamping	`number`	`0.84`	Applies when `background='refraction'`: pointer-light spring damping (recommended 0.55-0.99).
clickable	`boolean`	`false`	Description for clickable.
loading	`boolean`	`false`	Description for loading.
loadingSpinnerSize	`number`	-	Description for loadingSpinnerSize.
disabled	`boolean`	`false`	Description for disabled.
inertial	`boolean`	`false`	Description for inertial.
inertialMaxOffset	`number`	`22`	Description for inertialMaxOffset.
inertialRebound	`number`	`0.12`	Description for inertialRebound.

Events

Event	Params	Description
click	`(event: MouseEvent)`	Description for click.

Slots

Column	Description
default	Description for default.
header	Description for header.
footer	Description for footer.
cover	Description for cover.

Style Customization

CSS Variables

.custom-card {
  --tx-card-fake-background: rgba(255, 255, 255, 0.8);
  --tx-card-padding: 24px;
}

Theme Customization

:root {
  /* text */
  --tx-card-background-default: rgba(255, 255, 255, 0.8);
  --tx-card-background-glass: rgba(255, 255, 255, 0.1);
  
  /* text */
  --tx-card-border-default: 1px solid rgba(0, 0, 0, 0.1);
  --tx-card-border-outlined: 1px solid var(--tx-color-border);
  
  /* text */
  --tx-card-shadow-default: 0 2px 8px rgba(0, 0, 0, 0.1);
  --tx-card-shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.15);
  
  /* textSize */
  --tx-card-padding-small: 16px;
  --tx-card-padding-medium: 20px;
  --tx-card-padding-large: 24px;
}

Best Practices

Usage Tips

Content structure: use header/body/footer sections appropriately
Visual hierarchy: use card variants to create hierarchy
Interaction feedback: provide clear feedback for clickable cards
Responsive design: ensure good behavior across screen sizes

Layout Examples

<template>
  <div class="card-grid">
    <TxCard 
      v-for="item in items" 
      :key="item.id"
      clickable
      @click="handleItemClick(item)"
    >
      <template #header>
        <h3>{{ item.title }}</h3>
      </template>
      
      <p>{{ item.description }}</p>
      
      <template #footer>
        <div class="card-actions">
          <TxButton size="small" variant="text">Text</TxButton>
          <TxButton size="small" variant="text">Text</TxButton>
        </div>
      </template>
    </TxCard>
  </div>
</template>

TouchX UI Text Card TextContentText，Text。