บล็อกหลัก
บล็อกที่มีชื่อและข้อความเนื้อหา
บล็อกที่ไม่มีการเว้นระยะ (ใช้ block--body)
ชื่อบล็อก
บล็อกที่มีชื่อและข้อความเนื้อหา
บล็อกหลัก
บล็อกที่มีชื่อและข้อความเนื้อหา
บล็อกรอง
บล็อกอีกหนึ่งเพื่อแสดงให้เห็นถึงการจัดระยะ
บล็อกหลัก
บล็อกที่มีชื่อและข้อความเนื้อหา
บล็อกรอง
บล็อกอีกหนึ่งเพื่อแสดงให้เห็นถึงการจัดระยะ
บล็อกที่สาม
บล็อกที่สามในแถว
บล็อกหลัก
บล็อกที่มีชื่อและข้อความเนื้อหา
บล็อกรอง
บล็อกอีกหนึ่งเพื่อแสดงให้เห็นถึงการจัดระยะ
บล็อกที่สาม
บล็อกที่สามในแถว
บล็อกที่สี่
บล็อกที่สี่สำหรับการสาธิตการจัดรูปแบบ
บล็อกรอง
บล็อกอีกหนึ่งเพื่อแสดงให้เห็นถึงการจัดระยะ
บล็อกขั้นสูง
การคาดการณ์ทางท่อ
พร้อมใช้งาน
บล็อกนี้รวมช่องชื่อและเนื้อหาในโครงสร้างที่สามารถนำกลับมาใช้ใหม่ได้ในที่เดียว
ผู้ปฏิบัติงานสามารถเพิ่มได้โดยไม่ต้องออกจากบริบทปัจจุบัน
โซนหลัก
เนื้อหาหลักสามารถเติบโตตามธรรมชาติด้วยการจัดระยะมาตรฐาน
โซนข้าง
โซนข้างนี้ใช้พื้นหลังสีอ่อนเพื่อเน้นเนื้อหาที่เสริม
รูปแบบสามโซน
ร่าง
แผงด้านซ้าย
การนำทางรองหรือข้อมูลเมตาอาจอยู่ที่นี่
เนื้อหาหลัก
ข้อมูลหลักจะอยู่กลางเพื่อความอ่านง่าย
แผงด้านขวา
การกระทำและข้อมูลเชิงบริบทสามารถจัดกลุ่มในด้านนี้ได้
คอลัมน์ข้างที่ตายตัว
คอลัมน์แคบที่มีขนาดตามมาตรฐาน --size ข้าง ๆ เนื้อหาที่ดูดซับความกว้างที่เหลืออยู่
บล็อกหลัก
บล็อกที่มีชื่อและข้อความเนื้อหา
บล็อกรอง
บล็อกอีกหนึ่งเพื่อแสดงให้เห็นถึงการจัดระยะ
การ์ด
บล็อกหลัก
บล็อกที่มีชื่อและข้อความเนื้อหา
บล็อกรอง
บล็อกอีกหนึ่งเพื่อแสดงให้เห็นถึงการจัดระยะ
บล็อกที่สาม
บล็อกที่สามในแถว
เครื่องหมายในมุม
`block--mark` วางไอคอนเล็ก ๆ ในมุมบนที่จุดเริ่มต้นของบล็อก: มันคืออะไร — ประเภทของการ์ดที่วางในแผนภาพ, ประเภทของเอกสาร —, ข้างสิ่งที่มันกล่าว, ไม่ใช่ชื่อเรื่อง.
บล็อกหลัก
บล็อกที่มีชื่อและข้อความเนื้อหา
บล็อกหลัก
บล็อกที่มีชื่อและข้อความเนื้อหา
บล็อกหลัก
บล็อกที่มีชื่อและข้อความเนื้อหา
บล็อกที่เป็นลิงก์
การ์ดทั้งหมดคือการเชื่อมโยง — สำหรับการเลือกที่ทำโดยการเลือกการ์ดหนึ่งใบจากหลายใบ: แผน, สาขา, แม่แบบ อ่านได้เหมือนข้อความ ไม่ใช่การกระทำที่เงียบสงบ; ใต้ตัวชี้ พื้นของมันจะมีเฉดสี และขอบก็จะแข็งขึ้น และแป้นพิมพ์จะค้นหามันโดยวงแหวนโฟกัสที่ควบคุมทุกตัวใส่
รูปภาพ
ค่าหรือไอคอนขนาดใหญ่เพียงค่าเดียว อยู่กลาง ใช้สำหรับตัวนับในแดชบอร์ดและแผ่นสถานะ — เพิ่ม block--square เพื่อให้แผ่นมีรูปสี่เหลี่ยมจัตุรัสไม่ว่าจะมีความกว้างเท่าใด
การส่งผ่าน
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` เพื่อแสดงตลอดเวลา). กรอบที่ถือข้อความที่กำลังทำงานจะเว้นพื้นที่ในคอลัมน์ให้กับพวกเขา.
ลีดนี้สามารถคัดลอกได้ด้วยปุ่มในมุมของมัน.
บล็อกที่มีการดำเนินการสองรายการในมุมของมัน, ออกไปจากทางจนกว่าจะชี้ไปที่มัน.
ซ้อนกัน
สแต็คแนวนอนที่มีสแต็คแนวตั้ง — ตะแกรงแดชบอร์ดทั่วไป
THREEONE
THREETWO
THREETHREE