To use this element: @include('.srv.www.kocho.co.uk.releases.20241029111403.web.app.themes.sage10.app.View.......library.blocks.page-hero.page-hero', $options)

Options used for this example:

[
	"hero_type" => "bg_image",
	"hero_text" => "text",
	"hero_bg_image" => [
		"url" => "/resources/images/pattern-library/kitten-grey.jpg",
		"alt" => "kitten"
	],
	"hero_text_content" => [
		"has_tag" => true,
		"tag_text" => "About us",
		"title" => "This hero is the background image variant.",
		"title_font_size" => "large",
		"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis</p>"
	]
]

To use this element: @include('.srv.www.kocho.co.uk.releases.20241029111403.web.app.themes.sage10.app.View.......library.blocks.page-hero.page-hero', $options)

Options used for this example:

[
	"hero_type" => "bg_overlay",
	"hero_text" => "title",
	"hero_bg_overlay" => "funnel",
	"has_tag" => true,
	"tag_text" => "Case Study | 6 min read",
	"hero_title" => "This hero is the background overlay variant.",
	"title_font_size" => "large"
]

To use this element: @include('.srv.www.kocho.co.uk.releases.20241029111403.web.app.themes.sage10.app.View.......library.blocks.page-hero.page-hero', $options)

Options used for this example:

[
	"hero_type" => "bg_overlay",
	"hero_text" => "title",
	"hero_bg_overlay" => "lines",
	"has_tag" => true,
	"tag_text" => "Case Study | 6 min read",
	"hero_title" => "This hero is the background overlay variant with an author avatar added.",
	"hero_title_size" => "h3",
	"title_font_size" => "normal",
	"hero_avatar" => [
		"person_avatar" => [
			"has_person" => true,
			"person_image" => [
				"url" => "/resources/images/pattern-library/kitten-grey.jpg",
				"alt" => "kitten profile"
			],
			"person_name" => "Author Name",
			"person_position" => "Author Company Position"
		]
	]
]

To use this element: @include('.srv.www.kocho.co.uk.releases.20241029111403.web.app.themes.sage10.app.View.......library.blocks.page-hero.page-hero', $options)

Options used for this example:

[
	"hero_type" => "bg_overlay",
	"hero_text" => "title",
	"hero_bg_overlay" => "butterfly",
	"has_tag" => true,
	"tag_text" => "Case Study | 6 min read",
	"hero_title" => "This hero is the background overlay variant with a butterfly overlay",
	"hero_title_size" => "h3",
	"title_font_size" => "normal"
]

To use this element: @include('.srv.www.kocho.co.uk.releases.20241029111403.web.app.themes.sage10.app.View.......library.blocks.page-hero.page-hero', $options)

Options used for this example:

[
	"hero_type" => "split_image",
	"hero_text" => "text",
	"hero_image" => [
		"url" => "/resources/images/pattern-library/kitten-grey.jpg",
		"alt" => "kitten"
	],
	"hero_text_content" => [
		"has_tag" => true,
		"tag_text" => "About us",
		"title" => "This hero is the split image variant.",
		"title_size" => "h3",
		"title_font_size" => "normal",
		"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis</p>"
	]
]

To use this element: @include('.srv.www.kocho.co.uk.releases.20241029111403.web.app.themes.sage10.app.View.......library.blocks.page-hero.page-hero', $options)

Options used for this example:

[
	"hero_type" => "split_image",
	"hero_text" => "quote",
	"hero_image" => [
		"url" => "/resources/images/pattern-library/kitten-grey.jpg",
		"alt" => "kitten"
	],
	"hero_quote_content" => [
		"hero_quote_text" => "This hero is the split image variant with quote text and the speaker's details.",
		"hero_quote_name" => "Mr Cat",
		"hero_quote_job" => "CEO",
		"title_size" => "h3",
		"title_font_size" => "normal"
	]
]

To use this element: @include('.srv.www.kocho.co.uk.releases.20241029111403.web.app.themes.sage10.app.View.......library.blocks.page-hero.page-hero', $options)

Options used for this example:

[
	"hero_type" => "split_card",
	"hero_text" => "title",
	"featured_post" => [
		"image" => [
			"url" => "/resources/images/pattern-library/kitten-grey.jpg",
			"alt" => "kitten"
		],
		"meta" => "Case Study | 4min Read",
		"title" => "This is the title of a post that has been featured on this hero block",
		"date" => "21.01.2022"
	],
	"has_tag" => true,
	"tag_text" => "About us",
	"hero_title" => "This hero is the split card variant with a featured post landscape card to the right.",
	"title_font_size" => "normal",
	"hero_title_size" => "h3"
]

To use this element: @include('.srv.www.kocho.co.uk.releases.20241029111403.web.app.themes.sage10.app.View.......library.blocks.page-hero.page-hero', $options)

Options used for this example:

[
	"hero_type" => "split_video",
	"hero_text" => "title",
	"has_tag" => true,
	"tag_text" => "Watch the video",
	"hero_title" => "This hero is the split video variant with a relatively long title.",
	"hero_title_size" => "h3",
	"title_font_size" => "normal",
	"hero_video" => [
		"provider" => "youtube",
		"embed_code" => "pVE92TNDwUk",
		"title" => "Placeholder video",
		"sources" => [],
		"modal" => false,
		"overlay_img" => [
			"url" => "/resources/images/pattern-library/placeholder-video-overlay.jpeg",
			"alt" => "placeholder overlay"
		],
		"video_duration" => [
			"video_hours" => "00",
			"video_minutes" => "00",
			"video_seconds" => "33"
		]
	]
]

To use this element: @include('.srv.www.kocho.co.uk.releases.20241029111403.web.app.themes.sage10.app.View.......library.blocks.page-hero.page-hero', $options)

Options used for this example:

[
	"hero_type" => "event",
	"hero_event" => [
		"event_columns" => [
			[
				"event_icons" => "calendar",
				"column_title" => "Date & time",
				"column_content" => "date_time",
				"event_dates" => [
					[
						"date" => "20.01.2022 | 15.00"
					],
					[
						"date" => "21.01.2022 | 15.00"
					],
					[
						"date" => "22.01.2022 | 15.00"
					]
				]
			],
			[
				"event_icons" => "location",
				"column_title" => "Location",
				"column_content" => "location",
				"event_location" => [
					"event_location_1" => "London",
					"event_location_2" => "SN1 EB3",
					"event_map" => "https://www.google.com"
				]
			],
			[
				"event_icons" => "ticket",
				"column_title" => "Available seats",
				"column_content" => "seats",
				"event_seats" => [
					"event_availability" => "12 of 20",
					"event_booking" => "https://www.google.com"
				]
			]
		]
	],
	"hero_text" => "title",
	"hero_bg_overlay" => "funnel",
	"has_tag" => true,
	"tag_text" => "Event",
	"title_font_size" => "normal",
	"hero_title" => "This hero is the background overlay variant for a single event page",
	"hero_title_size" => "h3"
]

To use this element: @include('.srv.www.kocho.co.uk.releases.20241029111403.web.app.themes.sage10.app.View.......library.blocks.page-hero.page-hero', $options)

Options used for this example:

[
	"hero_type" => "event",
	"hero_event" => [
		"event_columns" => [
			[
				"event_icons" => "calendar",
				"column_title" => "Date & time",
				"column_content" => "date_time",
				"event_dates" => [
					[
						"date" => "20.01.2022 | 15.00"
					],
					[
						"date" => "21.01.2022 | 15.00"
					],
					[
						"date" => "22.01.2022 | 15.00"
					]
				]
			],
			[
				"event_icons" => "location",
				"column_title" => "Location",
				"column_content" => "location",
				"event_location" => [
					"event_location_1" => "London",
					"event_location_2" => "SN1 EB3",
					"event_map" => "https://www.google.com"
				]
			],
			[
				"event_icons" => "ticket",
				"column_title" => "Available seats",
				"column_content" => "seats",
				"event_seats" => [
					"event_availability" => "12 of 20",
					"event_booking" => "https://www.google.com"
				]
			]
		]
	],
	"hero_text" => "title",
	"hero_bg_overlay" => "butterfly",
	"has_tag" => true,
	"tag_text" => "Event",
	"title_font_size" => "normal",
	"hero_title" => "This hero is the background overlay variant for a single event page",
	"hero_title_size" => "h3"
]

To use this element: @include('.srv.www.kocho.co.uk.releases.20241029111403.web.app.themes.sage10.app.View.......library.blocks.page-hero.page-hero', $options)

Options used for this example:

[
	"hero_type" => "event",
	"hero_event" => [
		"event_columns" => [
			[
				"event_icons" => "calendar",
				"column_title" => "Date & time",
				"column_content" => "date_time",
				"event_dates" => [
					[
						"date" => "20.01.2022 | 15.00"
					],
					[
						"date" => "21.01.2022 | 15.00"
					],
					[
						"date" => "22.01.2022 | 15.00"
					]
				]
			],
			[
				"event_icons" => "location",
				"column_title" => "Location",
				"column_content" => "location",
				"event_location" => [
					"event_location_1" => "London",
					"event_location_2" => "SN1 EB3",
					"event_map" => "https://www.google.com"
				]
			],
			[
				"event_icons" => "ticket",
				"column_title" => "Available seats",
				"column_content" => "seats",
				"event_seats" => [
					"event_availability" => "12 of 20",
					"event_booking" => "https://www.google.com"
				]
			]
		]
	],
	"hero_text" => "title",
	"hero_bg_overlay" => "lines",
	"has_tag" => true,
	"tag_text" => "Event",
	"title_font_size" => "normal",
	"hero_title" => "This hero is the background overlay variant for a single event page",
	"hero_title_size" => "h3"
]