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? Next Steps and Past Activities

(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.


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:


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


    border-top : 1px dotted;

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


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


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

    display: flex;
    width: 300px;

But nothing OOTB to my knowledge.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.