Callout sections are a flexible way to visually highlight content on your page and/or promote specific content in order to help your users navigate your site.

Callout - Primary-Secondary

Lorem Ipsum is simply dummy text of the printing

<section class="container">
    <div class="callout small-text-2 version-first branding-primary-secondary col-lg-8 text--center">
        <div class="container">
        <a href="#early-registration-benefits">
            <div class="lpp-cntr">
            <span class="pill-btn-circle blueprint-icon icon-learning_path icon-1x"></span>
            <button class="btn pill-btn small-text-2"> Lorem Ipsum is simply </button>
            </div>
        </a>
        <div> Lorem Ipsum is simply dummy text of the printing</a>
        </div>
        </div>
    </div>
</section>

Callout - Primary-Reverse

Lorem Ipsum is simply dummy text of the printing

<section class="container">
    <div class="callout small-text-2 version-first branding-primary-reverse col-lg-8 text--center">
        <div class="container">
        <a href="#early-registration-benefits">
            <div class="lpp-cntr">
            <span class="pill-btn-circle blueprint-icon icon-learning_path icon-1x"></span>
            <button class="btn pill-btn small-text-2"> Lorem Ipsum is simply </button>
            </div>
        </a>
        <div> Lorem Ipsum is simply dummy text of the printing</a>
        </div>
        </div>
    </div>
</section>

Callout - Secondary-Primary

Lorem Ipsum is simply dummy text of the printing

<section class="container">
    <div class="callout small-text-2 version-first branding-secondary-primary col-lg-8 text--center">
        <div class="container">
        <a href="#early-registration-benefits">
            <div class="lpp-cntr">
            <span class="pill-btn-circle blueprint-icon icon-learning_path icon-1x"></span>
            <button class="btn pill-btn small-text-2"> Lorem Ipsum is simply </button>
            </div>
        </a>
        <div> Lorem Ipsum is simply dummy text of the printing</a>
        </div>
        </div>
    </div>
</section>

Callout - Secondary-Reverse

Lorem Ipsum is simply dummy text of the printing

<section class="container">
    <div class="callout small-text-2 version-first branding-secondary-reverse col-lg-8 text--center">
        <div class="container">
        <a href="#early-registration-benefits">
            <div class="lpp-cntr">
            <span class="pill-btn-circle blueprint-icon icon-learning_path icon-1x"></span>
            <button class="btn pill-btn small-text-2"> Lorem Ipsum is simply </button>
            </div>
        </a>
        <div> Lorem Ipsum is simply dummy text of the printing</a>
        </div>
        </div>
    </div>
</section>

Callout - Reverse-Primary

Lorem Ipsum is simply dummy text of the printing

<section class="container">
    <div class="callout small-text-2 version-first branding-reverse-primary col-lg-8 text--center">
        <div class="container">
        <a href="#early-registration-benefits">
            <div class="lpp-cntr">
            <span class="pill-btn-circle blueprint-icon icon-learning_path icon-1x"></span>
            <button class="btn pill-btn small-text-2"> Lorem Ipsum is simply </button>
            </div>
        </a>
        <div> Lorem Ipsum is simply dummy text of the printing</a>
        </div>
        </div>
    </div>
</section>

Callout - Reverse-Secondary

Lorem Ipsum is simply dummy text of the printing

<section class="container">
    <div class="callout small-text-2 version-first branding-reverse-secondary col-lg-8 text--center">
        <div class="container">
        <a href="#early-registration-benefits">
            <div class="lpp-cntr">
            <span class="pill-btn-circle blueprint-icon icon-learning_path icon-1x"></span>
            <button class="btn pill-btn small-text-2"> Lorem Ipsum is simply </button>
            </div>
        </a>
        <div> Lorem Ipsum is simply dummy text of the printing</a>
        </div>
        </div>
    </div>
</section>