Custom
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.
Box Title
Box Description
<div class="promo-box">
<i class="bi-star promo-icon d-block mb-10 text-primary"></i>
<h6 class="box-title">Box Title</h6>
<p class="box-description">Box Description</p>
</div><!-- / promo-box -->
Image & Icon Positions
Promo Boxes can have images and icons positioned on the sides or top of the box-description.
Left Image
Quisque in suscipit nulla. Maecenas id pulvinar est. Euismod hendrerit.
Center Icon
Quisque in suscipit nulla. Maecenas id pulvinar est. Sed euismod hendrerit.
Right Icon
Quisque in suscipit nulla. Maecenas id pulvinar est. Euismod hendrerit.
<!-- Promo Box with Left Image -->
<div class="promo-box promo-left">
<div class="promo-container-big">
<div class="promo-big">
<img src="../assets/images/ph-mini.jpg" alt="" class="promo-box-image mb-25">
</div><!-- / promo-big -->
<h6 class="box-title">Left Image</h6>
<p class="box-description">...</p>
</div><!-- / promo-container -->
</div><!-- / promo-box -->
<!-- Promo Box with Icon Background -->
<div class="promo-box promo-center">
<div class="promo-container-big">
<div class="promo-big promo-icon-bg mb-25">
<i class="bi-person promo-icon"></i>
</div><!-- / promo-icon-bg -->
<h6 class="box-title">Center Icon</h6>
<p class="box-description">...</p>
</div><!-- / promo-container -->
</div><!-- / promo-box -->
<!-- Promo Box with Icon Right -->
<div class="promo-box promo-right text-right">
<div class="promo-container">
<i class="bi-gear promo-icon d-block mb-25"></i>
<h6 class="box-title">Right Icon</h6>
<p class="box-description">....</p>
</div><!-- / promo-container -->
</div><!-- / promo-box -->
Icon Background Sizes
Promo Box with icon backgrounds comes with different sizes: default size, .icon-md and .icon-sm.
Default Size
Quisque in suscipit nulla. Maecenas id pulvinar est. Sed euismod hendrerit.
Medium Size
Quisque in suscipit nulla. Maecenas id pulvinar est. Sed euismod hendrerit.
Small Size
Quisque in suscipit nulla. Maecenas id pulvinar est. Sed euismod hendrerit.
<!-- Default Size -->
<div class="promo-box promo-left">
<div class="promo-container-big">
<div class="promo-big promo-icon-bg mb-25">
<i class="bi-lightbulb promo-icon"></i>
</div><!-- / promo-icon-bg -->
<h6 class="box-title">Default Size</h6>
<p class="box-description">...</p>
</div><!-- / promo-container -->
</div><!-- / promo-box -->
<!-- Medium Size -->
<div class="promo-box promo-left">
<div class="promo-container-big-md">
<div class="promo-big promo-icon-bg icon-md mb-25">
<i class="bi-lightbulb promo-icon"></i>
</div><!-- / promo-icon-bg -->
<h6 class="box-title">Medium Size</h6>
<p class="box-description">...</p>
</div><!-- / promo-container -->
</div><!-- / promo-box -->
<!-- Small Size -->
<div class="promo-box promo-left">
<div class="promo-container-big-sm">
<div class="promo-big promo-icon-bg icon-sm mb-25">
<i class="bi-lightbulb promo-icon"></i>
</div><!-- / promo-icon-bg -->
<h6 class="box-title">Small Size</h6>
<p class="box-description">...</p>
</div><!-- / promo-container -->
</div><!-- / promo-box -->
Image Sizes
Promo Box comes with different image sizes: default size, .img-md and .img-sm.
Default Size
Quisque in suscipit nulla. Maecenas id pulvinar est. Euismod hendrerit.
Medium Size
Quisque in suscipit nulla. Maecenas id pulvinar est. Euismod hendrerit.
Small Size
Quisque in suscipit nulla. Maecenas id pulvinar est. Euismod hendrerit.
<!-- Default Size -->
<div class="promo-box promo-left">
<div class="promo-container-big">
<div class="promo-big">
<img src="../assets/images/ph-mini.jpg" alt="" class="promo-box-image mb-25">
</div><!-- / promo-big -->
<h6 class="box-title">Default Size</h6>
<p class="box-description">...</p>
</div><!-- / promo-container -->
</div><!-- / promo-box -->
<!-- Medium Size -->
<div class="promo-box promo-left">
<div class="promo-container-big-md">
<div class="promo-big">
<img src="../assets/images/ph-mini.jpg" alt="" class="promo-box-image img-md mb-25">
</div><!-- / promo-big -->
<h6 class="box-title">Medium Size</h6>
<p class="box-description">...</p>
</div><!-- / promo-container -->
</div><!-- / promo-box -->
<!-- Small Size -->
<div class="promo-box promo-left">
<div class="promo-container-big-sm">
<div class="promo-big">
<img src="../assets/images/ph-mini.jpg" alt="" class="promo-box-image img-sm mb-25">
</div><!-- / promo-big -->
<h6 class="box-title">Small Size</h6>
<p class="box-description">...</p>
</div><!-- / promo-container -->
</div><!-- / promo-box -->
Custom Content
Promo Box with Row and Column Line Separators.
Responsive
Mobile-first approach, it works well on mobiles.
Bootstrap 5
Built with Bootstrap 5, using Vanilla JS.
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-20 p-x-5 promo-center">
<i class="bi-aspect-ratio promo-icon text-primary d-block mb-10"></i>
<h6 class="box-title">Responsive</h6>
<p class="box-description">Mobile-first approach, it works well on mobiles.</p>
</div><!-- / promo-center -->
</div><!-- / column -->
<div class="col-xl-4 col-line tablet-xl-no-border">
<div class="p-y-20 p-x-5 promo-center">
<i class="bi-bootstrap promo-icon text-primary d-block mb-10"></i>
<h6 class="box-title">Bootstrap 5</h6>
<p class="box-description">Built with Bootstrap 5, using Vanilla JS.</p>
</div><!-- / promo-center -->
</div><!-- / column -->
<div class="col-xl-4 col-line">
<div class="p-y-20 p-x-5 promo-center">
<i class="bi-sliders promo-icon text-primary d-block mb-10"></i>
<h6 class="box-title">Customize</h6>
<p class="box-description">Sass files are included for fast and easy styling.</p>
</div><!-- / promo-center -->
</div><!-- / column -->
</div><!-- / row -->
</div><!-- / promo-box -->
Timeline
Timeline is a custom component, built to display content in a timeline / three layout.
-
University
Web Development
Quisque sit amet urna et neque porttitor mattis a libero a nunc consectetur pellentesque quis.
-
High School
Web Design
Quisque sit amet urna et neque porttitor mattis a libero a nunc consectetur pellentesque quis.
<ul class="timeline">
<li class="timeline">
<div class="timeline-badge"></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">University</h4>
<p class="text-sm mb-5">Web Development</p>
<p class="timeline-meta text-xs mb-10">
<i class="bi-map fs-12 mr-5"></i>
<span class="mr-15">Miami</span>
<i class="bi-calendar-event fs-12 mr-5"></i>
<span>2016-2021</span>
</p>
</div><!-- / time-line-heading -->
<div class="timeline-body">
<p>...</p>
</div><!-- / timeline-body -->
</div><!-- / timeline-panel -->
</li><!-- timeline -->
<li class="timeline-inverted">
<div class="timeline-badge"></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">High School</h4>
<p class="text-sm mb-5">Web Design</p>
<p class="timeline-meta text-xs mb-10">
<i class="bi-map fs-12 mr-5"></i>
<span class="mr-15">New York</span>
<i class="bi-calendar-event fs-12 mr-5"></i>
<span>2012-2016</span>
</p>
</div><!-- / time-line-heading -->
<div class="timeline-body">
<p>...</p>
</div><!-- / timeline-body -->
</div><!-- / timeline-panel -->
</li><!-- timeline-inverted -->
</ul><!-- / timeline -->
Typewriter
Typewriter is a custom component, the typewriter.js file to be loaded at the end of the content, before the closing </body> tag. The Typewriter can be initialized by adding a <span> tag with .typewrite css class to the end of the text; specifying the speed by including data-period="*value-in-ms" and the typed text on a data-type='[*]'.
Typewriter can be used on
Paragraph text
<h3>
Typewriter can be used on
<span class="typewrite text-primary" data-period="3000" data-type='[ "headings", "paragraphs", "any text element" ]'>
<span class="wrap"></span>
</span>
</h3>
<p>
Paragraph text
<span class="typewrite text-primary" data-period="2500" data-type='[ "typewriter", "typing more info", "final words!" ]'>
<span class="wrap"></span>
</span>
</p>