10. Components: workflow.css
Workflow components show process state: where a request has been and what happens next. They are not for navigation.
Use for
Use workflow components for approval flows, review queues, import pipelines, request status, and audit events. They work best when the user needs to see their place in a defined process.
Vertical workflow
.la-workflow wraps a stacked list of .la-workflow-step rows. Row states: .is-complete (filled brand marker with checkmark), .is-current (brand tint with left accent bar), and .roadmap (brand tint, no accent). A default step with no modifier is pending. Use .without-title on the marker when the step has no headline.
.la-workflow .la-workflow-step: step states
Request submitted
Created and sent to the review queue.
Initial review
Checked for completeness by the coordinator.
Department approval
Awaiting sign-off from the department head.
Notify stakeholders
Email confirmation sent to all parties.
Archive
Record closed and moved to archive.
Use .without-title on the marker when there is no step headline. It nudges the marker down to align with the note text.
Audit log
.la-audit-list is a simple two-column log: a fixed-width timestamp column (.la-audit-time) and a description column (.la-audit-text). Use <strong> inside the text to highlight the actor. Wrap the log in a panel to give it context.
.la-audit-list .la-audit-item .la-audit-time .la-audit-text
Activity
Laween submitted the import request.
Reviewer opened the record for review.
Reviewer added a note to the request.
System routed the request to department approval.
Dept. Head approved the request.
Activity timeline
.la-timeline is an ordered list of events with a dot-and-connector structure. Dot states: .la-timeline-dot--done (filled brand), no modifier (active brand ring with white fill), and .la-timeline-dot--pending (gray ring). The vertical connector renders via ::before on each li except the last item.
.la-timeline: dot states
-
Import started
-
File validated
-
1,204 rows processed
-
Review in progress
-
Report generation
Compact stepper
.la-steps is a horizontal step indicator for multi-step forms or wizards. Each .la-step has a number bubble (.la-step-num) and a label (.la-step-label). Use .la-step--done for completed steps and .la-step--current for the active step. Separate steps with .la-step-arrow. The row wraps on narrow viewports.
.la-steps .la-step: 3 steps
.la-steps: 5 steps, two done