Hero With Featured Insight
About Us
Corporate Social Responsibility,
Diversity & Inclusivity
Field
Field Type
Field Name
Instructions
Block Data
tab
Overline
text
overline
Heading Type
select
heading_type
Heading Text
textarea
heading_text
Use <strong></strong> to make words in bold.
Background Image
image
background_img
Featured Item
relationship
featured_insight
Select featured insight or case study to display on this block.
Height
button_group
height
Select height of header. If you select small than hero height will be small and featured insight will not display meta data.
Block Meta
tab
ID
text
block_id
Block Classes
text
block_classes
Margin Top
select
margin_top
Margin Bottom
select
margin_bottom
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-hero-with-featured-insight {
position: relative;
background: $grey-primary;
min-height: rem-calc(440);
text-align: center;
margin-bottom: rem-calc(42);
display: flex;
align-items: center;
@include bp($md){
min-height: rem-calc(798);
margin-bottom: 0;
}
&.hero-height-small{
@include bp($md){
min-height: rem-calc(640);
}
}
&__wrapper {
padding: rem-calc(40 0 40 0);
position: relative;
z-index: 5;
letter-spacing: 0.05em;
@include bp($md){
padding: 4rem 0;
}
.overline{
margin-bottom: rem-calc(16);
}
.heading {
align-items: center;
font-size: rem-calc(32);
line-height: rem-calc(40);
margin-bottom: 0;
align-items: center;
@include bp($md){
font-size: rem-calc(64);
line-height: rem-calc(72);
}
}
}
&__image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
&__feature{
width: calc(100% - 32px);
background-color: $white;
border-top-left-radius: rem-calc(24);
border-top-right-radius: rem-calc(24);
margin: 0 auto;
z-index: 10;
padding: rem-calc(24);
text-align: left;
position: absolute;
left: 0;
right: 0;
bottom: -71px;
height: rem-calc(153);
@include bp($md){
padding:rem-calc(21 0 21 48);
position: absolute;
width: 50%;
border-top-left-radius: rem-calc(40);
border-top-right-radius: 0;
bottom: 0;
right: 0;
margin: 0 0 0 auto;
height: rem-calc(150);
}
@include bp($lg){
width: 40%;
}
&::before{
@include bp($md){
content: "";
position: absolute;
width: rem-calc(40);
height: rem-calc(40);
left: -40px;
bottom: 0;
background-color: transparent;
background-image: url("data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAmCAYAAAC29NkdAAABC0lEQVRYhe3Y2w2CQBCF4dEK6EA7kA60AynBEuzAVujAEijFEizhN5OMCSrITdjz4En2AZ4+ZmbJgikH2K6lhWbZHzgx8i3O1YE7AUN7gLuqzXE5gHKLcwFDe4DKK6iKy4iotrgQMLTn2V7JFvsBgVoESK8BSlnge/UUgaUssKl6asCP6skAgVMTTgIYrb0pA69tuORA4PINlxQIFF24ZMCYu7sksGtTJAUOxS0KjG+MQbjFgLEhes3c4sA+r5IkwJi3qodheSBwHtvSWYHA4RdV+zkw2tl4XEoKnKNi71mNQGVmdjKzo5kdJj1hj3QCA+T/SfYBmh1Vz8rnJ244xJdf+9oELN1PHDN7ALL0MQwBMR/xAAAAAElFTkSuQmCC");
background-repeat: no-repeat;
background-position: right bottom;
}
}
&_row{
width: 100%;
text-decoration: none;
@include bp($md){
max-width: rem-calc(440);
}
&:hover{
.feature-heading{
color: $orange;
}
}
}
&_cta{
width: 64px;
}
.overline{
color:$secondary;
letter-spacing: 0.2em;
margin-bottom: rem-calc(8);
@include bp($md){
margin-bottom: rem-calc(12);
}
}
.feature-heading{
margin-bottom: rem-calc(8);
font-weight: 400;
font-size: rem-calc(16);
line-height: rem-calc(20);
color: $black;
text-decoration: none;
@include bp($sm){
padding-right: rem-calc(16px);
}
@include bp($md){
font-size: rem-calc(20);
line-height: rem-calc(24);
margin-bottom: rem-calc(12);
}
}
.post-meta{
font-weight: 400;
font-size: rem-calc(14);
line-height: rem-calc(16);
letter-spacing: 0.05em;
color: $primary;
@include bp($md){
font-size: rem-calc(16);
}
.read-time{
position: relative;
padding-left: rem-calc(28);
&::before{
content: "";
position: absolute;
width: rem-calc(16);
height: rem-calc(16);
left: 0;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0C3.58065 0 0 3.58065 0 8C0 12.4194 3.58065 16 8 16C12.4194 16 16 12.4194 16 8C16 3.58065 12.4194 0 8 0ZM14.9677 8C14.9677 11.8387 11.8387 14.9677 8 14.9677C4.16129 14.9677 1.03226 11.871 1.03226 8C1.03226 4.19355 4.12903 1.03226 8 1.03226C11.8065 1.03226 14.9677 4.16129 14.9677 8ZM10.1613 10.871C10.3226 11 10.5806 10.9355 10.6774 10.7742L10.9677 10.4194C11.0968 10.2258 11.0323 10 10.871 9.87097L8.6129 8.22581V3.48387C8.6129 3.29032 8.41935 3.09677 8.22581 3.09677H7.77419C7.54839 3.09677 7.3871 3.29032 7.3871 3.48387V8.64516C7.3871 8.77419 7.41935 8.87097 7.51613 8.96774L10.1613 10.871Z' fill='black'/%3E%3C/svg%3E%0A");
}
}
}
}
.btn {
padding: rem-calc(15 15 15 15);
color: $white;
font-size: rem-calc(14);
line-height: rem-calc(17);
letter-spacing: 0.15em;
width: 100%;
@include bp($md){
width: auto;
margin-right: 0.5rem;
margin-left: 0.5rem;
padding: rem-calc(20 48 20 48);
font-size: rem-calc(18);
line-height: rem-calc(22);
}
}
.block-home-hero__wrapper {
max-width: 1254px;
margin: 0 auto;
}
&.has-img {
&:after {
content: "";
z-index: 2;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: rem-calc(375);
background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,1) 0.09%, rgba(0,0,0,0) 99.75%);
}
&:before {
content: "";
z-index: 2;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0,0,0);
background: linear-gradient(90.1deg, #000000 0.09%, rgba(0, 0, 0, 0) 99.75%);
}
h1,
h2,
h3,
h4,
p,
ol,
ul {
color: #fff;
}
}
}
There are is no JavaScript file with this component.
Page Title
Page Type
Page URL
There are is no readme file with this component.