Этот блок объединяет слоты заголовков и контент в одной многоразовой структуре.
Операторы могут добавляться, не выходя из текущего контекста.
Основная зона
Основной контент может естественно расти с обычными отступами.
Боковая зона
Эта боковая зона использует светлый фон, чтобы выделить дополнительный контент.
Макет с тремя зонамиЧерновик
Левая панель
Вторичная навигация или метаданные могут находиться здесь.
Основной контент
Основная информация остается по центру для удобства чтения.
Правая панель
Контекстные действия и идеи могут быть сгруппированы с этой стороны.
Фиксированная боковая колонка
Узкая колонка, размер которой соответствует шкале --size, рядом с основным контентом, который занимает оставшуюся ширину.
128Проекции
Первичный блок
Блок с заголовком и телом текста.
Вторичный блок
Другой блок для демонстрации отступов.
Карты
Первичный блок
Блок с заголовком и телом текста.
Вторичный блок
Другой блок для демонстрации отступов.
Третичный блок
Третий блок в ряду.
Знак в углу
`block--mark` размещает маленькую иконку в верхнем углу в начале блока: что это такое — тип карты, размещенной в диаграмме, вид документа — рядом с тем, что он говорит, не заголовок.
Первичный блок
Блок с заголовком и телом текста.
Первичный блок
Блок с заголовком и телом текста.
Первичный блок
Блок с заголовком и телом текста.
Блок-ссылка
Вся карта является ссылкой — для выбора, сделанного путем выбора одной карты из нескольких: план, ветка, шаблон. Она воспринимается как текст, а не как приглушенное действие; под указателем ее земля принимает нюанс, а край усиливается, и клавиатура находит ее по кольцу фокуса, которое носит каждый элемент управления.
Единственное увеличенное значение или иконка, по центру. Используется для счетчиков на панели инструментов и плиток состояния — добавьте block--square, чтобы плитка оставалась квадратной, независимо от ширины.
128Проекции
99.9%Время безотказной работы
В прямом эфире
Пропускная способность
42События в секунду
Ключевые показатели
Показатель, читаемый как ключевой показатель на панели: `block--figure--start` размещает его с начала строки, метка сверху, значение с единицей, отодвинутой назад (`block--figure-unit`), и линия под ним, говорящая, из чего он состоит (`block--figure-sub`). `block--tone-cat-<name>` рисует категориальную полоску вдоль края; `a.block--link` открывает представление показателя. В `grid` строка переходит на несколько строк, когда пространство сужается.
Цвет состояния — или категории — в виде полосы на переднем крае, и ничего больше: та же полоса, что носит сообщение, без окрашенной земли, так что список воспринимается как список, а не как сигнал тревоги. Любой блок принимает это, включая полосу, стоящую на блоке.
block--tone-info — земля остается за блоком, только передний край несет цвет.
block--tone-success — земля остается за блоком, только передний край несет цвет.
block--tone-warning — земля остается за блоком, только передний край несет цвет.
block--tone-error — земля остается за блоком, только передний край несет цвет.
block--tone-cat-lavender — земля остается за блоком, только передний край несет цвет.
Стеки
Горизонтально
Равные колонки, полная ширина, оборачиваются при переполнении.
Один
Два
Три
Четыре
Вертикально
Сложенные ряды, полная ширина, равный промежуток.
Один
Два
Три
Разделенный
Первый элемент растет, последний элемент остается фиксированным — используется для рядов ведущий + действие.
Опишите действие в этом ведующем тексте.
Действия в углу
`has-corner-actions` на фрейме — ведущее, блок, блок кода, сообщение — и его иконки действий в `corner-actions` внутри: в верхнем углу в конце, показываются, когда на фрейм наведена мышь или он активен на клавиатуре, всегда на экране без указателя (`corner-actions--always`, чтобы показывать их постоянно). Фрейм с текущим текстом оставляет колонку свободной для них.
Этот лид можно скопировать с помощью кнопки в углу.
Блок с двумя действиями в углу, не мешая, пока на него не наведена мышь.
Вложенный
Горизонтальный стек, содержащий вертикальные стеки — типичная сетка панели инструментов.