Hero

A hero is a large image that “bleeds” off the edges of the web page or app screen. They are often used as banners to anchor a page or screen but can be used anywhere. Often, text and call-to-action buttons are positioned on top of the image.

Usage

Hero images add sophistication and energy to a page or screen and often set the tone for a user’s experience. Limit uploads to images of 72 pixels per inch.

Examples

Default

Columbia University Morningside campus at dusk

Default hero markup:

Picture of Campus

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

Do It Now!
<div class="hero hero-default">
<div class="hero-img"><img alt="Picture of Campus" border="0" data-entity-type="" data-entity-uuid="" src="https://www.columbia.edu/content/sites/default/files/styles/cu_crop/public/content/Morningside%20Campus%20at%20Dusk%202.jpg" /></div>

<div class="hero-body">
<h1>Heading 1</h1>

<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<a class="btn btn-primary btn-lg d-inline-block" href="#">Do It Now!</a></div>
</div>