<a data-dialog-trigger="new-modal">Click for Modal 1</a>

<div class="c-dialog" data-dialog="new-modal" aria-hidden="true">
	<div class="c-dialog__overlay" tabindex="-1">
		<div class="c-dialog__container" aria-labelledby="new-modal-title" aria-modal="true" role="dialog">
			<header class="c-dialog__header">
				<p id="new-modal-title" class="c-dialog__title c-heading-foxtrot">
					MODAL 1 TITLE
				</p>
				<button class="c-dialog__close" aria-label="Close Dialog" data-dialog-close></button>
			</header>
			<div class="c-dialog__content">
				Modal 1 Content
			</div>
		</div>
	</div>
</div>

<hr>

<a data-dialog-trigger="new-modal2">Click for Modal 2</a>

<div class="c-dialog" data-dialog="modal-colors" aria-hidden="true">
	<div class="c-dialog__overlay" tabindex="-1">
		<div class="c-dialog__container" aria-labelledby="new-modal-title" aria-modal="true" role="dialog">
			<header class="c-dialog__header">
				<p id="new-modal-title" class="c-dialog__title c-heading-foxtrot">
					MODAL 2 TITLE
				</p>
				<button class="c-dialog__close" aria-label="Close Dialog" data-dialog-close></button>
			</header>
			<div class="c-dialog__content">
				Modal 2 Content
			</div>
		</div>
	</div>
</div>