Vertical Content Carousel

we’re good for periods...

from a kitchen table start up, to a multi-award-winning enterprise…

Our products, services and passionate team have won more awards than any other social enterprise, recognised globally as the sustainable social enterprise to look out for. As a community interest company, we aren’t influenced by fat-cat shareholders and put people and purpose above profit.

we lobby for period equality across the UK…

Our no-nonsense approach to improving period equality for everyone saw us play a key role in changing laws in Scotland and England, becoming the first social enterprise to receive recognition at COP26 and donate an incredible 42 million products to people in need so far. We believe that access to period products and education is a right, not a privilege. This is why we will always provide training and learning resources for free.

we supply a majority of Scottish local authorities, alongside big businesses, several colleges and universities…

Working with almost 80 councils and multiple business customers like Heathrow Airport, Network Rail, Anglian Water and the NHS, we’ve been able to champion equality for workplaces and communities, breaking down barriers for staff and aiding compliance with environmental sustainability goals for huge organisations that want to improve period dignity.

Long lasting relationships with service industry giants Lyreco, Mitie and CBRE to name just a few, proves that social enterprise suppliers can keep up with the competition, deliver social impact and even do it better!

Fields
PHP
SCSS
JavaScript
Pages
Notes

Field

Field Type

Field Name

Instructions

Title

text

title

Title Alignment

select

title_alignment

Background Image

image

background_image

Foreground Image

image

foreground_image

Slides

repeater

slides

-- Title

text

title

-- Content

wysiwyg

content

-- Button

link

button

-- Show Download Icon

true_false

download

Remove Background?

true_false

remove_bg

Hide Arrow?

true_false

hide_arrow

Will hide the bobbing down arrow.

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/mixins/breakpoints";

@keyframes bob {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-0.5rem);
	}
	100% {
		transform: translatey(0px);
	}
}

.vertical-content-carousel-wrap {
    position: relative;
    padding-top: 5rem;
    background: var(--lighter-colour);

    header {
        margin-bottom: 4.25rem;
    }
    &.no-bg {
        background: none;

        .vertical-content-wrap {
            &:before {
                bottom: 0;
                height: 10rem;
                background-image: linear-gradient(to bottom, rgba(254, 242, 247, 0), $white);
        
                @include media-breakpoint-down(xs) {
                    height: 4rem;
                }
            }
            &:after {
                top: 0;
                height: 2rem;
                background-image: linear-gradient(to top, rgba(254, 242, 247, 0), $white);
            }
        }
    }
    .right-title {
        margin-bottom: 0;

        h2 {
            text-align: right;
            max-width: 30rem;
            margin-bottom: 3rem;
            position: relative;
            z-index: 5;
            padding-right: 1rem;
            float: right;

            @include media-breakpoint-down(sm) {
                float: none;
                margin-bottom: 2rem;
                padding: 0;
                max-width: none;
                text-align: center;
            }
        }
    }
}

.vertical-slide-images {
    padding-right: 15rem;
    position: relative;

    @include media-breakpoint-down(lg) {
        padding-right: 12rem;
    }
    @include media-breakpoint-down(sm) {
        padding-right: 8rem;
        margin-bottom: 3rem;
    }
    .foreground-image {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%) translateX(-1rem);
        width: 22.5rem;
        height: 22.5rem;
        transition: all 0.7s ease-in-out;
        transition-delay: 0.3s;

        @include media-breakpoint-down(lg) {
            width: 16rem;
            height: 16rem;
        }
        @include media-breakpoint-down(sm) {
            width: 12rem;
            height: 12rem;
        }
    }
}

.vertical-slide-content {
    margin-bottom: 6rem;

    @include media-breakpoint-down(xs) {
        margin-bottom: 2rem;
    }
    &:first-child {
        margin-top: 1rem;
    }
    &:last-child {
        margin-bottom: 10rem;

        @include media-breakpoint-down(xs) {
            margin-bottom: 4rem;
        }
    }
}

.vertical-content-wrap {
    position: relative;

    &:before,
    &:after {
        content: "";
        position: absolute;
		transition: opacity 0.8s ease-in-out;
        z-index: 1;
        left: 0;
        width: 100%;
    }
    &:before {
        bottom: 0;
        height: 10rem;
        background-image: linear-gradient(to bottom, rgba(254, 242, 247, 0), var(--lighter-colour));

        @include media-breakpoint-down(xs) {
            height: 4rem;
        }
    }
    &:after {
        top: 0;
        height: 2rem;
        background-image: linear-gradient(to top, rgba(254, 242, 247, 0), var(--lighter-colour));
    }
    .scroll {
        animation: bob 3s ease-in-out infinite;
        position: absolute;
        bottom: 1rem;
        right: 3rem;
        z-index: 5;
    }
}

.vertical-content-carousel-content {
    max-height: 55rem;
    overflow: auto;
    padding-left: 1rem;
    padding-right: 2rem;
    -ms-overflow-style: none;
    scrollbar-width: none;

    @include media-breakpoint-down(lg) {
        max-height: 38rem;
    }
    @include media-breakpoint-down(xs) {
        max-height: 30rem;
        padding-left: 0;
    }
    &::-webkit-scrollbar {
        width: 2px;
    }
    &::-webkit-scrollbar-track {
        background: #979797;
    }
    &::-webkit-scrollbar-thumb {
        background: $red;
        width: 2px;
    }
}

There are is no JavaScript file with this component.

Page Title

Page Type

Page URL

About

page

https://www.heygirls.co.uk/about/

Community Partners

page

https://www.heygirls.co.uk/community-partners/

Home

page

https://www.heygirls.co.uk/

There are is no readme file with this component.