GCWeb Alert example

Alert with headings

Danger alert

Alert details.

Warning alert

Alert details.

Success alert

Alert details.

Info alert

Alert details.

Code

<section class="alert alert-danger">
		<h3>Danger alert</h3>
		<p>Alert details.</p>
	</section>

	<section class="alert alert-warning">
		<h3>Warning alert</h3>
		<p>Alert details.</p>
	</section>

	<section class="alert alert-success">
		<h3>Success alert</h3>
		<p>Alert details.</p>
	</section>

	<section class="alert alert-info">
		<h3>Info alert</h3>
		<p>Alert details.</p>
	</section>

links inside Alerts

(Success Title)

(Success content goes here link text.)

(Info Title)

(Info content goes here link text.)

(Warning Title)

(Warning content goes here link text.)

(Danger Title)

(Danger content goes here link text.)

Code

<section class="alert alert-success">
	<h3>(Success Title)</h3>
	<p> Success content goes here <a href="#" class="alert-link">link text</a>.</p>
	</section>

	<section class="alert alert-info">
	<h3>(Info Title)</h3>
	<p> Info content goes here <a href="#" class="alert-link">link text</a>.</p>
	</section>

	<section class="alert alert-warning">
	<h3>(Warning Title)</h3>
	<p> Warning content goes here <a href="#" class="alert-link">link text</a>.</p>
	</section>

	<section class="alert alert-danger">
	<h3>(Info Title)</h3>
	<p> Danger content goes here <a href="#" class="alert-link">link text</a>.</p>
	</section>

Alerts without Headings

Success alert

Info alert

Warning alert

Danger alert

Code

<h3> Success alert </h3>
	<div class="alert alert-success">
		<p>(Success content here.)</p>
	</div>

	<h3> Info alert </h3>
	<div class="alert alert-info">
		<p> Info content here. </p>
	</div>

	<h3> Warning alert </h3>
	<div class="alert alert-warning">
		<p>(Warning content here.)</p>
	</div>

	<h3> Danger alert </h3>
	<div class="alert alert-danger">
		<p>(Danger content here.)</p>
	</div>