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:

<style type="text/css">
.hero {
	position: relative;
}

.hero .hero-body {
	background: rgba(0, 0, 0, 0.6);
	color: #FFF;
	font-weight: 300;
	left: 50%;
	margin-bottom: 25px;
	padding: 15px;
	position: absolute;
	text-align: center;
	text-shadow: none;
	transform: translate(-50%, -50%);
	top: 50%;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.btn:hover, 
.btn:focus {
    color: #333;
    text-decoration: none;
}
.btn:disabled {
    color: #555555;
    background-color: #dddddd;
    border-color: #555555;
}
.btn-primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}
.btn-primary:hover {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}
.btn-primary:focus {
  color: #fff;
}
.btn-primary:active {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}
.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}
</style>
<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" href="#">Do It Now!</a>
	</div>
</div>