Skip to main content

Putting It All Together

Below are some examples of how you might combine Bootstrap’s utility classes with WVU’s utility classes to quickly create visually striking WVU-branded components.

Let’s Go

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Call to Action
<div class="py-5 text-center text-white wvu-bg-vignetting bg-wvu-neutral--dark-gray wvu-bg-pattern-grid-transparent wvu-bg-position-center-left--75 wvu-bg-position-xl-center-right wvu-bg-position-spacer-md-top" style="background-image: url(/files/8aa49c0c-ca6f-495b-af9d-72fd45761700/1720x1720);">
    <div class="container">
        <div class="row wvu-z-index-content">
            <div class="col col-md-9 mx-auto">
                <h2 class="display-3 wvu-shout wvu-slash--gold wvu-slash wvu-slash--gold wvu-slash--center-bottom mt-5">Let’s Go</h2>
                <p class="iowan-old-style-black-italic h4">
            Lorem ipsum dolor sit amet.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.Call to Action</p>
                <a href="#" class="btn btn-primary mb-5 wvu-grow-shadow">Call to Action</a>
            </div>
        </div>
    </div>
</div>

Let’s Go

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Call to Action
<div class="py-5 text-center text-white wvu-bg-vignetting wvu-bg-blend-mode-luminosity--80 bg-wvu-neutral--dark-gray wvu-bg-pattern-grid-transparent wvu-bg-position-center-left--75 wvu-bg-position-xl-center-right wvu-bg-position-spacer-md-top" style="background-image: url(/files/8aa49c0c-ca6f-495b-af9d-72fd45761700/1720x1720);">
    <div class="container">
        <div class="row wvu-z-index-content">
            <div class="col col-md-9 mx-auto">
                <h2 class="display-3 wvu-shout wvu-slash wvu-slash--gold wvu-slash--center-bottom mt-5">Let’s Go</h2>
                <p class="iowan-old-style-black-italic h4">
            Lorem ipsum dolor sit amet.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
                <a href="#" class="btn btn-primary mb-5 wvu-grow-shadow">Call to Action</a>
            </div>
        </div>
    </div>
</div>

Let’s Go

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Call to Action
<div class="py-5 text-center wvu-bg-topo-dark">
    <div class="container">
        <div class="row wvu-z-index-content">
            <div class="col col-md-9 mx-auto">
                <h2 class="display-3 wvu-shout wvu-slash wvu-slash--gold wvu-slash--center-bottom mt-5">Let’s Go</h2>
                <p class="iowan-old-style wvu-text-letter-spacing text-uppercase h4">
            Lorem ipsum dolor sit amet.
                </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
                <a href="#" class="btn btn-primary mb-5 wvu-grow-shadow">Call to Action</a>
            </div>
        </div>
    </div>
</div>

For a complete list of examples, check out our full library of components and themes.