Hero
These sections are prominent sections on websites or applications that introduce users to the main message or offering.
Overview
"Hero" components are prominent sections on websites or applications that introduce users to the main message or offering. Typically featuring a bold headline, engaging visuals, and a call-to-action, hero blocks aim to grab attention and guide users toward the next step or key information.
Examples
Below are a few examples of "Hero" sections.
Example 1
Welcome to our website
Discover amazing content and connect with our community.
<section class="bg-body py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<h1 class="display-5 fw-semibold">Welcome to our website</h1>
<p class="lead">Discover amazing content and connect with our community.</p>
<div class="d-flex gap-2">
<button class="btn btn-lg btn-primary text-nowrap">Join Us<i class="ri-arrow-right-line ms-2"></i></button>
<button class="btn btn-lg btn-outline-secondary text-nowrap">Learn More</button>
</div>
</div>
<div class="col-lg-6 mt-4 mt-lg-0">
<figure class="img-scale rounded-4 mb-0">
<img
src="https://placehold.co/540x540/EEE/31343C?text=Placeholder+Image"
class="img-fluid"
alt="Hero Image"
/>
</figure>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row align-items-center"> <div class="col-lg-6"> <h1
class="display-5 fw-semibold">Welcome to our website</h1> <p
class="lead">Discover amazing content and connect with our community.</p>
<div class="d-flex gap-2"> <button class="btn btn-lg btn-primary
text-nowrap">Join Us<i class="ri-arrow-right-line
ms-2"></i></button> <button class="btn btn-lg btn-outline-secondary
text-nowrap">Learn More</button> </div> </div> <div
class="col-lg-6 mt-4 mt-lg-0"> <figure class="img-scale rounded-4
mb-0"> <img
src="https://placehold.co/540x540/EEE/31343C?text=Placeholder+Image"
class="img-fluid" alt="Hero Image" /> </figure> </div>
</div> </div> </section>
Example 2
Welcome to our website
Discover amazing content and connect with our community.
<section class="bg-body py-5">
<div class="container text-md-center">
<h1 class="display-5 fw-semibold">Welcome to our website</h1>
<p class="lead">Discover amazing content and connect with our community.</p>
<div class="d-flex justify-content-md-center gap-2 mb-4 mb-md-5">
<button class="btn btn-lg btn-primary text-nowrap">Join Us<i class="ri-arrow-right-line ms-2"></i></button>
<button class="btn btn-lg btn-outline-secondary text-nowrap">Learn More</button>
</div>
<div class="row justify-content-center">
<div class="col-md-10 col-lg-8">
<figure class="img-scale rounded-4 w-100 mb-0">
<img
src="https://placehold.co/600x400/EEE/31343C?text=Placeholder+Image"
class="img-fluid shadow"
alt="Hero Image"
/>
</figure>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container
text-md-center"> <h1 class="display-5 fw-semibold">Welcome to our
website</h1> <p class="lead">Discover amazing content and connect with our
community.</p> <div class="d-flex justify-content-md-center gap-2 mb-4
mb-md-5"> <button class="btn btn-lg btn-primary text-nowrap">Join
Us<i class="ri-arrow-right-line ms-2"></i></button> <button
class="btn btn-lg btn-outline-secondary text-nowrap">Learn More</button>
</div> <div class="row justify-content-center"> <div
class="col-md-10 col-lg-8"> <figure class="img-scale rounded-4 w-100
mb-0"> <img
src="https://placehold.co/600x400/EEE/31343C?text=Placeholder+Image"
class="img-fluid shadow" alt="Hero Image" /> </figure> </div>
</div> </div> </section>
Example 3
Welcome to our website
Discover amazing content and connect with our community.
<section class="bg-body py-5">
<div class="container text-bg-secondary text-md-center rounded-4 p-4 p-md-5">
<h1 class="text-primary fw-semibold text-uppercase fs-5 mb-3">Welcome to our website</h1>
<h2 class="display-6 fw-medium mb-4">
Discover <span class="underline-3 primary">amazing</span> content and connect with our community.
</h2>
<button class="btn btn-lg btn-primary">Join Us<i class="ri-arrow-right-line ms-2"></i></button>
</div>
</section>
<section class="bg-body py-5"> <div class="container text-bg-secondary
text-md-center rounded-4 p-4 p-md-5"> <h1 class="text-primary fw-semibold
text-uppercase fs-5 mb-3">Welcome to our website</h1> <h2 class="display-6
fw-medium mb-4"> Discover <span class="underline-3
primary">amazing</span> content and connect with our community. </h2>
<button class="btn btn-lg btn-primary">Join Us<i
class="ri-arrow-right-line ms-2"></i></button> </div>
</section>
Example 4
Explore possibilities
Discover amazing content and connect with our community.
- Top-notch security
- 24/7 support
- Regular updates
- Multi-language
<section class="bg-body py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<figure class="img-scale rounded-4 mb-0">
<img
src="https://placehold.co/540x540/EEE/31343C?text=Placeholder+Image"
class="img-fluid"
alt="Hero Image"
/>
</figure>
</div>
<div class="col-lg-6 mt-4 mt-lg-0">
<h1 class="display-5 fw-semibold">Explore possibilities</h1>
<p class="lead">Discover amazing content and connect with our community.</p>
<div class="row mb-3">
<div class="col-md-6">
<ul class="list-unstyled mb-2">
<li class="mb-2"><i class="ri-check-fill text-success me-1"></i>Top-notch security</li>
<li><i class="ri-check-fill text-success me-1"></i>24/7 support</li>
</ul>
</div>
<div class="col-md-6">
<ul class="list-unstyled mb-2">
<li class="mb-2"><i class="ri-check-fill text-success me-1"></i>Regular updates</li>
<li><i class="ri-check-fill text-success me-1"></i>Multi-language</li>
</ul>
</div>
</div>
<div class="d-flex gap-2">
<button class="btn btn-lg btn-primary text-nowrap">Join Us<i class="ri-arrow-right-line ms-2"></i></button>
<button class="btn btn-lg btn-outline-secondary text-nowrap">Learn More</button>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row align-items-center"> <div class="col-lg-6"> <figure
class="img-scale rounded-4 mb-0"> <img
src="https://placehold.co/540x540/EEE/31343C?text=Placeholder+Image"
class="img-fluid" alt="Hero Image" /> </figure> </div>
<div class="col-lg-6 mt-4 mt-lg-0"> <h1 class="display-5
fw-semibold">Explore possibilities</h1> <p class="lead">Discover
amazing content and connect with our community.</p> <div class="row mb-3">
<div class="col-md-6"> <ul class="list-unstyled mb-2"> <li
class="mb-2"><i class="ri-check-fill text-success
me-1"></i>Top-notch security</li> <li><i class="ri-check-fill
text-success me-1"></i>24/7 support</li> </ul> </div> <div
class="col-md-6"> <ul class="list-unstyled mb-2"> <li
class="mb-2"><i class="ri-check-fill text-success
me-1"></i>Regular updates</li> <li><i class="ri-check-fill
text-success me-1"></i>Multi-language</li> </ul> </div>
</div> <div class="d-flex gap-2"> <button class="btn btn-lg
btn-primary text-nowrap">Join Us<i class="ri-arrow-right-line
ms-2"></i></button> <button class="btn btn-lg btn-outline-secondary
text-nowrap">Learn More</button> </div> </div> </div>
</div> </section>
Example 5
Explore possibilities
Stay updated with the latest trends, share your thoughts, and collaborate on exciting projects. Join us and unlock a world of opportunities for learning, networking, and growth!
<section class="bg-body py-5">
<div class="text-md-center border-bottom">
<div class="col-md-10 col-lg-8 mx-auto">
<h1 class="display-5 fw-semibold">Explore possibilities</h1>
<p class="lead mb-4">Stay updated with the latest trends, share your thoughts, and collaborate on exciting projects. Join us and unlock a world of opportunities for learning, networking, and growth!</p>
<div class="d-flex justify-content-md-center gap-2 mb-5">
<button class="btn btn-lg btn-primary text-nowrap">Join Us<i class="ri-arrow-right-line ms-2"></i></button>
<button class="btn btn-lg btn-outline-secondary text-nowrap">Learn More</button>
</div>
</div>
<div class="overflow-hidden" style="max-height: 30vh;">
<img src="https://placehold.co/700x500/EEE/31343C?text=Placeholder+Image" class="img-fluid rounded-4 shadow-xl" width="700" height="500" style="margin-bottom: -16px;" alt="Hero Image" loading="lazy">
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="text-md-center
border-bottom"> <div class="col-md-10 col-lg-8 mx-auto"> <h1
class="display-5 fw-semibold">Explore possibilities</h1> <p
class="lead mb-4">Stay updated with the latest trends, share your thoughts, and
collaborate on exciting projects. Join us and unlock a world of opportunities for learning,
networking, and growth!</p> <div class="d-flex justify-content-md-center gap-2
mb-5"> <button class="btn btn-lg btn-primary text-nowrap">Join Us<i
class="ri-arrow-right-line ms-2"></i></button> <button
class="btn btn-lg btn-outline-secondary text-nowrap">Learn More</button>
</div> </div> <div class="overflow-hidden" style="max-height:
30vh;"> <img
src="https://placehold.co/700x500/EEE/31343C?text=Placeholder+Image"
class="img-fluid rounded-4 shadow-xl" width="700" height="500"
style="margin-bottom: -16px;" alt="Hero Image" loading="lazy">
</div> </div> </section>
ESC