卡片组件非常适合展示产品或者作品的列表 .. 下面我们可以自己去设计并且开发一个这样的组件 .. card 表示的就是卡片组件，这个名字是我们自己起的 .. 指的就是一种类型的界面 ..

我们还是先去设计一下 .. Windows 用户可以参考一下 .. 因为我用的这个设计工具目前只能在 mac 平台上运行。你应该也可以找到适合在 windows 平台上使用的，类似的设计软件 ..

在真正做出让浏览器能懂的这个卡片组件，.我们最好先把它的样子设计出来 .. 用哪种设计工具并不是太重要 ..

在项目的 desgin 目录的下面，有个设计文档 .. 先打开它 ..

这里我用的是一个叫 sketch 的设计工具 ..

我们之前设计过页面的导航还有英雄区 .. 在这个英雄区的下面可以是一组卡片，上面可以展示一组产品 ..

我要做的这个卡片组件的最上面，是一张图片 .. 先画一个矩形 .. 它可以作为图片的蒙板 .. 手工去设置一下它的大小 .. 360 x 238

复制一份这个图层 .. 调整一下它的大小 .. 360 x 490 ... 背景颜色设置成 白色 .. 这个图层可以作为卡片的一个容器 .. 名字是 container ..

再复制一下这个矩形图层 ..

把它转换成一张图片 .. 打开 layer 菜单 .. flatten selection to bitmap

选中这两个图层 .. 放在一个群组里 .. 名字是 image ..

再选中这个群组里的这两个图层 ... ctrl command + M ，应用一个蒙板 .. 这样上面的这个图像就会按照下面这个蒙板的尺寸显示出来 ..

然后要添加卡片组件上的文字 ... 按一下 T ... 插入文字 .. header .. 表示一个大标题 .. 设置一下文字的样式 .. 大小是 24 .. 颜色是黑色 ..

它的下面是一个子标题 ... sub header ... 大小是 14 .. 颜色是黑色 .. 让它变成大写的 ..

字间距可以大一些 .. 设置成 3 ..

子标题的下面可以添加一个小横线 .. 按一下 L ，插入一条线 .. 颜色是黑色 .. 粗线是 2 ..长度是 40

然后是一小段描述 ... description .. 大小是 14 ... 颜色是黑色 ... 不透明度设置成 87 ..

描述的下面是一些元数据，比如产品的价格，内容的发布日期这些东西 .. meta ..

选中这些图层 .. 我们可以把它转换成一个 Symbol .. 名字叫 card ..

创建以后，我们的设计里又多出一个 Symbols 页面 .. 在这里你可以找到刚才创建的这个符号 ..

在我们的设计里你可以重复使用这个 Symbol .. 在这里修改了这个 Symbol 的显示，会影响到所有使用了这个 Symbol 的地方 ..