菜单

卡片
卡片可以显示网站内容

下载

类型

卡片 (Card)

一张卡片。

使用复数来确保卡片的尺寸相等cards。卡片组自动使用 flex 来使得同一行的高度相同。
Kristy
Joined in 2013
Kristy is an art director living in New York.
14h
Elliot
17 likes 3 comments

卡片组 (Cards)

多个卡片一起使用

卡片的设计是灵活的适用你的内容。内容(content)块可以包括与你内容相关的通用元素。

Elliot Fu
Friends of Veronika
Elliot requested permission to view your contact details
Approve
Decline
Jenny Hess
New Member
Jenny wants to add you to the group best friends
Approve
Decline

内容

内容块 (Content Block)

卡片可以包含内容快

Project Timeline

Activity

Elliot Fu added Jenny Hess to the project
Helen Troy added two pictures

图片 (Image)

一张卡片可以含有一张图片

卡片可以使用 reveal 或者 dimmers 来显示更多的内容。
Team Fu & Hess
Create in Sep 2014
$('.special.cards .image').dimmer({ on: 'hover' });
Add Friend
Team Fu
Create in Sep 2014
Add Friend
Team Hess
Create in Aug 2014

标题 (Header)

卡片可以包含标题

Elliot Fu
Friend
Elliot Fu is a film-maker from New York.
Veronika Ossi
Friend
Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.
Jenny Hess
Friend
Jenny is a student studying Media Management at the New School

元数据 (Metadata)

卡可以包含内容元数据

你可以使用自己约定的类,来包含任意的元数据,以此来使所有的子元素自动的布局。
Cute Dog
2 days ago Animals

超链接 (Link)

一张卡可以包含链接的图片,标题,或里面的内容

制作一个全部内容链接的卡片,请查看下面的链接变化。

按钮 (Buttons)

卡可以包含按钮

Elliot Fu
Elliot Fu is a film-maker from New York.
Add Friend
Veronika Ossi
Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.
Add Friend
Jenny Hess
Jenny is a student studying Media Management at the New School
Add Friend

部件 (Approval)

卡可以包含一个喜欢标志或星星。

Cute Dog
Favorite

描述 (Description)

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

Cute Dog
2 days ago

Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their tiny stature, and even others for their massive size.

Many people also have their own barometers for what makes a cute dog.

附加内容 (Extra Content)

卡可以包含额外的内容,一边与主要内容分开。

Cute Dog
2 days ago

Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their tiny stature, and even others for their massive size.

Many people also have their own barometers for what makes a cute dog.

121 Votes

变形

流体卡片 (Fluid Card)

流体卡占用内容宽度

居中卡片 (Centered Card)

卡片可以在容器中居中

凸显卡片 (Raised Card)

卡片可以凸显在整个页面上方

Cute Dog
Animals
Matt

链接卡片 (Link Card)

卡片的整个内容可以被设定为链接到另一个页面

Cute Dog
Animals
Matt

浮动内容 (Floated Content)

任意元素可以向左浮动或者向右浮动。

你可以使用自己约定的类,来包含任意的元数据,以此来使所有的子元素自动的布局。
Cute Dog
2 days ago Animals
Matt

文本对其 (Text Alignment)

在卡片中的元素可以文本对其

你可以使用自己约定的类,来包含任意的元数据,以此来使所有的子元素自动的布局。
Cute Dog
2 days ago Animals
Matt

颜色 (Colored)

卡片可被指定为一种颜色

列数 (Column count)

一组卡片可以设置在一行中卡片的数量

Rating:
Rating:
Rating:
Rating:
Rating:
Rating:
Rating:
Rating:

堆叠 (Stackable)

一组卡可以自动将行堆叠到移动设备上的单个列中

调整您的浏览器到较小的大小,看看卡片达到断点之后的效果。

加倍 (Doubling)

在手机分辨率下一组卡片可以保持横向尺寸是列宽的两倍

缩小你的浏览器窗口大小,就能看到在到达手机分辨率断点之后卡片的堆叠效果