AntUI卡片Cards

无图标卡片

<div class="am-card">
    <div class="am-card-header">无图标卡片</div>
    <div class="am-card-item am-card-minfo am-card-noicon">
        <div class="am-card-content">
            <div class="am-card-title">卡片标题</div>
            <div class="am-card-subtitle">副标题非必填</div>
        </div>
        <div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
    </div>
    <div class="am-card-item am-card-minfo am-card-noicon">
        <div class="am-card-content">
            <div class="am-card-title">卡片标题</div>
            <div class="am-card-subtitle">副标题非必填</div>
        </div>
        <div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
    </div>
</div>

带图标卡片

<div class="am-card">
    <div class="am-card-header">带图标卡片</div>
    <div class="am-card-body">
        <div class="am-card-item am-card-minfo">
            <div class="am-card-thumb">
                <img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" />
            </div>
            <div class="am-card-content">
                <div class="am-card-subtitle">手工水饺</div>
                <div class="am-card-title">100元代金券</div>
            </div>
            <div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
        </div>
        <div class="am-card-item am-card-minfo">
            <div class="am-card-thumb">
                <img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" />
            </div>
            <div class="am-card-content">
                <div class="am-card-subtitle">手工水饺</div>
                <div class="am-card-title">100元代金券</div>
            </div>
            <div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
        </div>
    </div>
</div>

带图和描述文字卡片

<div class="am-card">
    <div class="am-card-header">带图和描述文字卡片样式</div>
    <div class="am-card-body">
        <div class="am-card-item">
            <div class="am-card-minfo">
                <div class="am-card-thumb">
                    <img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" />
                </div>
                <div class="am-card-content">
                    <div class="am-card-title">100元代金券</div>
                    <div class="am-card-subtitle">手工水饺</div>
                </div>
                <div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
            </div>
            <div class="am-card-footnote">
                <img src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png" />
                描述文字
            </div>
        </div>
        <div class="am-card-item">
            <div class="am-card-minfo">
                <div class="am-card-thumb">
                    <img src="https://os.alipayobjects.com/rmsportal/OhSzVdRBnfwiuCK.png" />
                </div>
                <div class="am-card-content">
                    <div class="am-card-title">100元代金券</div>
                    <div class="am-card-subtitle">手工水饺</div>
                </div>
                <div class="am-list-arrow" aria-hidden="true"><span class="am-icon arrow horizontal"></span></div>
            </div>
            <div class="am-card-footnote">
                <img src="https://zos.alipayobjects.com/rmsportal/dvUDRkRqgqjDgzCNmpJj.png" />
                描述文字
            </div>
        </div>
    </div>
</div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • AntUI文字书写范例(util/writing)

    爱知汇
  • AntUI常规Forms表单

    爱知汇
  • html+js开发模拟考试在线评分系统

    爱知汇
  • AntUI文字书写范例(util/writing)

    爱知汇
  • 【可视化】Vue基础

    Vue框架,框架的作者,尤雨溪,组件化,快速开发的特点。 生命周期 beforeCreate:组件刚刚被创建 created:组件创建完成 生成

    达达前端
  • jQuery学习笔记之概念(1)

    jQuery学习笔记之概念(1) ——————————————————————学习目录———————————————————— 1.概念 2.特点 ...

    王小雷
  • 初识SignalR~仿QQ即时聊天(群发,单发)(Web,WPF等Demo演示)【中】

    第二个阶段: QQ聊天案例,先讲一种常规的方法,下面会讲一种简单方法 先看看gif效果图把 ? 定义一个BaseHub类,里面用 qqModeList来...

    逸鹏
  • 基于Jsp和Servlet的简单项目

    链接:https://pan.baidu.com/s/1ylOi3PXFy6nwoOyVGVrBeg 提取码:yvsn

    时间静止不是简史
  • js拖拽

    用户7873631
  • <form method="post">功能无效求高手帮忙

    用户2457486

扫码关注云+社区

领取腾讯云代金券