@hydrogen-design-system/system/dist/import/latest/components/dialog/markup/html/dialog.html

Hydrogen's full design system and component library.

<div 
  aria-hidden="true" 
  aria-describedby="dialog01Content" 
  aria-labelledby="dialog01Title" 
  data-h2-dialog="dialog01"
  tabindex="-1"
  role="dialog">
  <div data-h2-dialog-wrapper>
    <div data-h2-dialog-title>
      <!-- Optional Exit Trigger -->
      <button 
        data-h2-dialog-trigger="dialog01"
        data-h2-dialog-exit-trigger
        type="button">
        <span>x</span>
      </button>
      <!-- Dialog Title -->
      <h1 
        data-h2-focus
        id="dialog01Title">Dialog Title</h1>
      <p>Dialog Subtitle</p>
    </div>
    <div data-h2-dialog-content>
      <div id="dialog01Content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem atque ad quos placeat quidem earum corrupti? Ad, distinctio, maxime quasi illum ex consectetur necessitatibus et soluta quo sit ratione maiores.</p>
      </div>
    </div>
    <div data-h2-dialog-actions>
      <button
        data-h2-dialog-trigger="dialog01"
        type="button">
        Okay, Close
      </button>
    </div>
  </div>
</div>