HTML Snippets: Hero Sections

HTML Snippets provide ready-to-use code for creating custom, modern HTML pages within the Learning Platform. This article focuses on snippets specifically designed for Hero Sections.

In this article:
What are Hero Sections
Instructions
HTML Snippets
Additional Resources

What are Hero Sections?

Hero Sections are prominent sections positioned at the top of your HTML page. These sections typically serve as an eye-catching introduction or focal point. Each page should include only one Hero Section.

Instructions

1. Copy the provided Stylesheet into your custom HTML page.
2. Choose one Hero Section from the options below.
3. Follow the instructions provided with each Hero Section to edit elements like the background image.
4. In your LMS HTML page code, use Ctrl+F to search for the keyword specified in the selected Hero Section snippet.
5. Use the Hero Section strategically to engage learners and highlight key learning objects in your Learning Platform.

HTML Snippets - Hero Sections

Half Hero Left

<!-- HALFHEROLEFT -->
<!-- In the Stylesheet, search for HalfHeroLeftURL to change the background image. You will need the URL of the image you'd like to use. -->

<div class="row clearfix ">
 <div class="col s12 l6 hide-on-med-and-down">
  <div class="halfheroleft">
</div>
</div>
<div class="col s12 l6 gradbgright">
<div class="halfheroright">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/Brainier%20no%20tagline%20logo-4.png" alt="" class="">
<h2>Welcome to<br>Company Name<br>University</h2>
<div class="btn-rightcontainer">
<a href="https://lms.brainier.com/#/browse/title" class="btn-right">Go to Course Library</a>
</div>
</div>
</div>
</div>

Half Hero Left Parallax

<!-- HALFHEROLEFTPARALLAX -->
<!-- In the Stylesheet, search for HalfHeroLeftURL to change the background image. You will need the URL of the image you'd like to use. -->
<div class="row clearfix ">
<div class="col s12 l6 hide-on-small-only" style="text-align: center;">
<div class="halfheroleft halfheroleftparallax">
</div>
</div>
<div class="col s12 l6 gradbgright" style="text-align: center;">
<div class="halfheroright">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/Brainier%20no%20tagline%20logo-4.png" alt="" class="">
<h2>Welcome to<br>Company Name<br>University</h2>
<div class="btn-rightcontainer">
<a href="https://lms.brainier.com/#/browse/title" class="btn-right">Go to Course Library</a>
</div>
</div>
</div>
</div>

Full Overlay

<!-- FULL OVERLAY-->
<!-- In the Stylesheet, search for FullOverlayBGURL to change the background image. You will need the URL of the image you'd like to use. -->
<div class="row clearfix">
<div class="col s12 imgcontainerfull rtdark fulloverlaybg">
<div class="fulloverlaylogo">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/Brainier%20no%20tagline%20logo-4.png" alt="" class="">
</div>
<div class="fulloverlaycontent">
<h2>Welcome to<br>Company Name<br>University</h2>
<div class="btn-rightcontainer">
<a href="https://lms.brainier.com/#/browse/title" class="btn-right">UPSKILLING LIBRARY</a>
</div>
</div>
</div>
</div>

Full Overlay Parallax

<!-- FULL OVERLAY PARALLAX-->
<!-- In the Stylesheet, search for FullOverlayBGURL to change the background image. You will need the URL of the image you'd like to use. -->
<div class="row clearfix">
<div class="col s12 imgcontainerfull rtdark fulloverlaybg parallaxbg">
<div class="fulloverlaylogo">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/Brainier%20no%20tagline%20logo-4.png" alt="" class="">
</div>
<div class="fulloverlaycontent">
<h2>Welcome to<br>Company Name<br>University</h2>
<div class="btn-rightcontainer">
<a href="https://lms.brainier.com/#/browse/title" class="btn-right">UPSKILLING LIBRARY</a>
</div>
</div>
</div>
</div>

Full w/ Split Right Dark Version

<!-- SPLIT TRANSPARENT RIGHT DARK-->
<!-- In the Stylesheet, search for SplitTranspRightHeroURL to change the background image. You will need the URL of the image you'd like to use. -->
<div class="row clearfix splitransprighthero">
<div class="col s12 l6">
</div>
<div class="col s12 l6 righttransp rtdark">
<div class="fulloverlaylogo">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/Brainier%20no%20tagline%20logo-4.png" alt="" class="">
</div>
<div class="splitright">
<h2>Welcome to<br>Company Name<br>University</h2>
<div class="btn-rightcontainer">
<a href="https://lms.brainier.com/#/browse/title" class="btn-right">UPSKILLING LIBRARY</a>
</div>
</div>
</div>
</div>

Full w/ Split Right Dark Version Parallax

<!-- SPLIT TRANSPARENT RIGHT DARK PARALLAX-->
<!-- In the Stylesheet, search for SplitTranspRightHeroURL to change the background image. You will need the URL of the image you'd like to use. -->
<div class="row clearfix splitransprighthero parallaxbg">
<div class="col s12 l6">
</div>
<div class="col s12 l6 righttransp rtdark">
<div class="fulloverlaylogo">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/Brainier%20no%20tagline%20logo-4.png" alt="" class="">
</div>
<div class="splitright">
<h2>Welcome to<br>Company Name<br>University</h2>
<div class="btn-rightcontainer">
<a href="https://lms.brainier.com/#/browse/title" class="btn-right">UPSKILLING LIBRARY</a>
</div>
</div>
</div>
</div>

Full w/ Split Right Light Version

<!-- SPLIT TRANSPARENT RIGHT LIGHT-->
<!-- In the Stylesheet, search for SplitTranspRightHeroURL to change the background image. You will need the URL of the image you'd like to use. -->
<div class="row clearfix splitransprighthero">
<div class="col s12 l6">
</div>
<div class="col s12 l6 righttransp">
<div class="fulloverlaylogo">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/Brainier%20no%20tagline%20logo-4.png" alt="" class="">
</div>
<div class="splitright">
<h2>Welcome to<br>Company Name<br>University</h2>
<div class="btn-rightcontainer">
<a href="https://lms.brainier.com/#/browse/title" class="btn-right">UPSKILLING LIBRARY</a>
</div>
</div>
</div>
</div>

Full w/ Split Right Light Version Parallax

<!-- SPLIT TRANSPARENT RIGHT LIGHT PARALLAX-->
<!-- In the Stylesheet, search for SplitTranspRightHeroURL to change the background image. You will need the URL of the image you'd like to use. -->
<div class="row clearfix splitransprighthero parallaxbg">
<div class="col s12 l6">
</div>
<div class="col s12 l6 righttransp">
<div class="fulloverlaylogo">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/Brainier%20no%20tagline%20logo-4.png" alt="" class="">
</div>
<div class="splitright">
<h2>Welcome to<br>Company Name<br>University</h2>
<div class="btn-rightcontainer">
<a href="https://lms.brainier.com/#/browse/title" class="btn-right">UPSKILLING LIBRARY</a>
</div>
</div>
</div>
</div>

Full w/ Overlay Heading Dark

<!-- FULL OVERLAY HEADING DARK-->
<!-- In the Stylesheet, search for FullParallaxURL to change the background image. You will need the URL of the image you'd like to use. -->
<div class="row clearfix margin45 ">
<div class="col s12" style="text-align: center;">
<div class="imgcontainerfull parallax parallaxfixed">
<div class="logoleft">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/Brainier%20no%20tagline%20logo-4.png" alt="" class="">
</div>
<div class="boxtext">
<h2>Welcome to<br>Company Name<br>University</h2>
<div class="btn-rightcontainer">
<a href="https://lms.brainier.com/#/browse/title" class="btn-right">VIEW YOUR COURSES</a>
</div>
</div>
</div>
</div>
</div>

Full w/ Overlay Heading Dark Parallax

<!-- FULL OVERLAY HEADING DARK-->
<!-- In the Stylesheet, search for FullParallaxURL to change the background image. You will need the URL of the image you'd like to use. -->
<div class="row clearfix margin45 ">
<div class="col s12" style="text-align: center;">
<div class="imgcontainerfull parallax parallaxfixed">
<div class="logoleft">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/Brainier%20no%20tagline%20logo-4.png" alt="" class="">
</div>
<div class="boxtext">
<h2>Welcome to<br>Company Name<br>University</h2>
<div class="btn-rightcontainer">
<a href="https://lms.brainier.com/#/browse/title" class="btn-right">VIEW YOUR COURSES</a>
</div>
</div>
</div>
</div>
</div>

Full w/ Overlay Heading Light

<!-- FULL FIXED LIGHT-->
<!-- In the Stylesheet, search for FullParallaxURL  to change the background image. You will need the URL of the image you'd like to use. -->
<div class="row clearfix margin45 ">
<div class="col s12" style="text-align: center;">
<div class="imgcontainerfull parallax parallaxfixed">
<div class="logoleft">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/Brainier%20no%20tagline%20logo-4.png" alt="" class="">
</div>
<div class="boxtext">
<h2 class="boxtexth2light">Welcome to<br>Company Name<br>University</h2>
<div class="btn-rightcontainer lightbutton">
<a href="https://lms.brainier.com/#/browse/title" class="btn-right">VIEW YOUR COURSES</a>
</div>
</div>
</div>
</div>
</div>

Full w/ Overlay Heading Light Parallax

<!-- FULL PARALLAX LIGHT-->
<!-- In the Stylesheet, search for FullParallaxURL  to change the background image. You will need the URL of the image you'd like to use. -->
<div class="row clearfix margin45 ">
<div class="col s12" style="text-align: center;">
<div class="imgcontainerfull parallax">
<div class="logoleft">
<img src="https://23531588.fs1.hubspotusercontent-na1.net/hubfs/23531588/Brainier%20no%20tagline%20logo-4.png" alt="" class="">
</div>
<div class="boxtext">
<h2 class="boxtexth2light">Welcome to<br>Company Name<br>University</h2>
<div class="btn-rightcontainer lightbutton">
<a href="https://lms.brainier.com/#/browse/title" class="btn-right">VIEW YOUR COURSES</a>
</div>
</div>
</div>
</div>
</div>

---

Additional Resources

For additional HTML Snippets, see the articles below:

HTML Snippets: Content Section Rounded
HTML Snippets: Content Section Flat
HTML Snippets: Headings