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

    Miami 2016-2021

    Quisque sit amet urna et neque porttitor mattis a libero a nunc consectetur pellentesque quis.

  • High School

    Web Design

    New York 2012-2016

    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>
LAYOUTS
Default Layout
Layout Right Side-Nav
Layout Detached Left Side-Nav
Layout Detached Right Side-Nav