Promo Boxes

Promo Boxes

Promo boxes are call-to-action banners that pair a headline with a button. Use the .promo shortcode for a highlighted strip, then layer modifiers for bordered, light, dark, full-width, or compact styles.

Structure

• .promo - the base promo box wrapper
• .promo-border - outline style with a border instead of a filled background
• .promo-light - light background variant
• .promo-dark - dark background variant (pair with .bg-color, .bg-primary, .bg-danger, etc.)
• .promo-full - full-width edge-to-edge banner (wrap the inner content in .container)
• .promo-mini - compact, stacked layout for narrow columns
• .promo-uppercase - uppercases the headline text

Structure Markup

<div class="promo mb-5">
	<div class="row align-items-center">
		<div class="col-12 col-lg">
			<h3>Try Premium Free for <span>30 Days</span> and you'll never regret it!</h3>
			<span>Starts at just <em>$9.99/month</em> afterwards. No Ads, No Gimmicks and No SPAM.</span>
		</div>
		<div class="col-12 col-lg-auto mt-4 mt-lg-0">
			<a href="#" class="button button-large button-circle m-0">Start Trial</a>
		</div>
	</div>
</div>

Variants

Bordered: add .promo-border and padding utilities.

<div class="promo promo-border p-4 p-md-5 mb-5">
	<div class="row align-items-center">
		<div class="col-12 col-lg">
			<h3>Join Now and Get <span>30% off</span> on Pro Membership for <span>Life</span>!</h3>
		</div>
		<div class="col-12 col-lg-auto mt-4 mt-lg-0">
			<a href="#" class="button button-black button-large button-rounded m-0">Get Deal</a>
		</div>
	</div>
</div>

Dark with color: combine .promo-dark with a background utility.

<div class="promo promo-dark bg-color p-4 p-md-5 mb-5">...</div>

Full width: add .promo-full and nest a .container inside so the content stays aligned.

<div class="promo promo-border promo-full p-4 p-md-5 mb-5">
	<div class="container">
		<div class="row align-items-center">...</div>
	</div>
</div>

Mini: add .promo-mini for a stacked, compact box that fits inside grid columns.

<div class="promo promo-border promo-mini p-5">
	<div class="row align-items-center">
		<div class="col-12">
			<h3>Join Now and Get <span>30% off</span> on Pro Membership!</h3>
		</div>
		<div class="col-12 mt-4">
			<a href="#" class="button button-black button-circle button-rounded m-0">Get Deal</a>
		</div>
	</div>
</div>

Tips

• Highlight key words in the headline by wrapping them in <span>.
• Use the Canvas .button shortcode for the action, matching the demo styles.
• Pair .promo-full with .parallax.scroll-detect and a .parallax-bg image for a full-bleed banner.