Lightning Design System component for dashed separator line?

Question

Is there a Lightning Design Component that will generate a dashed separator line like what you see for the Next Steps and Past Activities sections in the standard Opportunity record page?

(I don't need the More Steps button, I just want the dashed separator line immediately after the section text)

I've looked at the CSS on a typical page and I see classes like slds-section__title-action slds-align-middle slds-truncate but when I try to use these in my custom component, I don't get anything like what I see in the screnshot.

I've searched using various terms like separator, header, dashed, etc but haven't found anything applicable.

Answer 1

I dont know of anything that applies a border other than the class slds-border_* (top, bottom, left, right)

you can specify it to be dotted throught css though:

Example:

<lightning:input class="slds-border_top" .... />

CSS

.THIS.slds-border_top{
    border-top : 1px dotted;
}

or, if you want to add some dots after some text

component:

<div class="dots-here">Something</div>

Style:

.THIS.dots-here:after {
    border-bottom: 1px dotted;
    content: '';
    flex: 1;
}

.THIS.dots-here{
    display: flex;
    width: 300px;
}

But nothing OOTB to my knowledge.