Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
E
embl-jobs-pages
Manage
Activity
Members
Labels
Plan
Issues
5
Issue boards
Milestones
Iterations
Wiki
Requirements
Code
Merge requests
1
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Locked files
Build
Pipelines
Jobs
Pipeline schedules
Test cases
Artifacts
Deploy
Releases
Package Registry
Container Registry
Operate
Environments
Terraform modules
Monitor
Incidents
Service Desk
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Code review analytics
Issue analytics
Insights
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
This is an archived project. Repository and other project resources are read-only.
Show more breadcrumbs
embl.org
html-sites
embl-jobs-pages
Merge requests
!49
implemented new hero section
Code
Review changes
Check out branch
Download
Patches
Plain diff
Merged
implemented new hero section
feature/hero-section
into
master
Overview
0
Commits
1
Pipelines
1
Changes
5
Merged
Nitin Jadhav
requested to merge
feature/hero-section
into
master
3 years ago
Overview
0
Commits
1
Pipelines
1
Changes
5
Expand
0
0
Merge request reports
Viewing commit
6a1388d5
Show latest version
5 files
+
107
−
17
Inline
Compare changes
Side-by-side
Inline
Show whitespace changes
Show one file at a time
Files
5
Search (e.g. *.vue) (Ctrl+P)
6a1388d5
implemented new hero section
· 6a1388d5
Nitin Jadhav
authored
3 years ago
src/component-templates/VFHero.jsx
0 → 100644
+
29
−
0
Options
import
React
from
"
react
"
;
export
default
function
VFHero
({
spacing
=
800
,
heading
=
""
,
subheading
=
""
,
link_text
=
""
,
link_href
=
"
JavaScript:Void(0);
"
,
image_url
=
""
,
image_size
=
"
auto 28.5rem
"
,
})
{
return
(
<
section
className
=
{
`vf-hero vf-hero--
${
spacing
}
| vf-u-fullbleed`
}
style
=
{
{
"
--vf-hero--bg-image
"
:
`url(
${
image_url
}
)`
,
"
--vf-hero--bg-image-size
"
:
image_size
,
}
}
>
<
div
className
=
"vf-hero__content | vf-box | vf-stack vf-stack--400"
>
<
h2
className
=
"vf-hero__heading"
>
{
heading
}
</
h2
>
<
p
className
=
"vf-hero__subheading"
>
{
subheading
}
</
p
>
<
a
className
=
"vf-hero__link"
href
=
{
link_href
}
>
{
link_text
}
</
a
>
</
div
>
</
section
>
);
}