Content Text And Image Variations
Our Privacy Policy
Our Privacy Policy is an essential document that servers as a cornerstone of trust in today’s digital world. At a time where personal information is constantly shared and collected, this legal agreement plays a crucial role in safeguarding your data and ensuring transparency between us (the British Esports Federation) and our stakeholders, partners, customers and community.
The policy outlines how we collect, use, share and protect your personal information. It serves as a written commitment to your privacy and security, establishing guidelines for responsible data handling.
There are no ACF fields assigned to this component.
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-text-image-variations {
overflow: hidden;
&.image-text {
.row {
@include bp(1400px, true) {
align-items: flex-start;
}
@include bp($md) {
flex-direction: row-reverse;
justify-content: flex-end;
}
.heading-offset {
@include bp($md) {
transform: translate3d( #{rfs-fluid-value( rem-calc(-84 ) ) },0,0);
}
}
}
}
&.text-image {
.heading-offset {
@include bp($lg) {
transform: translate3d( #{rfs-fluid-value( rem-calc(-84 ) ) },0,0);
}
}
}
.heading,
.content-container {
color: var( --text-color );
}
.heading {
@include margin-bottom( rem-calc(48) );
@include fluid-type(32, 90);
}
.btn.btn--underline {
line-height: 1.8;
padding-bottom: rem-calc(3);
}
.text-col {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.image-col {
position: relative;
@include margin-top( rem-calc(64) );
@include bp($md) {
margin-top: 0;
}
> picture {
@include bp($lg) {
height: 100%;
}
img {
height: 100%;
object-fit: cover;
}
}
&.cards {
display: flex;
flex-direction: column;
align-items: center;
picture {
display: none;
@include bp(1400px) {
display: flex;
}
}
.post-card {
background: $white;
max-width: rem-calc(447);
@include bp(1400px) {
position: absolute;
}
&:first-of-type {
@include bp(1400px) {
top: rfs-fluid-value( rem-calc(0) );
left: rfs-fluid-value( rem-calc(0) );
}
@include bp(1400px) {
top: rfs-fluid-value( rem-calc(24) );
left: rfs-fluid-value( rem-calc(-48) );
}
}
&:last-of-type:not(:first-of-type) {
@include margin-top( rem-calc(24) );
@include bp(1400px) {
margin-top: 0;
bottom: rfs-fluid-value( rem-calc(0) );
right: rfs-fluid-value( rem-calc(0) );
}
@include bp(1400px) {
bottom: rfs-fluid-value( rem-calc(-24) );
right: rfs-fluid-value( rem-calc(32) );
}
}
}
}
}
&__logo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
background-color: $white;
@include padding( rem-calc(8 12) );
picture {
display: flex;
flex-direction: column;
}
&--0 {
width: rfs-fluid-value(rem-calc(276));
aspect-ratio: 276/166;
top: rem-calc(16);
left: rem-calc(32);
@include bp($md) {
top: rem-calc(-24);
left: rem-calc(-12);
}
@include bp($lg) {
top: rem-calc(-24);
left: rem-calc(-24);
}
}
&--1 {
width: rfs-fluid-value(rem-calc(204));
aspect-ratio: 204/140;
top: rem-calc(16);
right: rem-calc(-8);
@include bp($md) {
top: rem-calc(32);
right: 0;
}
@include bp($lg) {
top: rem-calc(90);
right: rem-calc(-24);
}
}
&--2 {
width: rfs-fluid-value(rem-calc(262));
aspect-ratio: 1/1;
bottom: rem-calc(-16);
left: rem-calc(32);
@include bp($md) {
bottom: rem-calc(-32);
left: rem-calc(32);
}
@include bp($lg) {
bottom: rem-calc(-32);
left: 5%;
}
}
&--3 {
width: rfs-fluid-value(rem-calc(198));
aspect-ratio: 198/114;
bottom: rem-calc(32);
right: rem-calc(48);
@include bp($md) {
bottom: rem-calc(24);
right: rem-calc(0);
}
@include bp($lg) {
bottom: rem-calc(32);
left: 50%;
right: auto;
}
}
}
&__stat {
--text-color: #{$primary};
&.theme--dark {
--text-color: #{$white};
}
max-width: rem-calc(180);
display: flex;
flex-direction: column;
@include padding( rem-calc(16 42 42) );
position: absolute;
@include bp($md) {
max-width: rem-calc(200);
}
@include bp($lg) {
max-width: rem-calc(230);
}
&:first-of-type {
top: rem-calc(16);
left: rem-calc(-4);
@include bp($md) {
top: rem-calc(-24);
left: rem-calc(32);
}
.image-text & {
right: rem-calc(-4);
left: auto;
@include bp($md) {
top: rem-calc(32);
right: rem-calc(-32);
}
}
}
&:last-of-type:not(:first-of-type) {
right: rem-calc(-16);
bottom: rem-calc(-32);
.image-text & {
right: auto;
left: rem-calc(40);
}
}
.stat,
.text {
color: var( --text-color );
line-height: 1.2;
}
.stat {
@include fluid-type(32, 100);
font-weight: 700;
}
.text {
@include fluid-type(14, 16);
text-transform: uppercase;
font-weight: 800;
opacity: 0.5;
}
}
}
There are is no JavaScript file with this component.
Page Title
Page Type
Page URL
- Option to determine what content to show over the top of images (stats, logos, news)
- Option based on content over image to pick layout for boxes
- Stats & logos are a CPT to be pulled from
- Option to determine size of title
- Option if only two words to offset the first word from the content column
- Option to offset all title from the content column
Animation: