Skip to main content

Main Content

Hero

This component has experimental features.

Description

A hero block that can be either an image or a video with some overlay text.

Experimental: The YouTube player has not been finished.

Default Style

Example Hero Image
This is a super headline

Headline goes here

Sample text goes here and this card should be able to handle a few lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CTA Link Label

Lorem ipsum dolor sit amet , consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ( ex ea commodo consequat ).

Example Markup

<div class="su-hero [ modifier_class ]"> <div class="su-hero__media"> <img src="https://placeimg.com/2000/1333/any" alt="Example Hero Image" /> </div> <article class="su-card su-hero__card"> <section class="su-card__contents"> <span>This is a super headline</span> <h2>Headline goes here</h2> <p>Sample text goes here and this card should be able to handle a few lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <a href="https://stanford.edu" class="su-link su-card__link su-link--action">CTA Link Label</a> <div class="su-card__button"> <a href="https://stanford.edu" class="su-link su-button">Button Label</a> </div> </section> </article> <div class="su-hero__content"> <div class="su-hero__content-inner"> <p> Lorem ipsum <strong>dolor sit amet</strong> , consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <a href="#">exercitation ullamco laboris nisi</a> ut aliquip ( <i>ex ea commodo consequat</i> ). </p> </div> </div> </div>

Style Variants

.su-hero--caption

An under banner caption option.

Example Hero Image
This is a super headline

Headline goes here

Sample text goes here and this card should be able to handle a few lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CTA Link Label

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip (ex ea commodo consequat).

Example Markup

<div class="su-hero su-hero--caption"> <div class="su-hero__media"> <img src="https://placeimg.com/2000/1333/any" alt="Example Hero Image" /> </div> <article class="su-card su-hero__card"> <section class="su-card__contents"> <span>This is a super headline</span> <h2>Headline goes here</h2> <p>Sample text goes here and this card should be able to handle a few lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <a href="https://stanford.edu" class="su-link su-card__link su-link--action">CTA Link Label</a> <div class="su-card__button"> <a href="https://stanford.edu" class="su-link su-button">Button Label</a> </div> </section> </article> <div class="su-hero__content"> <div class="su-hero__content-inner"> <p> Lorem ipsum <strong>dolor sit amet</strong> , consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <a href="#">exercitation ullamco laboris nisi</a> ut aliquip ( <i>ex ea commodo consequat</i> ). </p> </div> </div> </div>

.su-hero--youtube

A YouTube video in the background.

This is a super headline

Headline goes here

Sample text goes here and this card should be able to handle a few lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CTA Link Label

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip (ex ea commodo consequat).

Example Markup

<div class="su-hero su-hero--youtube"> <div class="su-hero__media"> <iframe width="560" height="315" src="https://www.youtube.com/embed/_Nq4Z5i7lcs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe> </div> <article class="su-card su-hero__card"> <section class="su-card__contents"> <span>This is a super headline</span> <h2>Headline goes here</h2> <p>Sample text goes here and this card should be able to handle a few lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <a href="https://stanford.edu" class="su-link su-card__link su-link--action">CTA Link Label</a> <div class="su-card__button"> <a href="https://stanford.edu" class="su-link su-button">Button Label</a> </div> </section> </article> <div class="su-hero__content"> <div class="su-hero__content-inner"> <p> Lorem ipsum <strong>dolor sit amet</strong> , consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <a href="#">exercitation ullamco laboris nisi</a> ut aliquip ( <i>ex ea commodo consequat</i> ). </p> </div> </div> </div>