Hero
Definition
The hero section is a module design for the title of a page along with the most important information regarding content on that page.
Description
Currently the hero section has a title, labels/badges, a stat container, a body paragraph for description/abstract/summary, etc. and an action bar for CTAs and buttons.
Any of these can be removed if not needed (other than the title, which will always be a minimum requirement for the hero section.
In the mobile view, everything will stack up one below the other, and the buttons will take up the entire width of the mobile viewport for better click access.
Examples
Heading for anything goes here. Can be a dataset title, name of the user, etc. that spans across entire width.
All kinds of happy little splashes. I guess that would be considered a UFO. A big cotton ball in the sky. That's the way I look when I get home late; black and blue. Fluff that up. Use what happens naturally, don't fight it. Just pretend you are a whisper floating across a mountain. Every single thing in the world has its own personality - and it is up to you to make friends with the little rascals.
When you do it your way you can go anywhere you choose. Go out on a limb - that's where the fruit is. This is a happy place, little squirrels live here and play. When you do it your way you can go anywhere you choose. Go out on a limb - that's where the fruit is. This is a happy place, little squirrels live here and play.
<div class="hero">
<div class="hero-main">
<div class="container">
<div class="hero-title">
<h1>
Heading for anything goes here. Can be a dataset title, name of the
user, etc. that spans across entire width.
</h1>
<div class="badge rounded-pill text-bg-success">some label</div>
</div>
<div class="hero-body row">
<div class="col-md-8">
<p>
All kinds of happy little splashes. I guess that would be considered
a UFO. A big cotton ball in the sky. That's the way I look when I
get home late; black and blue. Fluff that up. Use what happens
naturally, don't fight it. Just pretend you are a whisper floating
across a mountain. Every single thing in the world has its own
personality - and it is up to you to make friends with the little
rascals.
</p>
<p>
When you do it your way you can go anywhere you choose. Go out on a
limb - that's where the fruit is. This is a happy place, little
squirrels live here and play. When you do it your way you can go
anywhere you choose. Go out on a limb - that's where the fruit is.
This is a happy place, little squirrels live here and play.
</p>
</div>
<div class="col-md-4">
<div class="d-flex flex-column align-items-center">
<div class="display-1">10</div>
<div class="h1">Some stat title goes here</div>
</div>
</div>
</div>
</div>
</div>
<div class="hero-actions">
<div class="container">
<div class="actions-panel">
<button class="btn btn-primary">Button</button>
<button class="btn btn-outline-primary">Button</button>
</div>
</div>
</div>
</div>Full Width Variation
The full width hero variation keeps the two columns of content stuck to the left and right sides (respectivly) of the container when the user uses a very wide (3000px and above) monitor. Though there are similarites between the main/centered hero please check the code for to see the differences.
Some differences to notice are that the title no longer spans the full width of the hero container and is now within a column over the left side content.
Full Width Heading for anything goes here. Can be a dataset title, name of the user, etc. that spans across entire width.
All kinds of happy little splashes. I guess that would be considered a UFO. A big cotton ball in the sky. That's the way I look when I get home late; black and blue. Fluff that up. Use what happens naturally, don't fight it. Just pretend you are a whisper floating across a mountain. Every single thing in the world has its own personality - and it is up to you to make friends with the little rascals.
When you do it your way you can go anywhere you choose. Go out on a limb - that's where the fruit is. This is a happy place, little squirrels live here and play. When you do it your way you can go anywhere you choose. Go out on a limb - that's where the fruit is. This is a happy place, little squirrels live here and play.
<div class="hero hero-full-width">
<div class="hero-main">
<div class="row">
<div class="col-xl-8 col-xxl-7">
<div class="hero-title">
<h1>
Full Width Heading for anything goes here. Can be a dataset title,
name of the user, etc. that spans across entire width.
</h1>
<div class="badge rounded-pill text-bg-success">some label</div>
</div>
<div class="hero-body">
<p>
All kinds of happy little splashes. I guess that would be considered
a UFO. A big cotton ball in the sky. That's the way I look when I
get home late; black and blue. Fluff that up. Use what happens
naturally, don't fight it. Just pretend you are a whisper floating
across a mountain. Every single thing in the world has its own
personality - and it is up to you to make friends with the little
rascals.
</p>
<p>
When you do it your way you can go anywhere you choose. Go out on a
limb - that's where the fruit is. This is a happy place, little
squirrels live here and play. When you do it your way you can go
anywhere you choose. Go out on a limb - that's where the fruit is.
This is a happy place, little squirrels live here and play.
</p>
</div>
</div>
<div class="col col-xl-4 col-xxl-2 ms-xxl-auto hero-side-bar well well-3">
<div class="stack stack-5">
<div class="d-flex flex-column align-items-center">
<div class="display-2">75</div>
<div class="h4">Downloads</div>
<a href="#">Usage reports</a>
</div>
<div class="d-flex flex-column align-items-center">
<div class="display-2">240</div>
<div class="h4">Citations</div>
<a href="#">Related publications</a>
</div>
<div class="d-flex flex-column align-items-center gr-2">
<p class="mb-0">Supported by:</p>
<img
class="hero-sidebar-img"
src="http://staging.icpsr.umich.edu/files/NACJD/images/nacjd_logo_rgb.png"
alt="national archive of criminal justice data" />
<a href="#">More information</a>
</div>
</div>
</div>
</div>
</div>
<div class="hero-actions">
<div class="actions-panel">
<button class="btn btn-primary">Button</button>
<button class="btn btn-outline-primary">Button</button>
</div>
</div>
</div>Variation with more than 3 buttons
Heading for anything goes here. Can be a dataset title, name of the user, etc. that spans across entire width.
All kinds of happy little splashes. I guess that would be considered a UFO. A big cotton ball in the sky. That's the way I look when I get home late; black and blue. Fluff that up. Use what happens naturally, don't fight it. Just pretend you are a whisper floating across a mountain. Every single thing in the world has its own personality - and it is up to you to make friends with the little rascals.
When you do it your way you can go anywhere you choose. Go out on a limb - that's where the fruit is. This is a happy place, little squirrels live here and play. When you do it your way you can go anywhere you choose. Go out on a limb - that's where the fruit is. This is a happy place, little squirrels live here and play.
<div class="hero">
<div class="hero-main">
<div class="container">
<div class="hero-title">
<h1>
Heading for anything goes here. Can be a dataset title, name of the
user, etc. that spans across entire width.
</h1>
<div class="badge rounded-pill text-bg-success">some label</div>
</div>
<div class="hero-body row">
<div class="col-md-8">
<p>
All kinds of happy little splashes. I guess that would be considered
a UFO. A big cotton ball in the sky. That's the way I look when I
get home late; black and blue. Fluff that up. Use what happens
naturally, don't fight it. Just pretend you are a whisper floating
across a mountain. Every single thing in the world has its own
personality - and it is up to you to make friends with the little
rascals.
</p>
<p>
When you do it your way you can go anywhere you choose. Go out on a
limb - that's where the fruit is. This is a happy place, little
squirrels live here and play. When you do it your way you can go
anywhere you choose. Go out on a limb - that's where the fruit is.
This is a happy place, little squirrels live here and play.
</p>
</div>
<div class="col-md-4">
<div class="d-flex flex-column align-items-center">
<div class="display-1">10</div>
<div class="h1">Some stat title goes here</div>
</div>
</div>
</div>
</div>
</div>
<div class="hero-actions">
<div class="container">
<div class="actions-panel">
<button class="btn btn-primary">Button</button>
<button class="btn btn-outline-primary">Button</button>
<form action="">
<div class="dropdown">
<button
class="btn btn-outline-primary d-flex gr-2"
id="dropdownMenuButton1"
data-bs-toggle="dropdown"
type="button"
aria-expanded="false">
<span>More actions</span>
<i class="fa-solid fa-chevron-down ms-2"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>Simple variation with only title and label
Heading for anything goes here. Can be a dataset title, name of the user, etc. that spans across entire width.
<div class="hero">
<div class="hero-main">
<div class="container">
<div class="hero-title">
<h1>
Heading for anything goes here. Can be a dataset title, name of the
user, etc. that spans across entire width.
</h1>
<div class="badge rounded-pill text-bg-success">some label</div>
</div>
</div>
</div>
</div>Hero Section with Search
Find data for your study that no one found because you didn't provide any metadata
DSDR helps researchers discover data for secondary analysis. DSDR focuses on data that are valid for population inference.
Search tips
- Our Data search includes study homepages, descriptions, variables, and more.
- Search is not case-sensitive.
- Stemming is automatic; no asterisk is needed (e.g., "national" and "nationally").
- Multiple terms provide focused results.
- Use quotes for exact phrases and minus for exclusions.
- Sort and filter results on the Search Results page.
<div class="hero">
<div class="hero-main">
<div class="container stack stack-3">
<div class="hero-title">
<h1>
Find data for your study that no one found because you didn't provide
any metadata
</h1>
</div>
<div class="row">
<div class="col-md-7 stack stack-3">
<div>
<p>
DSDR helps researchers discover data for secondary analysis. DSDR
focuses on data that are valid for population inference.
</p>
</div>
<search class="search-input input-group" role="search">
<input
class="form-control border-primary"
type="text"
aria-label="Enter search terms here"
aria-describedby="search-button"
placeholder="Enter search terms here" />
<button class="btn btn-primary" id="search-button" type="submit">
<i class="fas fa-search"></i>
<span class="visually-hidden">Search</span>
</button>
</search>
<div>
<h2 id="search-tips">Search tips</h2>
<ul>
<li>
Our Data search includes study homepages, descriptions,
variables, and more.
</li>
<li>Search is not case-sensitive.</li>
<li>
Stemming is automatic; no asterisk is needed (e.g., "national"
and "nationally").
</li>
<li>Multiple terms provide focused results.</li>
<li>Use quotes for exact phrases and minus for exclusions.</li>
<li>Sort and filter results on the Search Results page.</li>
</ul>
</div>
</div>
<div class="col-md-5">
<img
class="img-fluid"
src="https://placehold.co/600x400"
alt="Hero placeholder" />
</div>
</div>
</div>
</div>
<div class="hero-actions">
<div class="container">
<div class="actions-panel align-items-md-center">
<a class="btn btn-primary" href="#">Share Data</a>
<a class="btn btn-primary" href="#">Deposit Data</a>
<a class="" href="#">Frequently Asked Questions</a>
</div>
</div>
</div>
</div>Hero Section - Default Template Variation
Find data for your study that no one found because you didn't provide any metadata
DSDR helps researchers discover data for secondary analysis. DSDR focuses on data that are valid for population inference.
- Our Data search includes study homepages, descriptions, variables, and more.
- Search is not case-sensitive.
- Stemming is automatic; no asterisk is needed (e.g., "national" and "nationally").
- Multiple terms provide focused results.
- Use quotes for exact phrases and minus for exclusions.
- Sort and filter results on the Search Results page.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est labore magnam incidunt blanditiis minima tempore totam quidem amet quod quasi omnis, doloribus aspernatur molestias nulla beatae dolores animi natus, saepe, quibusdam reprehenderit iure. Asperiores facere suscipit nihil vero blanditiis mollitia, nobis sed numquam. Eligendi eos alias dolores soluta recusandae, impedit dolor..
<div class="hero">
<div class="hero-main">
<div class="container stack stack-3">
<div class="hero-title">
<h1>
Find data for your study that no one found because you didn't provide
any metadata
</h1>
</div>
<div class="row">
<div class="col-md-7 stack stack-3">
<p>
DSDR helps researchers discover data for secondary analysis. DSDR
focuses on data that are valid for population inference.
</p>
<ul>
<li>
Our Data search includes study homepages, descriptions, variables,
and more.
</li>
<li>Search is not case-sensitive.</li>
<li>
Stemming is automatic; no asterisk is needed (e.g., "national" and
"nationally").
</li>
<li>Multiple terms provide focused results.</li>
<li>Use quotes for exact phrases and minus for exclusions.</li>
<li>Sort and filter results on the Search Results page.</li>
</ul>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est labore
magnam incidunt blanditiis minima tempore totam quidem amet quod
quasi omnis, doloribus aspernatur molestias nulla beatae dolores
animi natus, saepe, quibusdam reprehenderit iure. Asperiores facere
suscipit nihil vero blanditiis mollitia, nobis sed numquam. Eligendi
eos alias dolores soluta recusandae, impedit dolor..
</p>
</div>
<div class="col-md-5">
<img
class="img-fluid"
src="https://placehold.co/600x400"
alt="Hero placeholder" />
</div>
</div>
</div>
</div>
<div class="hero-actions">
<div class="container">
<div class="actions-panel align-items-md-center">
<a class="btn btn-primary" href="#">Share Data</a>
<a class="btn btn-primary" href="#">Deposit Data</a>
<a class="" href="#">Frequently Asked Questions</a>
</div>
</div>
</div>
</div>Hero Section - Centered Gradient Background
Data excellence. Research impact.
- Aging
- Mental health
- Voting
- Crime
- Substance use
- Racism
- STEM
- Health
- Immigtraion
- Child care
- Spending
- Discrimination
- Nutrition
- & more
I’m interested in…
<div class="hero hero-gradient">
<div class="hero-main">
<div class="container">
<div class="hero-title">
<h1>Data excellence. Research impact.</h1>
</div>
<div class="hero-body">
<div class="row">
<div class="col-md-8 offset-md-2">
<search class="search-input input-group" role="search">
<input
type="text"
placeholder="Find data, studies, variables, related publications and webpages"
class="form-control border-primary"
aria-label="Find data, studies, variables, related publications and webpages"
aria-describedby="button-addon2"
/>
<button type="submit" class="btn btn-primary" id="button-addon2"
><i class="fas fa-search"></i><span class="visually-hidden"
>Search</span
></button
>
</search>
</div>
</div>
<div class="row d-none d-md-flex">
<div class="col-md-10 offset-md-1">
<ul>
<li>Aging</li>
<li>Mental health</li>
<li>Voting</li>
<li>Crime</li>
<li>Substance use</li>
<li>Racism</li>
<li>STEM</li>
<li>Health</li>
<li>Immigtraion</li>
<li>Child care</li>
<li>Spending</li>
<li>Discrimination</li>
<li>Nutrition</li>
<li>& more</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="hero-actions">
<div class="container">
<div class="actions-panel">
<h2>I’m interested in…</h2>
<button class="btn btn-outline-primary">Depositing Data</button>
<button class="btn btn-outline-primary">Summer Program</button>
<button class="btn btn-outline-primary">Membership</button>
</div>
</div>
</div>
</div>
Variables and Development
Not a standard Bootstrap component, and no new SASS variables or CSS custom properties created.