# C2 Site Alert
### Overview
Alert messaging box with a content area and a close button
### Props
| Props				| Type			| Default						|
| ----------------- | ------------- | ----------------------------- |
| alertActive		| Boolean		| False							|
| closeBtnClasses   | String		|								|

### Code snippet
```
	<c2-site-alert
		:alert-active="true"
		:close-btn-classes="'flex align-items justify-center'"
		class="flex items-center w-full justify-between p-4"
	>
		<div class="flex items-center">
			<div class="icon">
				<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 32 32">
					<path fill="none" d="M14.875,11h2.25V21h-2.25ZM16,27a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,27Z"/>
					<path d="M29.8872,28.5386l-13-25a1,1,0,0,0-1.7744,0l-13,25A1,1,0,0,0,3,30H29a1,1,0,0,0,.8872-1.4614ZM14.875,11h2.25V21h-2.25ZM16,27a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,27Z"/>
					<rect fill="none" width="32" height="32"/>
				</svg>
			</div>

			<div class="flex flex-col ml-4">
				<h2>Alert title</h2>
				<p>Alert message goes here...</p>
			</div>
		</div>

		<template slot:close-btn>
			<span class="sr-only">
				Close Alert
			</span>
			<span class="icon">
				<svg height="24px" width="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
					<polygon fill="#000" points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4"/>
					<rect fill="none" width="12" height="12"/>
				</svg>
			</span>
		</template>
	</c2-site-alert>
```