Alerts - Clay

Colors

Alerts are available in the standard colors shown below:

alert alert-primary

alert alert-secondary

alert alert-success

alert alert-info

alert alert-warning

alert alert-danger

alert alert-dark

alert alert-light

Alert Notifications Fixed

A fixed positioned container for placing alerts on the top right corner of the page. This component can generally be placed anywhere on the page.

Alert Notifications Absolute

An absolute positioned container for placing alerts on the top right corner relative to .alert-container. Use this to create sticky positioned alerts with javascript, modifying the CSS property transform: translateY(); or margin-top when scrollY reaches a specific threshold. This component should generally be placed at the top of the page for sticky alerts aligned at the top.

Alert Lists

1 Files couldn't upload.
RTF

file-upload.RTF
Error: couldn't upload.
JPG

file-name.JPG

Uploaded - 142.1KB
RTF

ABC-file.RTF

Size: 156.6 MB

34%

<ul class="alert-list">
	<li class="alert alert-danger alert-dismissible alert-fluid" role="alert">
		<div class="container-fluid">
			<div class="autofit-float autofit-padded autofit-row autofit-row-center">
				<div class="autofit-col">
					<div class="autofit-section">
						<span class="alert-indicator">
							<svg class="lexicon-icon lexicon-icon-exclamation-full" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#exclamation-full" />
							</svg>
						</span><strong class="lead">1 Files</strong> couldn't upload.
					</div>
				</div>
				<div class="autofit-col autofit-col-expand">
					<div class="autofit-section">
						<button class="btn btn-secondary btn-sm" type="button">
							<span class="inline-item inline-item-before"><svg class="lexicon-icon lexicon-icon-reload" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#reload" />
							</svg></span>Retry all
						</button>
					</div>
				</div>
			</div>
			<button aria-label="Close" class="close" data-dismiss="alert" type="button">
				<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
					<use href="/images/icons/icons.svg#times" />
				</svg>
			</button>
		</div>
	</li>
	<li class="alert alert-danger alert-dismissible alert-fluid" role="alert">
		<div class="container-fluid">
			<div class="autofit-float autofit-padded autofit-row autofit-row-center">
				<div class="autofit-col">
					<span class="sticker sticker-secondary">RTF</span>
				</div>
				<div class="autofit-col autofit-col-expand">
					<div class="autofit-section">
						<h4 class="component-title">
							file-upload.RTF
						</h4>
						<span class="alert-indicator">
							<svg class="lexicon-icon lexicon-icon-exclamation-full" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#exclamation-full" />
							</svg>
						</span><strong class="lead">Error:</strong> couldn't upload.
					</div>
				</div>
				<div class="autofit-col">
					<button class="btn btn-secondary btn-sm" type="button">
						<span class="inline-item inline-item-before"><svg class="lexicon-icon lexicon-icon-reload" focusable="false" role="presentation">
							<use href="/images/icons/icons.svg#reload" />
						</svg></span>Retry
					</button>
				</div>
			</div>
			<button aria-label="Close" class="close" data-dismiss="alert" type="button">
				<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
					<use href="/images/icons/icons.svg#times" />
				</svg>
			</button>
		</div>
	</li>
	<li class="alert alert-light alert-dismissible alert-fluid">
		<div class="container-fluid">
			<div class="autofit-float autofit-padded autofit-row autofit-row-center">
				<div class="autofit-col">
					<span class="sticker sticker-secondary">JPG</span>
				</div>
				<div class="autofit-col autofit-col-expand">
					<div class="autofit-section">
						<h4 class="component-title">file-name.JPG</h4>
						<div class="component-subtitle">Uploaded - 142.1KB</div>
					</div>
				</div>
			</div>
			<button aria-label="Close" class="close" data-dismiss="alert" type="button">
				<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
					<use href="/images/icons/icons.svg#times" />
				</svg>
			</button>
		</div>
	</li>
	<li class="alert alert-light alert-dismissible alert-fluid">
		<div class="container-fluid">
			<div class="autofit-float autofit-padded autofit-row autofit-row-center">
				<div class="autofit-col">
					<span class="sticker sticker-secondary">RTF</span>
				</div>
				<div class="autofit-col autofit-col-expand">
					<div class="autofit-section">
						<h4 class="component-title">ABC-file.RTF</h4>
						<div class="progress-group progress-group-stacked">
							<div class="progress">
								<div aria-valuenow="34" aria-valuemin="0" aria-valuemax="100" class="progress-bar" role="progressbar" style="width: 34%;"></div>
							</div>
							<div class="autofit-row">
								<div class="autofit-col autofit-col-expand">
									<div class="component-subtitle">Size: 156.6 MB</div>
								</div>
								<div class="autofit-col">
									<div class="component-subtitle">34%</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<button aria-label="Close" class="close" data-dismiss="alert" type="button">
				<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
					<use href="/images/icons/icons.svg#times" />
				</svg>
			</button>
		</div>
	</li>
</ul>