Step

用於顯示流程步驟。使用類別名稱為 .step 並以此為子元件前綴詞。每一個步驟是一個 .step_item，每個步驟有四種狀態：當前 .is:on、已完成、未執行、錯誤 .is:danger。每一個 .step_item 預設都是已完成樣式，.is:on 之後則是未執行，因此這兩種狀態不需要另外加上類別名稱。

預設樣式

每一個 Item 可設置一個標題與內文。

危險狀態

當一個流程有錯誤訊息或是未通過驗證時，可在當下的步驟由 .is:on 改為 .is:danger。

垂直排列

Step 預設為垂直排列，直到符合 Breakpoint 的 md 規則時才會顯示為水平排列。若是要一直維持垂直排列，則可以在 .step 追加 .:vertical。

水平排列

Step 預設為垂直排列，若要一直維持水平排列，則可以在 .step 追加 .:inline。在小螢幕裝置為了避免排列過度擁擠甚至資料擺放不下，除了 .is:on 狀態的 Item 訊息都會被隱藏，只顯示當下步驟的內容。

顯示步驟序號

除了預設符號之外，另外提供每一個步驟使用數字來表示步驟順序，在 .step 加上 .:ordered 就行了。已執行狀態則會顯示打勾圖示。

卡片樣式

Step 能以卡片樣式呈現，只需要在 .step 加上 .:card 就行了。同時可搭配 .:ordered。

客製化圖示

在卡片樣式中若是希望使用客製化圖示，例如 Symbol 或是 Iconfont 等，可在每一個 .step_item 內設置 .step_append，然後將你所希望的圖示置入其中。