Promo Box
Promo Box is a custom component built as an alternative to Cards, so it can be used where you need card-like components to hold some basic content or other features, styled differnetly for different kinds of contents without touching the styling of the cards.
Usage Example
Promo Box with left aligned content, center aligned image and right positioned icon/ the content can be aligned in any direction and also the images and icons can be positioned on left, center or right of the text container.
Left Aligned Content
Mauris tempus euismod tempus. Vestibulum aliquet lacinia lectus. In consectetur blandit quam, at tincidunt.
Center Image
Quisque in suscipit nulla. Maecenas id pulvinar est. Sed euismod hendrerit.
Right Icon
Quisque in suscipit nulla. Maecenas id pulvinar est. Sed euismod hendrerit.
<div class="promo-box">
<h6 class="box-title mb-15">Box Title</h6>
<p class="box-description">Box Description</p>
</div><!-- / promo-box -->Custom Content
Promo Box with Column Line Separators
Responsive
Mobile-first approach, it works well on mobile.
Bootstrap 5
Built with Bootstrap 5, using Vanilla JS plugins
Customize
Sass files are included for fast and easy styling.
<div class="promo-box">
<div class="row">
<div class="col-xl-4 col-line tablet-xl-no-border">
<div class="p-y-40 p-x-30 promo-center">
<h6 class="box-title mb-15">Box Title</h6>
<p class="box-description">Box Description</p>
</div><!-- / promo-center -->
</div><!-- / column -->
<div class="col-xl-4 col-line tablet-xl-no-border">
<div class="p-y-40 p-x-30 promo-center">
<h6 class="box-title mb-15">Box Title</h6>
<p class="box-description">Box Description</p>
</div><!-- / promo-center -->
</div><!-- / column -->
<div class="col-xl-4 col-line">
<div class="p-y-40 p-x-30 promo-center">
<h6 class="box-title mb-15">Box Title</h6>
<p class="box-description">Box Description</p>
</div><!-- / promo-center -->
</div><!-- / column -->
</div><!-- / row -->
</div><!-- / promo-box -->