Dialog Component

Dialog base element

The dialog element uses the native html <dialog> element in order to satisfy all the accessibility requirements.

This element is styled to look like a custom inplementation.

<button class="btn btn--primary dialog-button" type="button">
  Open Dialog
</button>
<dialog class="dialog">
  <div class="dialog__header">
    <h2 id="dialog-title-default" class="large-text-1 bold-text">Dialog</h2>
    <button
      aria-label="Close dialog"
      class="icon-btn dialog__close"
      type="button"
    >
      <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
        <icon-symbol name="close-16" />
      </svg>
    </button>
  </div>
  <div class="dialog__main">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </p>
    <p>
      <a href="https://www.ebay.com"> www.ebay.com </a>
    </p>
  </div>
</dialog>

Previous button in header Dialog

If you want to add a previous button to the dialog, add the icon button before the dialog heading tag.

<dialog aria-labelledby="dialog-title" class="dialog">
  <div class="dialog__header">
    <button aria-label="Go back" class="icon-btn dialog__prev" type="button">
      <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
        <use href="#icon-chevron-left-16" />
      </svg>
    </button>
    <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
    <button
      aria-label="Close dialog"
      class="icon-btn dialog__close"
      type="button"
    >
      <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
        <use href="#icon-close-16" />
      </svg>
    </button>
  </div>
  <div class="dialog__main">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </p>
    <p>
      <a href="https://www.ebay.com"> www.ebay.com </a>
    </p>
  </div>
</dialog>

Wide Dialog

To have a wider dialog add dialog--wide to the dialog

On small screens, a wide dialog will span almost the entire screen. This is the suggeested replacement for fullscreen dialog

<dialog aria-labelledby="dialog-title" class="dialog dialog--wide">
  <div class="dialog__header">
    <button aria-label="Go back" class="icon-btn dialog__prev" type="button">
      <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
        <use href="#icon-chevron-left-16" />
      </svg>
    </button>
    <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
    <button
      aria-label="Close dialog"
      class="icon-btn dialog__close"
      type="button"
    >
      <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
        <use href="#icon-close-16" />
      </svg>
    </button>
  </div>
  <div class="dialog__main">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </p>
    <p>
      <a href="https://www.ebay.com"> www.ebay.com </a>
    </p>
  </div>
</dialog>

Narrow Dialog

To have a thinner dialog add dialog--narrow to the dialog

<dialog aria-labelledby="dialog-title" class="dialog dialog--narrow">
  <div class="dialog__header">
    <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
    <button
      aria-label="Close dialog"
      class="icon-btn dialog__close"
      type="button"
    >
      <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
        <use href="#icon-close-16" />
      </svg>
    </button>
  </div>
  <div class="dialog__main">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </p>
    <p>
      <a href="https://www.ebay.com"> www.ebay.com </a>
    </p>
  </div>
</dialog>

Large Dialog

To have a large dialog add dialog--large to the dialog

On small screens, a large dialog will span almost the entire screen. This is the suggeested replacement for fullscreen dialog

<dialog aria-labelledby="dialog-title" class="dialog dialog--large">
  <div class="dialog__header">
    <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
    <button
      aria-label="Close dialog"
      class="icon-btn dialog__close"
      type="button"
    >
      <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
        <use href="#icon-close-16" />
      </svg>
    </button>
  </div>
  <div class="dialog__main">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </p>
    <p>
      <a href="https://www.ebay.com"> www.ebay.com </a>
    </p>
  </div>
</dialog>

Footer in Dialog

Call to action buttons can be placed in an optional footer section. They will be aligned to the end of the horizontal axis by default.

<dialog aria-labelledby="dialog-title" class="dialog">
  <div class="large-text-1 dialog__header">
    <h2 class="large-text-1 bold-text" id="dialog-title">Heading</h2>
    <button
      aria-label="Close dialog"
      class="icon-btn dialog__close"
      type="button"
    >
      <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
        <use href="#icon-close-16" />
      </svg>
    </button>
  </div>
  <div class="dialog__main">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </p>
  </div>
  <div class="dialog__footer">
    <button class="btn">Button 1</button>
    <button class="btn">Button 2</button>
    <button class="btn">Button 3</button>
  </div>
</dialog>

Expressive Dialog

An image may be added to the dialog header for a more expressive experience. Image will be cropped to a hardcoded height as per design standards.

<dialog aria-labelledby="dialog-title" class="dialog dialog--expressive">
  <div
    class="dialog__image"
    style="background-image: url(/img/tb-landscape-pic.jpg)"
  />
  <div class="dialog__header">
    <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
    <button
      aria-label="Close dialog"
      class="icon-btn dialog__close"
      type="button"
    >
      <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
        <use href="#icon-close-16" />
      </svg>
    </button>
  </div>
  <div class="dialog__main">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </p>
    <p>
      <a href="https://www.ebay.com"> www.ebay.com </a>
    </p>
  </div>
</dialog>

Expressive Dialog with Previous Button

When a previous button is included in an expressive dialog, both the previous and close buttons will overlap the banner image.

<dialog aria-labelledby="dialog-title" class="dialog dialog--expressive">
  <div
    class="dialog__image"
    style="background-image: url(/img/tb-landscape-pic.jpg)"
  />
  <div class="dialog__header">
    <button aria-label="Go back" class="icon-btn dialog__prev" type="button">
      <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
        <use href="#icon-chevron-left-16" />
      </svg>
    </button>
    <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
    <button
      aria-label="Close dialog"
      class="icon-btn dialog__close"
      type="button"
    >
      <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
        <use href="#icon-close-16" />
      </svg>
    </button>
  </div>
  <div class="dialog__main">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </div>
</dialog>