美國肝臟基金會

風格指南

此頁面概述了當前的樣式和標準 美國肝臟基金會 網站。

顏色

本網站的品牌顏色概覽。
顏色和色調
透明膠片
主
主
超輕
亮
Medium
深烘
極暗
比較
次要
次要
超輕
亮
Medium
深烘
極暗
比較
重點
口音
超輕
亮
Medium
深烘
極暗
比較
基地
台面
超輕
亮
Medium
深烘
極暗
比較
陰涼
色號選擇
超輕
亮
Medium
深烘
極暗
主
跨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 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 exerciseitation ullamco laboris nisi ut aliquip ex ea commodo因此。

標題 3 (H3)

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 exerciseitation ullamco laboris nisi ut aliquip ex ea commodo因此。

標題 4 (H4)

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 exerciseitation ullamco laboris nisi ut aliquip ex ea commodo因此。
標題 5 (H5)
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 exerciseitation ullamco laboris nisi ut aliquip ex ea commodo因此。
標題 6 (H6)
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 exerciseitation ullamco laboris nisi ut aliquip ex ea commodo因此。

鈕扣

純色和輪廓按鈕適用於所有顏色集，包括黑色和白色。
淺色背景上的按鈕
主
初級大綱
次要二次大綱
口音
口音輪廓台面
基本輪廓
深色背景上的按鈕
主
初級大綱
次要二次大綱
口音
口音輪廓白色
白色輪廓
按鈕刻度
按鈕 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