Cutest UI 样式框架

卡片组件用法指南

基本用法

卡片组件是一种常用的内容容器，用于组织和展示相关信息。

<div class="card p-4">
    <h3>卡片标题</h3>
    <p>卡片内容描述...</p>
</div>
                

组件类型

• 基础卡片：.card - 标准卡片样式
• 提示卡片：.tip-card - 带有特殊布局的提示信息卡片
• 响应式卡片：与 .card-grid 和 .card-container 结合使用

卡片变体

• .card.-borderless - 无边框卡片
• .card.-shadowless - 无阴影卡片
• .card.-hover-lift - 增强悬停效果的卡片
• .card.-small - 小尺寸卡片
• .card.-large - 大尺寸卡片
• .card.-primary - 主色调边框卡片
• .card.-secondary - 次色调边框卡片

卡片内容结构

• .card-image - 卡片图片
• .card-title - 卡片标题
• .card-description - 卡片描述文本
• .card-actions - 卡片操作按钮区域
• .card-footer - 卡片页脚
• .card-content-center - 内容居中对齐

布局与响应式

使用 .card-container 和 .card-grid 可以创建响应式的卡片网格布局：

<div class="card-container">
    <div class="card-grid">
        <div class="card p-4">卡片 1</div>
        <div class="card p-4">卡片 2</div>
        <div class="card p-4">卡片 3</div>
    </div>
</div>
                

最佳实践

1. 保持卡片内容简洁明了，避免信息过载
2. 合理使用卡片变体和尺寸，根据内容重要性进行区分
3. 在卡片网格布局中，确保卡片高度一致以获得更好的视觉效果
4. 为卡片添加适当的悬停效果，提升用户交互体验
5. 在移动设备上，确保卡片内容易于阅读和点击
6. 使用卡片页脚展示辅助信息或操作链接