Messaging

Alert Box - Informational

Used for timely advertising or temporary informational messages
Not to be used for permanent page content
Icons are optional for all Alert Boxes

This is an informational message

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

See the dtails

			
				<div class="alert alert-info" role="alert">
	<h3><i class="fa fa-info-circle fa-lg pull-left-xs"></i> This is an informational message</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p class="link"><a href="#balancePanel">See the dtails</a></p>
</div>

Alert Box - Success

Used for confirmation of successful actions like submitting a form

Success

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

See the dtails

			
				<div class="alert alert-success" role="alert">
	<h3>Success</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
	<p class="link"><a href="#balancePanel">See the dtails</a></p>
</div>

Alert Box - Notice

Used for important notices that the user should be made aware of
Not to be used for error messaging

This is a notice message

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

See the dtails

			
				<div class="alert alert-warning" role="alert">
	<h3><i class="media-object fa fa-exclamation-triangle fa-lg pull-left-xs"></i> This is a notice message</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
	<p class="link"><a href="#balancePanel">See the dtails</a></p>
</div>

Alert Box - Danger

Used for error messages, failures, or other catastrophic events
Not to be used for anyhting else

This is the highway to the danger zone

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

See the dtails

			
				<div class="alert alert-danger" role="alert">
	<h3><i class="media-object fa fa-exclamation-triangle fa-lg pull-left-xs"></i> This is the highway to the danger zone</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p class="link"><a href="#balancePanel">See the dtails</a></p>
</div>

Example within a page

Check Payment(s) for Oct 25, 2015$1,000.25
Check Payment(s) for Annuity, Life and LTC Products$512.63

Did you know you can receive your commissions daily?

EFT payments made simple!

Earnings	Week to Date	Year to Date
Annuity	$0.00	$7,850.00
Preferred Annuity	$0.00	$882,525.55
Life	$0.00	$0.00
LTC	$0.00	$0.00
Total Earnings:	$0.00	$890,375.55

Commission Statements Commission Details

			
				<div class="panel panel-default panel-flat">
    <div class="panel-body row">
        <div class="col-sm-12">
            <ul class="leaders">
                <li><span class="h3">Check Payment(s) for Oct 25, 2015</span><span class="h3">$1,000.25</span></li>
                <li><span>Check Payment(s) for Annuity, Life and LTC Products</span><span>$512.63</span></li>
            </ul>
            <div class="alert alert-info" role="alert">
                <h3>Did you know you can receive your commissions daily?</h3>
                <p class="link"><a href="##"">EFT payments made simple!</a></p>
            </div>
        </div>
        <div class="col-sm-12">
            <table class="table table-panel table-condensed">
                <thead>
                    <tr>
                        <th>Earnings</th>
                        <th class="right">Week to Date</th>
                        <th class="right">Year to Date</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Annuity</td>
                        <td class="right">$0.00</td>
                        <td class="right">$7,850.00</td>
                    </tr>
                    <tr>
                        <td>Preferred Annuity</td>
                        <td class="right">$0.00</td>
                        <td class="right">$882,525.55</td>
                    </tr>
                    <tr>
                        <td>Life</td>
                        <td class="right">$0.00</td>
                        <td class="right">$0.00</td>
                    </tr>
                    <tr>
                        <td>LTC</td>
                        <td class="right">$0.00</td>
                        <td class="right">$0.00</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr class="bold">
                        <td>Total Earnings:</td>
                        <td class="right">$0.00</td>
                        <td class="right">$890,375.55</td>
                    </tr>
                </tfoot>
            </table>
            <a class="btn btn-primary-inverse" href="##"">Commission Statements <i class="fa fa-external-link fa-lg fa-fw"></i></a> 
            <a class="btn btn-primary-inverse" href="##"">Commission Details</a>
        </div>
    </div>
</div>

Alert Box - Informational

This is an informational message

Alert Box - Success

Success

Alert Box - Notice

This is a notice message

Alert Box - Danger

This is the highway to the danger zone

Example within a page

Did you know you can receive your commissions daily?

Login / Register

Connect with Allianz Life

Error