Path

path

.slds-path, .slds-region_medium, .slds-region_small — A process component communicates to the user the progress of a particular process.

base

.slds-path

.slds-is-expanded

.slds-is-expanded — Indicates the coaching section is expanded

.slds-path__track

.slds-path__track — Allows the path itself to be responsive

.slds-has-overflow

.slds-has-overflow — Indicates the scroller is in the overflow state

.slds-path__scroller

.slds-path__scroller — Creates the scrolling container for tab overflow

.slds-path__scroller_inner

.slds-path__scroller_inner — Allows the path to scroll when necessary

.slds-path__nav

.slds-path__nav — Horizontal list of stages in path component

.slds-path__item

.slds-path__item — Individual stages of a path

.slds-is-incomplete

.slds-is-incomplete — Creates the incomplete stage of the path

.slds-is-complete

.slds-is-complete — Creates the completed stage of the path

.slds-is-current

.slds-is-current — Creates the current stage of the path

.slds-is-active

.slds-is-active — Creates the active stage of the sales path

.slds-is-lost

.slds-is-lost — Creates lost stage of the path

.slds-is-won

.slds-is-won — Creates success stage of the path

.slds-path__link

.slds-path__link — Creates actionable element inside of each path item

.slds-path__title

.slds-path__title — Contains the name of the stage

.slds-path__stage

.slds-path__stage — Contains the check mark when the stage is completed

.slds-path__scroll-controls

.slds-path__scroll-controls — Container for the buttons that control the scrolling

.slds-path__stage-name

.slds-path__stage-name — Shows the stage name when in the smaller state

.slds-path__scroller-container

.slds-path__scroller-container — Creates the container for toggle button and path

.slds-path__action

.slds-path__action — Container for path actions

.slds-path__trigger-coaching-content

.slds-path__trigger-coaching-content — This class is used to create a full width coaching toggle in small regions

.slds-path__trigger

.slds-path__trigger — Button that toggles visibility of stage's tabpanel

.slds-path__mark-complete

.slds-path__mark-complete — Actionable button that invokes a completion of the path

.slds-path__mark-current

.slds-path__mark-current — Actionable button that invokes a current stage of the path

.slds-path__content

.slds-path__content — Tabpanel of each stage of the path

.slds-path__guidance

.slds-path__guidance — Guidance section of expanded tabpanel

.slds-path__coach-title

.slds-path__coach-title — This creates the underlined titles in the coaching area

.slds-path__coach-edit

.slds-path__coach-edit — The Edit link in Path Coaching

.slds-path__guidance-content

.slds-path__guidance-content — This creates the space at the top of the guidance area

.slds-path__keys

.slds-path__keys — Key field section of expanded tabpanel

.slds-path__coach-title

.slds-path__coach-title — This creates the underlined titles in the coaching area

.slds-path__coach-edit

.slds-path__coach-edit — The Edit link in Path Coaching

.slds-path__coach

.slds-path__coach — This creates the layout block for the coaching area

.slds-region_medium

.slds-region_medium — This class should be placed on a containing div when the Path container is between 565px and 1280px

.slds-region_small

.slds-region_small — This class should be placed on a containing div when the Path container is between 360px and 564px