1

Trying to get the spacing between this icon and text.

Any advice? 

<h3 slot ="title" class="slds-card__header-title slds-media__body">
    <lightning-icon icon-name="standard:channel_program_history" size="small" ></lightning-icon>
    <strong>RELISTED OPPORTUNITY</strong>
</h3>

enter image description here

Improve this question
1
  • 2
    Have you tried a simple CSS like this: <strong style="padding-left: 10px">RELISTED OPPORTUNITY</strong> – Arnold Jr. Oct 30 '19 at 18:52
4

The simplest way to add spacing is by using SLDS CSS classes:

<h3 slot ="title" class="slds-card__header-title slds-media__body">
    <lightning-icon icon-name="standard:channel_program_history" size="small" ></lightning-icon>
    <strong class="slds-m-left--x-small">RELISTED OPPORTUNITY</strong>
</h3>

or custom CSS classes:

<h3 slot ="title" class="slds-card__header-title slds-media__body">
    <lightning-icon icon-name="standard:channel_program_history" size="small" ></lightning-icon>
    <strong class="custom-class">RELISTED OPPORTUNITY</strong>
</h3>

/* lwc.css */
.custom-class {
    margin-left: 4px;
}
Improve this answer
0

You can use SLDS margin class. try this

<h3 slot ="title" class="slds-card__header-title slds-media__body">
    <lightning-icon icon-name="standard:channel_program_history" size="small" class="slds-m-right_medium"></lightning-icon>
    <strong>RELISTED OPPORTUNITY</strong>
</h3>

based on the spacing required you can use slds-m-right_small or slds-m-right_large etc

Improve this answer

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.