卡片视图用来在网格组织带图片和标题的卡片内容，以下为ZUI中卡片视图的结构：

头部 包含当前列表标题
列表 多个列表部分请使用section
底部 底部显示页码及其他提示信息

包含图片链接的卡片

点击图片即可转向指定的链接地址。


Cards  26 items

关于图片的说明
关于图片的超多多多多多多多多多多多多多多多多多多多多多多多多多说明

图片链接＋标题

点击卡片即可转向指定的链接地址。


Cards  26 items

关于图片的说明 图片标题
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
Lorem ipsum dolor sit.
关于图片的说明
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!

图片＋标题链接

需要点击标题才可以打开链接地址。


Cards  26 items

关于图片的说明 Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
123 Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
Lorem ipsum dolor sit.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
tag1 343
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
tag1 343
关于图片的说明
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
tag1 343
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
tag1 343
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!

为图片增加 .media-wrapper 容器

为图片增加 .media-wrapper 容器，用来为图标固定尺寸和设置特殊效果。


Cards  26 items

.media-wrapper 也可以是一个链接 Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
123 Lorem ipsum dolor sit.

无边框卡片

为 .cards 增加 .cards-borderless。


Cards  26 items

关于图片的说明 Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
123 Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
Lorem ipsum dolor sit.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
tag1 343
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
tag1 343
关于图片的说明
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
tag1 343
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
tag1 343
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!

更为紧凑的模式

.cards-condensed


Cards  26 items

关于图片的说明
关于图片的超多多多多多多多多多多多多多多多多多多多多多多多多多说明
Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
123 Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.
Lorem ipsum dolor sit.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
tag1 343
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
tag1 343
关于图片的说明
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
343   2013-11-12 15:05:56
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
tag1 343
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
tag1 343
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem. Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!

非常感谢 @snowinfish 为本章节提供演示所用的全部图片。

图片仅供 ZUI 演示使用，未经作者授权，不得用作他用。