Hero

There are multiple types of heroes. Variations are shown below.

Homepage Hero #

<section class="hero">
    <div
        class="hero-wallpaper"
        style="background-image: url(assets/images/mountunion-template-hero_home.jpg);"
    ></div>
    <div class="hero-content">
        <div class="container">
            <h1 class="display-1 pad-3-t pad-4-t-md-up">Lorem Ipsum Dolor Sit Amet</h1>
            <p class="heading-6">
                Dolor sit amet, consectetur adipi scing elit, sed do
                eiusmod tempor incidert idunt ut labore et dolore scing
                elit, sed do eiusmod tempor incidert
            </p>
            <a class="btn display-block margin-t margin-3-t-md-up">Learn More</a>
        </div>
    </div>
</section>

Split screen hero #

<section class="hero">
    <h1 class="text-screen-reader">Admissions</h1>
    <div class="container">
        <div class="hero-panes white-anchors">
            <div class="hero-pane">
               <div
                    class="hero-wallpaper"
                    style="background-image: url(assets/images/mountunion-template-hero_admissions_apply.jpg)"
                ></div>
                <div class="hero-content display-flex flex-align-items-center">
                    <div class="container-fluid">
                        <a>
                            <small
                                class="display-block text-line-height-1 text-transform-uppercase margin-1-b"
                            >
                                <b>Admissions</b>
                            </small>
                            <h2 class="display-2">Apply Now</h2>
                        </a>
                    </div>
                </div>
            </div>
            <div class="hero-pane">
                <div
                    class="hero-wallpaper"
                    style="background-image: url(assets/images/mountunion-template-hero_admissions_visit.jpg)"
                ></div>
                <div class="hero-content pad-1-t-lg-down pad-1-b-lg-down display-flex flex-align-items-center">
                    <div class="container-fluid">
                        <a>
                            <small
                                class="display-block text-line-height-1 text-transform-uppercase margin-1-b"
                            >
                                <b>Admissions</b>
                            </small>
                            <h2 class="display-2">Visit Campus</h2>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Full width hero with title #

<section class="hero">
    <div
        class="hero-wallpaper"
        style="background-image: url(assets/images/mountunion-template-hero_admissions_undergrad.jpg)"
    ></div>
    <div class="hero-content display-flex flex-align-items-center">
        <div class="container">
            <h1 class="display-2">Lorem Ipsum</h1>
        </div>
    </div>
</section>

Full width hero without title #

<section class="hero">
    <div
        class="hero-wallpaper"
        style="background-image: url(assets/images/mountunion-template-hero_news_article.jpg);"
    ></div>
    <div class="hero-content"></div>
</section>

Full width hero with title and with purple overlay #

<section class="hero purple-bg">
    <div
        class="hero-wallpaper hero-wallpaper-monochrome"
        style="background-image: url(assets/images/mountunion-template-hero_events.jpg);"
    ></div>
    <div class="hero-content hero-content-compact display-flex flex-align-items-center">
        <div class="container">
            <h1 class="display-2">Events</h1>
        </div>
    </div>
</section>

Full width hero without title and with purple overlay #

<section class="hero purple-bg">
    <div
        class="hero-wallpaper hero-wallpaper-monochrome"
        style="background-image: url(assets/images/mountunion-template-hero_admissions_finaid_faqs.jpg);"
    ></div>
    <div class="hero-content hero-content-compact"></div>
</section>