菜单

卡片
卡片以类似于扑克牌的方式显示网站内容

下载

类型

卡片

单个卡片。

为了确保卡片的高度一致,请使用复数,cards。 卡片组会自动使用 flex 样式来匹配同一行中卡片的高度。
Kristy
加入时间:2013 年
Kristy 是一位住在纽约的艺术总监。
14 小时
Elliot
17 个赞 3 条评论

卡片组

一组卡片。

卡片的设计是灵活的,可以适应您的内容。 content 块可以包含与您的内容相关的任何自定义元素。

Elliot Fu
Veronika 的朋友
Elliot 请求查看您的联系方式的权限
批准
拒绝
Jenny Hess
新成员
Jenny 想将您添加到 最好的朋友
批准
拒绝

内容

内容块

卡片可以包含内容块

项目时间线

活动

Elliot FuJenny Hess 添加到项目中
Helen Troy 添加了两张图片

图片

卡片可以包含图片

卡片可以使用 展现调光器 来轻松地显示额外的内容,或在悬停时显示选项
Fu & Hess 团队
创建于 2014 年 9 月
$('.special.cards .image').dimmer({ on: 'hover' });
添加朋友
Fu 团队
创建于 2014 年 9 月
添加朋友
Hess 团队
创建于 2014 年 8 月

页眉

卡片可以包含页眉

Elliot Fu
朋友
Elliot Fu 是一位来自纽约的电影制作人。
Veronika Ossi
朋友
Veronika Ossi 是一位住在纽约的布景设计师,她喜欢小猫、音乐和派对。
Jenny Hess
朋友
Jenny 是一位在新学院学习媒体管理的学生

元数据

卡片可以包含内容元数据

您可以使用自己的类约定包含任意数量的元数据,所有子元素将自动进行间距
可爱的狗狗
2 天前 动物

链接

卡片可以包含图片、页眉或内容中的链接

要使卡片的整个内容成为链接,请查看下面的链接变体

按钮

卡片可以包含按钮

Elliot Fu
Elliot Fu 是一位来自纽约的电影制作人。
添加朋友
Veronika Ossi
Veronika Ossi 是一位住在纽约的布景设计师,她喜欢小猫、音乐和派对。
添加朋友
Jenny Hess
Jenny 是一位在新学院学习媒体管理的学生
添加朋友

批准

卡片可以包含喜欢或星形操作。

可爱的狗狗
收藏

描述

卡片可以包含包含一个或多个段落的描述

可爱的狗狗
2 天前

可爱的狗狗有各种形状和大小。 一些可爱的狗狗因为它们可爱的脸而可爱,另一些狗狗因为它们娇小的体型而可爱,甚至还有一些狗狗因为它们巨大的体型而可爱。

许多人也有自己的衡量标准来判断什么狗狗是可爱的。

额外内容

卡片可以包含额外的内容,这些内容旨在与主要内容分开格式化

可爱的狗狗
2 天前

可爱的狗狗有各种形状和大小。 一些可爱的狗狗因为它们可爱的脸而可爱,另一些狗狗因为它们娇小的体型而可爱,甚至还有一些狗狗因为它们巨大的体型而可爱。

许多人也有自己的衡量标准来判断什么狗狗是可爱的。

121 票

变体

流体卡片

流体卡片会占据其容器的宽度

居中卡片

卡片可以在其容器内居中

凸起卡片

卡片可以格式化为高于页面。

可爱的狗狗
动物
Matt

链接卡片

卡片可以格式化为整个内容链接到另一个页面

可爱的狗狗
动物
Matt

浮动内容

任何内容元素都可以浮动到左边或右边

您可以使用自己的类约定包含任意数量的元数据,所有子元素将自动进行间距
可爱的狗狗
2 天前 动物
Matt

文本对齐

卡片内的任何元素都可以指定其文本对齐方式

您可以使用自己的类约定包含任意数量的元数据,所有子元素将自动进行间距
Jenny Hess

Jenny 是一位在新学院学习媒体管理的学生

Jenny

彩色

卡片可以指定一种颜色

列计数

一组卡片可以设置一行中应该存在多少个卡片

评分
评分
评分
评分
评分
评分
评分
评分

可堆叠

一组卡片可以在移动设备上自动将行堆叠为单列

将您的浏览器调整为更小的尺寸,以查看卡片在达到移动断点后堆叠

加倍

一组卡片可以在移动设备上将列宽度加倍

将您的浏览器调整为更小的尺寸,以查看卡片在达到移动断点后堆叠

调光器消息
调光器副标题