slds-modals

slds-modals

<div class="slds-modal__container">
  <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">
    <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
    </svg>
    <span class="slds-assistive-text">Cancel and close</span>
  </button>
  <div class="slds-modal__header">
    <h1 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Header</h1>
  </div>
  <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
    <p>
      Modals and popovers are useful components for displaying additional information or performing specific actions without navigating away from the current page. SLDS offers modal and popover components that can be easily integrated into your Salesforce Lightning applications. By using SLDS classes like "slds-modal" and "slds-popover", you can create overlay-based UI elements that enhance user interactions.
    </p>
    <p>
      Modals and popovers are useful components for displaying additional information or performing specific actions without navigating away from the current page. SLDS offers modal and popover components that can be easily integrated into your Salesforce Lightning applications. By using SLDS classes like "slds-modal" and "slds-popover", you can create overlay-based UI elements that enhance user interactions.
    </p>
  </div>
  <div class="slds-modal__footer">
    <button class="slds-button slds-button_neutral" aria-label="Cancel and close">Cancel</button>
    <button class="slds-button slds-button_brand">Save</button>
  </div>
</div>