Callout

A callout message is often positioned on a page to notify the user about something special.

Basic example

Check basic example of callout use .callout class with .card.

Session expiring

You have been gone for a while, we will log you out in 4m 15s unless you continue session to stay signed in.

Continue working Logout
Card image cap
*sponsored

Session expiring

You have been gone for a while, we will log you out in 4m 15s.

														
<div class="row">
	<div class="col-lg-4 mb-lg-0 mb-3">
		<div class="callout card">
			<div class="card-body">
				<button type="button" class="card-close btn-close">
					<span aria-hidden="true">×</span>
				</button>
				<h4>Session expiring</h4>
				<p class="card-text">You have been gone for a while, we will log you out in <span class="text-danger">4m 15s</span> unless you continue session to stay signed in.</p>
				<a href="#" class="btn btn-block btn-primary">Continue working</a>
				<a href="#" class="btn btn-block btn-link">Logout</a>
			</div>
		</div>
	</div>
	<div class="col-lg-8">
		<div class="callout card flex-row p-3 align-items-center">
			<img class="card-img img-fluid w-35" src="dist/img/placeholder_card.jpg" alt="Card image cap">
			<div class="card-body">
				<button type="button" class="card-close btn-close">
					<span aria-hidden="true">×</span>
				</button>
				<span class="fs-7"><span class="text-primary">*</span>sponsored</span>
				<h4>Session expiring</h4>
				<p class="card-text">You have been gone for a while, we will log you out in <span class="text-danger">4m 15s</span>.</p>
			</div>
		</div>
	</div>
</div>
													
Close over

Use .close-over class with .callout.

Card image cap
*sponsored

Session expiring

You have been gone for a while, we will log you out in 4m 15s unless you continue session to stay signed in.

Continue working
empty2
We use third-party cookies in order to personalize your site experience
														
<div class="row">
	<div class="col-lg-4 mb-lg-0 mb-3">
		<div class="callout card close-over">
			<img class="card-img-top img-fluid" src="dist/img/placeholder_card.jpg" alt="Card image cap">
			<div class="card-body">
				<button type="button" class="card-close btn-close">
					<span aria-hidden="true">×</span>
				</button>
				<span class="fs-7"><span class="text-primary">*</span>sponsored</span>
				<h4>Session expiring</h4>
				<p class="card-text">You have been gone for a while, we will log you out in <span class="text-danger">4m 15s</span> unless you continue session to stay signed in.</p>
				<a href="#" class="btn btn-block btn-primary">Continue working</a>
			</div>
		</div>
	</div>
	<div class="col-lg-4">
		<div class="callout card text-center  close-over">
			<div class="card-body">
				<button type="button" class="card-close btn-close">
					<span aria-hidden="true">×</span>
				</button>
				<img class="img-fluid d-inline-block w-70p mb-3" src="dist/img/empty-2.png" alt="empty2">
				<h5>We use third-party cookies in order to personalize your site experience</h5>
				<div class="d-flex justify-content-center mt-4">
					<a href="#" class="btn btn-primary me-2">Allow</a>
					<a href="#" class="btn btn-primary">Block</a>
				</div>
			</div>
		</div>
	</div>
</div>
													
Callout dark

Use .callout-dark class with .calloutclass.

*sponsored

Session expiring

You have been gone for a while, we will log you out in 4m 15s unless you continue session to stay signed in.

Continue working
														
<div class="callout callout-dark card bg-violet-light-1">
	<div class="card-body">
		<button type="button" class="card-close btn-close btn-close-white">
			<span aria-hidden="true">×</span>
		</button>
		<span class="fs-7">*sponsored</span>
		<h4>Session expiring</h4>
		<p class="card-text">You have been gone for a while, we will log you out in <span class="text-danger">4m 15s</span> unless you continue session to stay signed in.</p>
		<a href="#" class="btn btn-block btn-white">Continue working</a>
	</div>
</div>
													
Callout floating

Use .callout-floating class with .callout and direction classes liketop-end,top-start.

Card image cap
Card image cap
Card image cap
Card image cap
Card image cap
Card image cap
														
<div class="callout callout-floating top-end card">
	<img class="card-img" src="dist/img/placeholder_card.jpg" alt="Card image cap">
</div>
<div class="callout callout-floating bottom-end card">
	<img class="card-img" src="dist/img/placeholder_card.jpg" alt="Card image cap">
</div>
<div class="callout callout-floating top-start card">
	<img class="card-img" src="dist/img/placeholder_card.jpg" alt="Card image cap">
</div>
<div class="callout callout-floating bottom-start card">
	<img class="card-img" src="dist/img/placeholder_card.jpg" alt="Card image cap">
</div>
<div class="callout callout-floating bottom-center card">
	<img class="card-img" src="dist/img/placeholder_card.jpg" alt="Card image cap">
</div>
<div class="callout callout-floating top-center card">
	<img class="card-img" src="dist/img/placeholder_card.jpg" alt="Card image cap">
</div>
													
Class Values
class="callout callout-floating [value]" top-center / top-start / top-end / bottom-center / bottom-end / bottom-start