블록
블록
기본 블록
주요 블록
제목과 본문 텍스트가 있는 블록입니다.
패딩이 없는 블록 (block--body 사용).
블록 제목
제목과 본문 텍스트가 있는 블록입니다.
주요 블록
제목과 본문 텍스트가 있는 블록입니다.
보조 블록
간격을 보여주기 위한 또 다른 블록입니다.
주요 블록
제목과 본문 텍스트가 있는 블록입니다.
보조 블록
간격을 보여주기 위한 또 다른 블록입니다.
제3 블록
행의 세 번째 블록입니다.
주요 블록
제목과 본문 텍스트가 있는 블록입니다.
보조 블록
간격을 보여주기 위한 또 다른 블록입니다.
제3 블록
행의 세 번째 블록입니다.
제4 블록
레이아웃 데모를 위한 네 번째 블록입니다.
보조 블록
간격을 보여주기 위한 또 다른 블록입니다.
고급 블록
파이프라인 프로젝션
준비 완료
이 블록은 제목 슬롯과 콘텐츠를 하나의 재사용 가능한 구조로 결합합니다.
현재 컨텍스트를 떠나지 않고도 연산자를 추가할 수 있습니다.
주요 영역
주요 콘텐츠는 표준 간격으로 자연스럽게 성장할 수 있습니다.
사이드 영역
이 사이드 영역은 보조 콘텐츠를 강조하기 위해 밝은 배경을 사용합니다.
세 영역 레이아웃
초안
왼쪽 패널
보조 내비게이션 또는 메타데이터가 여기에 표시될 수 있습니다.
주요 콘텐츠
주요 정보는 가독성을 위해 중앙에 유지됩니다.
오른쪽 패널
맥락적 행동과 통찰력을 이쪽에 그룹화할 수 있습니다.
고정된 사이드 열
남은 너비를 흡수하는 본체 옆에 --size 스케일에 맞춰 조정된 좁은 열입니다.
128
프로젝션
주요 블록
제목과 본문 텍스트가 있는 블록입니다.
보조 블록
간격을 보여주기 위한 또 다른 블록입니다.
카드
주요 블록
제목과 본문 텍스트가 있는 블록입니다.
보조 블록
간격을 보여주기 위한 또 다른 블록입니다.
제3 블록
행의 세 번째 블록입니다.
코너의 마크
`block--mark`는 블록의 시작 부분에 위쪽 코너에 작은 아이콘을 배치합니다: 그것이 무엇인지 — 다이어그램에 배치된 카드의 유형, 문서의 종류 —, 그것이 말하는 것 옆에, 제목이 아닙니다.
주요 블록
제목과 본문 텍스트가 있는 블록입니다.
주요 블록
제목과 본문 텍스트가 있는 블록입니다.
주요 블록
제목과 본문 텍스트가 있는 블록입니다.
링크인 블록
전체 카드가 링크입니다 — 여러 카드 중 하나를 선택하여 만든 선택을 위한 것입니다: 계획, 분기, 템플릿. 텍스트처럼 읽히며, 소음 없는 행동으로 읽히지 않습니다; 포인터 아래에서 바닥이 미세한 변화를 주고 가장자리가 단단해지며, 키보드는 모든 컨트롤이 착용하는 포커스 링으로 이를 찾습니다.
피겨
중앙에 배치된 하나의 과도하게 큰 값이나 아이콘입니다. 대시보드 카운터와 상태 타일에 사용되며 — 블록--사각형을 추가하여 너비에 관계없이 타일이 정사각형으로 유지됩니다.
처리량
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`로 항상 표시). 실행 중인 텍스트를 포함한 프레임은 이를 위해 열을 비워둡니다.
이 리드는 코너의 버튼으로 복사할 수 있습니다.
중첩
수직 스택을 포함하는 수평 스택 — 전형적인 대시보드 격자입니다.
ONEONE
ONETWO
ONETHREE
TWOONE
TWOTWO
TWOTHREE
THREEONE
THREETWO
THREETHREE