function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
meghna nmeghna n 

How to reduce height using slds

I have a piece of code in lightning component as follows.

 <lightning:buttonIcon iconName="utility:filterList" size="medium" class="color" onclick="{!c.providerFilterSearch}" alternativeText="" />
      <aura:if isTrue="{!v.showFindCareFilterCmp}">
           <div aura:id="FilterDropDown" class="slds-dropdown slds-dropdown_right hide dropDownDiv">
           <lightning:card title="Provider Filter">
           <aura:set attribute="actions">
                <button aura:id="cbtnDash" aria-controls="accordion-details-01" class="slds-button_reset slds-accordion__summary-action" label="" onclick="{!c.removeFilterComponent}">                           
                    <lightning:icon iconName="utility:forward" size="small" alternativeText="Indicates forward" />         
                </button>
          </aura:set>
    <hr class="height"></hr>

Now to reduce the height I have written a CSS as follows.
.THIS .height{
    margin:1rem 0;
}

How to achieve the same using slds classes.

Please let me know with a piece of working code.

Thanks
meghna
Maharajan CMaharajan C
<hr class="slds-m-around_small"></hr>

Please refer the below Link for the further adjusments:

https://lightningdesignsystem.com/utilities/margin/#site-main-content

Thanks,
Maharajan.C
Maharajan CMaharajan C
You can use the    slds-m-vertical_medium     or   slds-var-m-*_medium  for your class.
Ajay K DubediAjay K Dubedi
Hi Meghna,
Use this for your requirement:
<hr class="slds-var-m-*_medium"> </hr>
And also follow the link:
https://lightningdesignsystem.com/utilities/margin/

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi