Components
54
Accordion Items Basic Hero Basic Map Benefits Card Grid Career Testimonials Case Study Carousel Case Study Content Two Column Contact Form Content Centred Content Image Content Three Columns Content Two Column Content Video Cookie Table Cta Blocks Example Faqs Featured Card Featured Latest Cards Footer Banner Glossary Items Hero Insights Hero Rounded Hero With Featured Insight Home Hero Icon Carousel Image Link Carousel Image Link Carousel 2×2 Image Link Grid Insight Content Job Listing Large Image Large Testimonial Leadership Grid Link Grid Locations Locations Archive Logo Scroller Page Heading People Carousel Related Services Resources Carousel Section Anchors Separator Service Hero Services List Services Tabs Tech Partners Testimonial Carousel Testimonial Single Use Case Component Values Scroller Video

Glossary Items

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-glossary-items {
	--text-color: #{$primary};

	position: relative;
	padding: 3em 0;

    @include bp($lg){
        padding: 6em 0;
    }

	.heading {
		color: var(--text-color)
	}

	&.theme--dark {
		--text-color: #{$white};
	}

	&__heading-row {
		margin-bottom: rem-calc(40);
	}

	.sub-category__item {
		&:last-of-type {
			&:after {
				display: none;
			}
		}
	}

	&__heading-buttons {
		text-align: left;
		margin-top: rem-calc(20);

		@include bp($lg) {
			text-align: right;
			margin-top: 0;
		}
	}

	&__card {
		text-decoration: none;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
	}

	&__card-column {
		margin-bottom: rem-calc(30);
		border-bottom: 1px solid $grey-primary;
		padding-bottom: rem-calc(30);

		@include bp($lg) {
			margin-bottom: 0;
			border-bottom: none;
			padding-bottom: 0;
		}
	}

	&__card-categories {
		margin-bottom: rem-calc(10);
	}

	&__card-heading {
		font-size: rem-calc(24);
		text-decoration: none;
		display: block;
		color: var(--text-color);
		transition: all 0.3s ease-in-out;

		&:hover {
			color: $secondary;
		}
	}

	&__card-excerpt {
		font-size: rem-calc(16);
		color: var(--text-color);
		margin-top: rem-calc(20);
	}

	&__card-bottom {
		margin-top: rem-calc(20);
	}
}
This component is not currently used on any pages.
There are is no readme file with this component.