Reviews Tabs

Fields
PHP
SCSS
JavaScript
Pages
Notes

Field

Field Type

Field Name

Instructions

Block Data

tab

Latest Reviews

true_false

latest_reviews

Featured Reviews

relationship

featured_reviews

Block Meta

tab

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-example {

	&__wrapper{
		padding: 2rem;
		background: #f2f2f2;
		border-top: 1rem solid #de7c00;

		h1 {
			margin-bottom: 1rem;
			font-weight: 700;
		}

		ol {
			li {

				margin-bottom: 1rem;

				&:last-of-type {
					margin-bottom: 0;
				}
			}
		}
	}
}

// class Example {
// 	/**
// 	 * Create and initialise objects of this class
// 	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
// 	 * @param {object} block
// 	 */
// 	constructor() {
// 		this.blocks = document.querySelectorAll('.block-example');
// 		this.init();
// 	}

// 	/**
// 	 * Example function to run class logic
// 	 * Can access `this.block`
// 	 */
// 	init() {
// 		this.blocks.forEach((block) => {
// 			console.log("🚀 ~ file: Example.js ~ line 20 ~ Example ~ init ~ this.block", block);
// 		});
// 	}
// }

// new Example();

This component is not currently used on any pages.

Animation / States

The reviews can be navigated via the tabs on the left hand side. Once clicked the corresponding review will fade in on the right
As the user scrolls to this component, the individual elements will fade in one at a time

External Libraries

ScrollTrigger (GSAP)

Notes (Design / Dev / SEO)

NEED TO CONFIRM: The reviews will be manually input into the CMS