Американский фонд печени

Гид по стилю

На этой странице представлены текущие стили и стандарты для Американский фонд печени Веб-сайт.

Цвета

Обзор фирменных цветов этого сайта.
Цвета и оттенки
Диапозитивы
первичный
первичная
Ультра свет
Лайт
Medium
темно
Ультра темный
Comp
вторичный
Старшая школа
Ультра свет
Лайт
Medium
темно
Ультра темный
Comp
акцент
Акцент
Ультра свет
Лайт
Medium
темно
Ультра темный
Comp
Использование темпера с изогнутым основанием
Система исчисления
Ультра свет
Лайт
Medium
темно
Ультра темный
Comp
оттенок
Тень
Ультра свет
Лайт
Medium
темно
Ультра темный
первичный
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
вторичный
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
акцент
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
Использование темпера с изогнутым основанием
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90
оттенок
Trans 10
Trans 20
Trans 40
Trans 60
Trans 80
Trans 90

книгопечатание

Ниже приведен обзор размеров и веса адаптивной типографики для этого сайта. Они рассчитываются на основе базового размера и математической шкалы.
Заголовки
H1 (--xxl)

Заголовок 1 Обычный

Заголовок 1 Средний

Заголовок 1 жирный

H2 (--xl)

Заголовок 2 Обычный

Заголовок 2 Средний

Заголовок 2 жирный

Н3 (--л)

Заголовок 3 Обычный

Заголовок средний

Заголовок 3 жирный

H4 (--м)

Заголовок 4 Обычный

Заголовок 4 Средний

Заголовок 4 жирный

H5 (--с)
Заголовок 5 Обычный
Заголовок средний
Заголовок 5 жирный
H6 (--xs)
Заголовок 6 Обычный
Заголовок 6 Средний
Заголовок 6 жирный
Основной текст
ОСНОВНОЙ ТЕКСТ (--m)
Текст m Обычный
Текст м Средний
Текст м полужирный
МЕЛКИЙ ТЕКСТ (--s)
Обычный текст
Среда текста
Текст жирный
СВЕРХМАЛЕНЬКИЙ ТЕКСТ (--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 боль сидеть Амет, consectetur adipiscing Элит, СЭД у eiusmod Tempor incididunt ет Лабор и др Dolore магна aliqua. Ut enim объявление минит veniam, Quis nostrud ullamco Laboris упражнения НИСЬ ет aliquip экс еа Commodo consequat.

Заголовок 3 (H3)

Lorem Ipsum боль сидеть Амет, consectetur adipiscing Элит, СЭД у eiusmod Tempor incididunt ет Лабор и др Dolore магна aliqua. Ut enim объявление минит veniam, Quis nostrud ullamco Laboris упражнения НИСЬ ет aliquip экс еа Commodo consequat.

Заголовок 4 (H4)

Lorem Ipsum боль сидеть Амет, consectetur adipiscing Элит, СЭД у eiusmod Tempor incididunt ет Лабор и др Dolore магна aliqua. Ut enim объявление минит veniam, Quis nostrud ullamco Laboris упражнения НИСЬ ет aliquip экс еа Commodo consequat.
Заголовок 5 (H5)
Lorem Ipsum боль сидеть Амет, consectetur adipiscing Элит, СЭД у eiusmod Tempor incididunt ет Лабор и др Dolore магна aliqua. Ut enim объявление минит veniam, Quis nostrud ullamco Laboris упражнения НИСЬ ет aliquip экс еа Commodo consequat.
Заголовок 6 (H6)
Lorem Ipsum боль сидеть Амет, consectetur adipiscing Элит, СЭД у eiusmod Tempor incididunt ет Лабор и др Dolore магна aliqua. Ut enim объявление минит veniam, Quis nostrud ullamco Laboris упражнения НИСЬ ет aliquip экс еа Commodo consequat.

Кнопки

Сплошные и контурные кнопки доступны во всех цветовых наборах, включая черный и белый.
КНОПКА ШКАЛА
Кнопка XS
btn--основной / btn--xs
Кнопка S
btn--основной / btn--xs
Кнопка М
бтн--основной / бтн--м
Кнопка L
btn--основной / btn--l
Пуговица XL
btn--основной / btn--xl
Кнопка ХХL
btn--основной / btn--xxl

Ширина

Существует шесть значений, которые вы можете использовать для управления шириной элемента. Они автоматически реагируют.
--width-xs
--width-s
--ширина-м
--ширина-л
--width-xl
--width-xxl

Заполнение раздела

Отступы для разделов являются гибкими и основаны на множителе базовой системы интервалов.
Ничто
XS
S
M
L
XL
XXL

Расстояние

Существует шесть уровней адаптивного интервала, рассчитанных на основе базового размера и математической шкалы. Это гарантирует идеальное совпадение полей, отступов и зазоров.
--space-xs
--space-s
--пробел-м
--пробел-л
--space-xl
--space-xxl

Заполнение элемента

Вот шесть уровней интервалов, визуализированных как отступы.

Карты

Это карта с отступом XS. Его содержание довольно близко к краям.

Карты

Это карта с отступом S. У него немного более плотная набивка.

Карты

Это карта с заполнением М. Он имеет стандартную передышку.

Карты

Это карта с отступом L. Он имеет дополнительное пространство для дыхания.

Карты

Это карта с набивкой XL. Он имеет значительную передышку.

Карты

Это карта с прокладкой XXL. Избегайте использования этого в замкнутом пространстве.

Тени

Есть три многослойных теней на выбор.
Коробка тень М
Коробка тень L
Коробка теней XL

Радиус границы

Существует шесть значений радиуса границы, рассчитанных на основе базового размера и математической шкалы.
Закругленный XS
Округлая S
Округлая М
Округлая буква L
Закругленный XL
Округлый XXL