0

I have a card with a header where I added a button. The thing is that my Title and my button are not aligned

<header class="slds-media slds-media_center slds-has-flexi-truncate">
            <div class="slds-media__figure">
              <span class="slds-icon_container slds-icon-standard-account" title="account">
                <svg class="slds-icon slds-icon_small" aria-hidden="true">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                </svg>
                <span class="slds-assistive-text">Packages</span>
              </span>
            </div>
            <div slot="header" class="slds-media__body slds-clearfix">
              <h2 class="slds-card__header-title">
                <a href="#" class="slds-card__header-link" title="Accounts">
                  <span>Packages</span>                  
                </a>
              </h2>
              <lightning-button  variant="brand" label="Create new Package"   title="Looks like a link" onclick={handleClick} class="slds-var-m-left_x-small slds-float_right"></lightning-button>
            </div>
          </header>

I tried everything with different results but without one that align the title verticaly while putting my button on the right and it looks like this ..

enter image description here

1 Answer 1

1

Please try this out

<template>
    <div class="slds-card__header slds-grid">
        <header class="slds-media slds-media_center slds-has-flexi-truncate">
            <div class="slds-media__figure">
                <span class="slds-icon_container slds-icon-standard-account" title="account">
          <svg class="slds-icon slds-icon_small" aria-hidden="true">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
          </svg>
          <span class="slds-assistive-text">account</span>
                </span>
            </div>
            <div class="slds-media__body">
                <h2 class="slds-card__header-title">
                    <a href="#" class="slds-card__header-link slds-truncate" title="Accounts">
                        <span>Package</span>
                    </a>
                </h2>
            </div>
            <div class="slds-no-flex">
                <button class="slds-button slds-button_brand">Create new Package</button>
            </div>
        </header>
    </div>
</template>

FR : DEMO

1
  • Thx yo working as a charm
    – Ben2pop
    Oct 20, 2022 at 13:31

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .