Heros
Heros are generally the first visual element on a webpage for the marketing websites. When using a hero on a marketing webpage it is important to hide the default page title on the website's template. You can hide the page title by using the following markup:
Example: Hide Template Page Title
Copy
<style type="text/css">
#page-title { display:none; }
</style>
Example: Hero with Buttons
LOREM IPSUM
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Copy
<section class="hero" id="">
<figure class="hero-img">
<picture class="r-img">
<img src="/images/directory/file-name.jpg" alt="Alt Text" border="0" />
</picture>
</figure>
<div class="container">
<div class="row">
<div class="col-12 col-lg-6">
<div class="hero-content">
<p class="eyebrow">TEXT</p>
<h2>Text</h2>
<p>Text</p>
<p>
<a href="#" target="_self" class="btn btn-primary">Text</a>
<a href="#" target="_self" class="btn btn-primary btn-outline">Text<i class="fa-solid fa-chevron-right"></i></a>
</p>
</div>
</div>
</div>
</div>
</section>
Example: Hero with QR Code
LOREM IPSUM
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Scan to download the application.
Copy
<section class="hero" id="">
<figure class="hero-img">
<picture class="r-img">
<img src="/images/directory/file-name.jpg" alt="Alt Text" border="0" />
</picture>
</figure>
<div class="container">
<div class="row">
<div class="col-12 col-lg-6">
<div class="hero-content">
<p class="eyebrow">TEXT</p>
<h2>Text</h2>
<p>Text</p>
<div class="qr-code-set">
<img src="/images/path/file-name.png" alt="Alt Text" border="0" />
<p>Text</p>
</div>
</div>
</div>
</div>
</div>
</section>
Example: Hero with Subheading and Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Hyperlink
Copy
<section class="hero" id="">
<figure class="hero-img">
<picture class="r-img">
<img src="/images/directory/file-name.jpg" alt="Alt Text" border="0" />
</picture>
</figure>
<div class="container">
<div class="row">
<div class="col-12 col-lg-6">
<div class="hero-content">
<h2>Text</h2>
<p class="subheading">Text</p>
<p>Text <a href="#" target="_self">Text</a></p>
</div>
</div>
</div>
</div>
</section>
Example: Hero with Subheading
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet.
Copy
<section class="hero" id="">
<figure class="hero-img">
<picture class="r-img">
<img src="/images/directory/file-name.jpg" alt="Alt Text" border="0" />
</picture>
</figure>
<div class="container">
<div class="row">
<div class="col-12 col-lg-6">
<div class="hero-content">
<h2>Text</h2>
<p class="subheading">Text</p>
</div>
</div>
</div>
</div>
</section>
Example: Hero with Checklist Circle
Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Copy
<section class="hero" id="">
<figure class="hero-img">
<picture class="r-img">
<img src="/images/directory/file-name.jpg" alt="Alt Text" border="0" />
</picture>
</figure>
<div class="container">
<div class="row">
<div class="col-12 col-lg-6">
<div class="hero-content">
<h2>Text</h2>
<ul class="checklist-circle">
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</div>
</div>
</div>
</div>
</section>
Example: Hero with a Different Background Color
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet.
Copy
<section class="hero bg-none bg-blue-10" id="">
<figure class="hero-img">
<picture class="r-img">
<img src="/images/directory/file-name.jpg" alt="Alt Text" border="0" />
</picture>
</figure>
<div class="container">
<div class="row">
<div class="col-12 col-lg-6">
<div class="hero-content">
<h2>Text</h2>
<p class="subheading">Text</p>
</div>
</div>
</div>
</div>
</section>
Example: Hero with a Dark Background Color
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet.
Copy
<section class="hero hero-dark bg-none bg-black" id="">
<figure class="hero-img">
<picture class="r-img">
<img src="/images/directory/file-name.jpg" alt="Alt Text" border="0" />
</picture>
</figure>
<div class="container">
<div class="row">
<div class="col-12 col-lg-6">
<div class="hero-content">
<h2>Text</h2>
<p class="subheading">Text</p>
</div>
</div>
</div>
</div>
</section>
Example: Hero with a Background Image and Additional Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet.
Copy
<section class="hero hero-dark hero-bg" id="">
<figure class="hero-img">
<picture class="r-img">
<img src="/images/directory/file-name.png" alt="Alt Text" border="0" />
</picture>
</figure>
<figure class="hero-bg-img">
<picture class="r-img">
<img src="/images/directory/file-name.jpg" alt="Alt Text" border="0" />
</picture>
</figure>
<div class="container">
<div class="row">
<div class="col-12 col-lg-6">
<div class="hero-content">
<h2>Text</h2>
<p class="subheading">Text</p>
</div>
</div>
</div>
</div>
</section>
Example: Hero with a Background Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet.
Copy
<section class="hero hero-dark hero-bg" id="">
<figure class="hero-bg-img">
<picture class="r-img">
<img src="/images/directory/file-name.jpg" alt="Alt Text" border="0" />
</picture>
</figure>
<div class="container">
<div class="row">
<div class="col-12 col-lg-6">
<div class="hero-content">
<h2>Text</h2>
<p class="subheading">Text</p>
</div>
</div>
</div>
</div>
</section>
Example: Hero with a Background Image that Wraps on Mobile
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet.
Copy
<section class="hero hero-dark hero-bg-wrap bg-none bg-navy-dark-20" id="">
<figure class="hero-bg-img">
<picture class="r-img">
<img src="/images/directory/file-name.jpg" alt="Alt Text" border="0" />
</picture>
</figure>
<div class="container">
<div class="row">
<div class="col-12 col-lg-6">
<div class="hero-content">
<h2>Text</h2>
<p class="subheading">Text</p>
</div>
</div>
</div>
</div>
</section>
Example: Hero with Side Navigation
LOREM IPSUM
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Copy
<section class="hero hero-dark hero-side-nav" id="">
<figure class="hero-bg-img">
<picture class="r-img">
<img src="/images/directory/file-name.jpg" alt="Alt Text" border="0" />
</picture>
</figure>
<div class="container">
<div class="row">
<div class="col-12 col-lg-4 col-xl-3">
<nav class="ibkr-sidebar">
<ul class="nav" id="navID">
<li class="nav-item"><a href="#" target="_self" class="nav-link active" id="navID-01" aria-selected="true">Text</a></li>
<li class="nav-item"><a href="#" target="_self" class="nav-link" id="navID-02" aria-selected="false">Text</a></li>
<li class="nav-item"><a href="#" target="_self" class="nav-link" id="navID-03" aria-selected="false">Text</a></li>
</ul>
</nav>
</div>
<div class="col-12 col-lg-8 col-xl-7">
<div class="hero-content">
<p class="eyebrow">TEXT</p>
<h2>Text</h2>
<p>Text</p>
</div>
</div>
</div>
</div>
</section>