slds-Popovers

slds-Popovers

<section aria-describedby="dialog-body-id-115" aria-labelledby="dialog-heading-id-120" class="slds-popover slds-nubbin_left slds-popover_medium" role="dialog">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
    </svg>
    <span class="slds-assistive-text">Close dialog</span>
  </button>
  <div class="slds-popover__body" id="dialog-body-id-115">
    <div class="slds-media">
      <div class="slds-media__body">
        <header class="slds-popover__header">
          <h2 class="slds-text-heading_small" id="dialog-heading-id-120">Header title</h2>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
</section>