Shards 是一个基于 Bootstrap 4 的现代设计系统，其中包含 10 个额外的自定义组件 以及 两个预建的登陆页面。它也是轻量级的，仅具有样式表权重 ~12kb 缩小并压缩.
颜色
我们通过更明亮的颜色变化增强了 Bootstrap 的语义颜色选择，以提高对比度和可访问性。
版式
Shards 使用 Poppins 作为标题的主要字体，并使用系统的 UI 字体和 Roboto-first 后备字体（仅在非 Apple 设备上）来处理其余内容。
| 类型 | 示例 | 字体 | 字体大小 | 行高 |
|---|---|---|---|---|
| 标题 1 |
ABCABC |
Poppins 半粗体 | 3.052 快速眼动 | 3 快速眼动 |
| 标题 2 |
ABCABC |
Poppins 中型 | 2.441 快速眼动 | 2.25 快速眼动 |
| 标题 3 |
ABCABC |
Poppins 中型 | 1.953 快速眼动 | 2.25 快速眼动 |
| 段落 |
ABCABC |
系统 UI / Roboto | 1 次快速眼动 | 1.5 |
图标包🦄
Shards 默认支持两者 材质 以及 FontAwesome 包。图标几乎可以放置在任何元素中，而无需修改套件。
材质图标
超过 900 个图标
Font Awesome
超过 600 个图标
表单控件
所有表单控件都通过微过渡和阴影进行了改进，带来了深度并改善了整体用户体验。
简单的表格
使用图标
可以利用任一受支持包中的图标来对表单控件进行风格化。它们可以放置在默认或无缝集成的输入组插件中。
无缝
默认
自定义控件
默认的自定义表单字段得到改进和扩展。新增加的内容之一是 拨动开关 控制。
复选框
单选按钮
切换
自定义下拉菜单
自定义文件输入
验证
表单验证也得到了改进，以匹配新的整体表单感觉，同时遵循相同的交互原则以确保一致性。
滑块
滑块也是一种新的自定义控件，几乎可以在任何地方以最少的标记集成 （单个元素） 以及通过 JavaScript 扩展的自定义选项。
日期选择器
日期选择器也可用，与滑块控件类似 非常容易创建，基于单个输入元素。日期选择器也可以自定义，例如，您可以使用范围选择创建复杂的配置。
卡片
我们希望卡片能够脱颖而出并带来深度，而不改变其原始结构。所有这一切同时允许它们与其他组件很好地配合。
进度条
除了默认样式之外，Shards 还允许您调整宽度并向进度条添加标签。
宽度
标签
莫代尔
使用美观且无干扰的模式向用户显示确认消息、表单或任何类型的内容。
徽章
徽章与按钮类似，提供所有主题颜色、填充和轮廓模式以及三种变体样式：圆形、药丸形和方形。
工具提示和弹出窗口
不要通过将工具提示和弹出框附加到任何元素来让您的用户猜测。只需确保首先通过 JavaScript 启用它们即可。
