Large Image
In terms of ongoing and varied impact, our Data Privacy activity with Calligo is one of the most efficient initiatives we have conducted to date.”
Product Manager
About
Your data strategy partner
Gaining a deep understanding of your unique business processes and requirements. Enabling greater productivity, profitability and innovation.
Get to know us
Field
Field Type
Field Name
Instructions
Block Data
tab
Overline
text
overline
Heading Type
select
heading_type
Heading Text
textarea
heading_text
Content
wysiwyg
content
Button Type
select
button_type
Button Color
select
button_color
Button Link
link
button_link
Image
image
img
Quote
textarea
quote
Quote by
image
quote_by
Upload logo of quote by.
Quote designation
text
quote_designation
Block Meta
tab
ID
text
block_id
Block Classes
text
block_classes
Block Theme
select
block_theme
Background Colors
select
background_colors
Padding Top
select
padding_top
Padding Bottom
select
padding_bottom
Margin Top
select
margin_top
Margin Bottom
select
margin_bottom
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-large-image{
position: relative;
overflow: hidden;
&__image{
width: 100%;
position: absolute;
padding-top: calc( calc( 1000/1600 ) * 100% );
overflow: hidden;
z-index: 1;
height: 100%;
top: 0;
@include bp($lg){
position: relative;
padding-top: 0;
height: 87vh;
}
}
.content-container{
position: relative;
z-index: 100;
width: 100%;
padding-top: 3em;
@include bp($lg){
position: absolute;
bottom: 0;
margin: 0 auto;
left: 0;
right: 0;
padding-top: 0;
}
}
.quote{
color: $white;
padding-bottom: rem-calc(70);
@include bp($lg){
padding-bottom: rem-calc(40);
}
@include bp($xl){
padding-bottom: rem-calc(70);
}
&-icon{
margin-bottom: rem-calc(32);
}
&-text{
font-size: rem-calc(20);
line-height: rem-calc(28);
letter-spacing: 0.05em;
margin-bottom: rem-calc(36);
@include bp($lg){
font-size: rem-calc(24);
line-height: rem-calc(32);
margin-bottom: rem-calc(40);
}
}
&_by{
margin-bottom: rem-calc(32);
img{
max-height: 37px;
}
}
&_designation{
font-size: rem-calc(20);
line-height: rem-calc(32);
letter-spacing: 0.05em;
}
}
.about-col{
position: relative;
}
.about-block{
width: 100%;
max-width: rem-calc(610);
background-color: $white;
border-top-left-radius: rem-calc(24);
border-top-right-radius: rem-calc(24);
z-index: 1;
padding: rem-calc(24);
text-align: left;
position: relative;
margin-left: auto;
margin-right: auto;
.overline{
margin-bottom: rem-calc(8);
}
.heading{
@include fluid-type(24, 32, 375, $max-container-size);
letter-spacing: 0.02em;
font-weight: 400;
margin-bottom: rem-calc(16);
}
p{
margin-bottom: rem-calc(24);
@include fluid-type(16, 18, 375, $max-container-size);
line-height: rem-calc(24);
letter-spacing: 0.05em;
color: #1E1E1E;
}
@include bp($md){
border-top-left-radius: rem-calc(40);
border-top-right-radius: rem-calc(40);
}
@include bp($lg){
margin-left: inherit;
margin-right: inherit;
position: absolute;
bottom: 0;
right: 0;
}
@include bp($xl){
padding:rem-calc(21 125 21 48);
}
&::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;
}
}
&::after{
@include bp($md){
content: "";
position: absolute;
width: rem-calc(40);
height: rem-calc(40);
right: -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;
transform: scaleX(-1);
}
}
}
}
There are is no JavaScript file with this component.
Page Title
Page Type
Page URL
There are is no readme file with this component.