美国肝脏基金会

风格指南

此页面概述了当前的样式和标准 美国肝脏基金会 网站。

颜色

本网站的品牌颜色概览。
颜色和色调
透明胶片
小学
超轻
轻便
黑暗
超暗
比较
次要
超轻
轻便
黑暗
超暗
比较
重点
口音
超轻
轻便
黑暗
超暗
比较
基地
基值
超轻
轻便
黑暗
超暗
比较
超轻
轻便
黑暗
超暗
小学
反式10
反式20
反式40
反式60
反式80
反式90
反式10
反式20
反式40
反式60
反式80
反式90
重点
反式10
反式20
反式40
反式60
反式80
反式90
基地
反式10
反式20
反式40
反式60
反式80
反式90
反式10
反式20
反式40
反式60
反式80
反式90

活版印刷

以下是本网站响应式排版尺寸和粗细的概览。 这些是根据基本尺寸和数学比例计算得出的。
标题
H1 (--xxl)

标题 1 常规

标题 1 中等

标题 1 粗体

H2 (--xl)

标题 2 常规

标题 2 中等

标题 2 粗体

H3 (--l)

标题 3 常规

标题媒体

标题 3 粗体

H4 (--米)

标题 4 常规

标题 4 中等

标题 4 粗体

H5(--s)
标题 5 常规
标题媒体
标题 5 粗体
H6(--xs)
标题 6 常规
标题 6 中等
标题 6 粗体
文章主体
正文 (--m)
文本 m 常规
文本 m 媒体
文本 m 粗体
小文本 (--s)
正文
文字媒体
文字加粗
XTRA 小文本 (--xs)
文本 xs 常规
文本 xs 介质
文本 xs 粗体
国际私人包机价格项目范例

标题 1 (H1)

这是大文本。 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。

标题 2 (H2)

Lorem存有悲坐阿梅德,consectetur adipiscing ELIT,SED做eiusmod tempor UT labore等dolore Incididunt麦格纳aliqua。 UT enim广告微量veniam,QUIS nostrud laboris暂准UT斯达康ullamco实习前EA commodo consequat Aliquippa。

标题 3 (H3)

Lorem存有悲坐阿梅德,consectetur adipiscing ELIT,SED做eiusmod tempor UT labore等dolore Incididunt麦格纳aliqua。 UT enim广告微量veniam,QUIS nostrud laboris暂准UT斯达康ullamco实习前EA commodo consequat Aliquippa。

标题 4 (H4)

Lorem存有悲坐阿梅德,consectetur adipiscing ELIT,SED做eiusmod tempor UT labore等dolore Incididunt麦格纳aliqua。 UT enim广告微量veniam,QUIS nostrud laboris暂准UT斯达康ullamco实习前EA commodo consequat Aliquippa。
标题 5 (H5)
Lorem存有悲坐阿梅德,consectetur adipiscing ELIT,SED做eiusmod tempor UT labore等dolore Incididunt麦格纳aliqua。 UT enim广告微量veniam,QUIS nostrud laboris暂准UT斯达康ullamco实习前EA commodo consequat Aliquippa。
标题 6 (H6)
Lorem存有悲坐阿梅德,consectetur adipiscing ELIT,SED做eiusmod tempor UT labore等dolore Incididunt麦格纳aliqua。 UT enim广告微量veniam,QUIS nostrud laboris暂准UT斯达康ullamco实习前EA commodo consequat Aliquippa。

钮扣

纯色和轮廓按钮适用于所有颜色集,包括黑色和白色。
按钮刻度
按钮 XS
btn--主要 / btn--xs
纽扣
btn--主要 / btn--xs
按钮 M
btn--主要/ btn--m
按钮 L
btn--主要 / btn--l
按钮 XL
btn--主要 / btn--xl
按钮 XXL
btn--主要 / btn--xxl

宽度

您可以使用六个值来控制元素宽度。 他们会自动响应。
--宽度-xs
--宽度-s
--宽度-m
--宽度-l
--宽度-xl
--宽度-xxl

部分填充

部分的填充是响应式的,并且基于核心间距系统的乘数。
不包含
XS
S
M
L
XL
XXL

间距

根据基本尺寸和数学比例计算出六个级别的响应间距。 这确保边距、填充和间隙都完美匹配。
--空格-xs
--空格-s
--空格-m
--空格-l
--空格-xl
--空间-xxl

元素填充

以下是可视化为填充的六个级别的间距。

这是一张带有 XS 填充的卡片。 它的内容非常接近边缘。

这是一张带有 S 填充的卡片。 它有一点更紧的填充。

这是一张带有 M 填充的卡片。 它有标准的呼吸空间。

这是一张带有 L 填充的卡片。 它有额外的呼吸空间。

这是一张带有 XL 填充的卡片。 它有很大的喘息空间。

这是一张带有 XXL 填充的卡片。 避免在密闭空间使用它。

阴影

共有三种多层框阴影可供选择。
箱影M
框影 L
箱影 XL

边界半径

根据基本尺寸和数学比例计算出六个边界半径值。
圆形 XS
圆形S
圆角M
圆形大号
圆形 XL
圆形 XXL