<dialog open class="alert">
<div>
<strong>Primary Headline - CTA Button</strong>
<p>Supplement information about the timely information. For use when there is an actionable next step.</p>
</div>
<a href="" class="btn">CTA Button</a>
<form method="dialog"><button>X</button></form>
</dialog>
<dialog open class="alert">
<span class="icon">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.27 43.41">
<path style="fill:var(--primary-background)" d="m29.44,16.66c.51-.53.84-1.25.84-2.05,0-1.63-1.33-2.95-2.95-2.95s-2.95,1.33-2.95,2.95c0,.79.32,1.51.83,2.05-.35.09-.67.25-.97.45-.39-1.18-1.49-2.05-2.8-2.05s-2.48.92-2.83,2.16c-.29-.2-.6-.36-.94-.45.51-.53.83-1.25.83-2.05,0-1.63-1.33-2.95-2.95-2.95s-2.95,1.33-2.95,2.95c0,.8.32,1.52.84,2.05-1.28.32-2.24,1.47-2.24,2.85v3.51c0,.72.59,1.31,1.31,1.31h.48v3.27c0,.53.43.96.96.96h3.18c.53,0,.96-.43.96-.96v-.05c.1.03.2.06.31.06h.49v3.27c0,.53.43.96.96.96h3.2c.53,0,.96-.43.96-.96v-3.27h.49c.11,0,.22-.04.32-.07.04.5.44.89.95.89h3.16c.53,0,.96-.43.96-.96v-3.27h.49c.72,0,1.31-.59,1.31-1.31v-3.51c0-1.38-.96-2.53-2.24-2.85Zm-2.12-4c1.08,0,1.95.88,1.95,1.95s-.88,1.95-1.95,1.95-1.95-.88-1.95-1.95.88-1.95,1.95-1.95Zm-5.89,3.41c1.08,0,1.95.88,1.95,1.95s-.88,1.95-1.95,1.95-1.95-.88-1.95-1.95.88-1.95,1.95-1.95Zm-5.9-3.28c1.08,0,1.95.88,1.95,1.95s-.88,1.95-1.95,1.95-1.95-.88-1.95-1.95.88-1.95,1.95-1.95Zm-1.56,14.94v-4.27h-1.48c-.17,0-.31-.14-.31-.31v-3.51c0-1.07.87-1.95,1.95-1.95h2.82c.62,0,1.21.3,1.58.81h0c.1.6.38,1.15.79,1.57-1.28.32-2.24,1.47-2.24,2.85v3.51s.02.09.03.13v1.13s-3.13.04-3.13.04Zm10.51-.99h-1.49l.04,4.23-3.16.04v-4.27h-1.49c-.17,0-.31-.14-.31-.31v-3.51c0-1.07.87-1.95,1.95-1.95h2.82c1.07,0,1.95.87,1.95,1.95v3.51c0,.17-.14.31-.31.31Zm6.19-3.71c0,.17-.14.31-.31.31h-1.49l.04,4.23-3.13.04v-4.68c0-1.38-.96-2.53-2.24-2.85.45-.46.74-1.08.81-1.75h.01c.37-.47.94-.75,1.54-.75h2.82c1.07,0,1.95.87,1.95,1.95v3.51Z" />
</svg>
</span>
<div>
<strong>Primary Headline - Icon</strong>
<p>Supplement information about the timely information.</p>
</div>
<form method="dialog"><button>X</button></form>
</dialog>
<dialog open class="alert">
<span class="icon">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.27 43.41">
<path style="fill:var(--primary-background)" d="m29.44,16.66c.51-.53.84-1.25.84-2.05,0-1.63-1.33-2.95-2.95-2.95s-2.95,1.33-2.95,2.95c0,.79.32,1.51.83,2.05-.35.09-.67.25-.97.45-.39-1.18-1.49-2.05-2.8-2.05s-2.48.92-2.83,2.16c-.29-.2-.6-.36-.94-.45.51-.53.83-1.25.83-2.05,0-1.63-1.33-2.95-2.95-2.95s-2.95,1.33-2.95,2.95c0,.8.32,1.52.84,2.05-1.28.32-2.24,1.47-2.24,2.85v3.51c0,.72.59,1.31,1.31,1.31h.48v3.27c0,.53.43.96.96.96h3.18c.53,0,.96-.43.96-.96v-.05c.1.03.2.06.31.06h.49v3.27c0,.53.43.96.96.96h3.2c.53,0,.96-.43.96-.96v-3.27h.49c.11,0,.22-.04.32-.07.04.5.44.89.95.89h3.16c.53,0,.96-.43.96-.96v-3.27h.49c.72,0,1.31-.59,1.31-1.31v-3.51c0-1.38-.96-2.53-2.24-2.85Zm-2.12-4c1.08,0,1.95.88,1.95,1.95s-.88,1.95-1.95,1.95-1.95-.88-1.95-1.95.88-1.95,1.95-1.95Zm-5.89,3.41c1.08,0,1.95.88,1.95,1.95s-.88,1.95-1.95,1.95-1.95-.88-1.95-1.95.88-1.95,1.95-1.95Zm-5.9-3.28c1.08,0,1.95.88,1.95,1.95s-.88,1.95-1.95,1.95-1.95-.88-1.95-1.95.88-1.95,1.95-1.95Zm-1.56,14.94v-4.27h-1.48c-.17,0-.31-.14-.31-.31v-3.51c0-1.07.87-1.95,1.95-1.95h2.82c.62,0,1.21.3,1.58.81h0c.1.6.38,1.15.79,1.57-1.28.32-2.24,1.47-2.24,2.85v3.51s.02.09.03.13v1.13s-3.13.04-3.13.04Zm10.51-.99h-1.49l.04,4.23-3.16.04v-4.27h-1.49c-.17,0-.31-.14-.31-.31v-3.51c0-1.07.87-1.95,1.95-1.95h2.82c1.07,0,1.95.87,1.95,1.95v3.51c0,.17-.14.31-.31.31Zm6.19-3.71c0,.17-.14.31-.31.31h-1.49l.04,4.23-3.13.04v-4.68c0-1.38-.96-2.53-2.24-2.85.45-.46.74-1.08.81-1.75h.01c.37-.47.94-.75,1.54-.75h2.82c1.07,0,1.95.87,1.95,1.95v3.51Z" />
</svg>
</span>
<div>
<strong>Primary Headline - CTA and Icon</strong>
<p>Supplement information about the timely information.</p>
</div>
<a href="" class="btn">CTA Button</a>
<form method="dialog"><button>X</button></form>
</dialog>
No notes defined.