Content Strip

Fields
PHP
SCSS
JavaScript
Pages
Notes

Field

Field Type

Field Name

Instructions

Block Data

tab

Heading Type

select

heading_type

Heading Text

text

heading_text

Copy

wysiwyg

copy

Buttons

repeater

buttons_list

-- Button

link

button

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

As the user scrolls to this component the items will be lazyloaded fade in one by one
As the user scrolls there will be a slight parallax effect between the heading and main copy

External Libraries

ScrollTrigger (GSAP)

Notes (Design / Dev / SEO)

No notes.