Usage details:

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

Options used for this example:

[]

Usage details:

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

Options used for this example:

[
	"bg_colour" => "white",
	"has_tag" => true,
	"tag_type" => "icon",
	"tag_text" => "Awards & Accreditations",
	"text_align" => "center",
	"title" => "Awards list",
	"copy" => "Sed turpis felis, vestibulum et leo vitae, laoreet hendrerit orci. Donec felis est, pretium vitae viverra sed, dignissim et tortor. Curabitur at enim ligula. Praesent feugiat commodo posuere. Fusce quis diam velit. Etiam fringilla feugiat diam ac auctor. Proin non nulla feugiat, molestie eros in, malesuada arcu.",
	"logos" => [
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-cyber-essentials.png",
				"alt" => "cyber essentials award logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-gold-microsoft-partner.png",
				"alt" => "gold Microsoft partner award logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-iso-9001-certified.png",
				"alt" => "ISO 9001 award logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-bsi-iso-27001-certified.png",
				"alt" => "ISO 27001 award logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-microsoft-intelligent-security-association.png",
				"alt" => "Microsoft intelligent security award logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-microsoft-gold-five-competencies.png",
				"alt" => "Microsoft five competencies gold award logo"
			]
		]
	],
	"cta" => [
		"button_text" => "Primary Button",
		"button_type" => "link",
		"link_url" => "https://google.com"
	]
]
tag icon

Awards & Accreditations

Awards list

Sed turpis felis, vestibulum et leo vitae, laoreet hendrerit orci. Donec felis est, pretium vitae viverra sed, dignissim et tortor. Curabitur at enim ligula. Praesent feugiat commodo posuere. Fusce quis diam velit. Etiam fringilla feugiat diam ac auctor. Proin non nulla feugiat, molestie eros in, malesuada arcu.
cyber essentials award logo gold Microsoft partner award logo ISO 9001 award logo ISO 27001 award logo Microsoft intelligent security award logo Microsoft five competencies gold award logo

Awards & Logos

A block with awards logos, CTA, and optional title and body copy

Usage details:

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

Options used for this example:

[
	"carousel_type" => "static",
	"logos" => [
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-cyber-essentials.png",
				"alt" => "cyber essentials award logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-gold-microsoft-partner.png",
				"alt" => "gold Microsoft partner award logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-iso-9001-certified.png",
				"alt" => "ISO 9001 award logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-bsi-iso-27001-certified.png",
				"alt" => "ISO 27001 award logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-microsoft-intelligent-security-association.png",
				"alt" => "Microsoft intelligent security award logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-microsoft-gold-five-competencies.png",
				"alt" => "Microsoft five competencies gold award logo"
			]
		]
	]
]
cyber essentials award logo gold Microsoft partner award logo ISO 9001 award logo ISO 27001 award logo Microsoft intelligent security award logo Microsoft five competencies gold award logo
Usage details:

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

Options used for this example:

[
	"carousel_type" => "tickertape",
	"logos" => [
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-cyber-essentials.png",
				"alt" => "cyber essentials award logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-gold-microsoft-partner.png",
				"alt" => "gold Microsoft partner award logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-iso-9001-certified.png",
				"alt" => "ISO 9001 award logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-bsi-iso-27001-certified.png",
				"alt" => "ISO 27001 award logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-microsoft-intelligent-security-association.png",
				"alt" => "Microsoft intelligent security award logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-microsoft-gold-five-competencies.png",
				"alt" => "Microsoft five competencies gold award logo"
			]
		]
	]
]
Usage details:

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

Options used for this example:

[
	"carousel_type" => "carousel",
	"logos" => [
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-cyber-essentials.png",
				"alt" => "cyber essentials award logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-gold-microsoft-partner.png",
				"alt" => "gold Microsoft partner award logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-iso-9001-certified.png",
				"alt" => "ISO 9001 award logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-bsi-iso-27001-certified.png",
				"alt" => "ISO 27001 award logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-microsoft-intelligent-security-association.png",
				"alt" => "Microsoft intelligent security award logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/awards-microsoft-gold-five-competencies.png",
				"alt" => "Microsoft five competencies gold award logo"
			]
		]
	]
]

Usage details:

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

Options used for this example:

[
	"cta" => [
		"button_text" => "See more",
		"button_type" => "link",
		"link_url" => "#",
		"button_style" => "primary-green"
	],
	"articles" => [
		[
			"hoverPop" => true,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "",
			"tags" => [
				"theme" => "dark-oatmeal-font",
				"limit" => false,
				"items" => []
			],
			"meta" => "10.12.2021 | 4min read with long meta description to overflow or wrap"
		],
		[
			"hoverPop" => true,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "",
			"tags" => [
				"theme" => "dark-oatmeal-font",
				"limit" => false,
				"items" => []
			],
			"meta" => "10.12.2021 | 4min read"
		],
		[
			"hoverPop" => true,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "",
			"tags" => [
				"theme" => "dark-oatmeal-font",
				"limit" => false,
				"items" => []
			],
			"meta" => "10.12.2021 | 4min read"
		],
		[
			"hoverPop" => true,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "",
			"tags" => [
				"theme" => "dark-oatmeal-font",
				"limit" => false,
				"items" => []
			],
			"meta" => "10.12.2021 | 4min read"
		]
	]
]
Usage details:

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

Options used for this example:

[
	"hasTitle" => 1,
	"has_tag" => true,
	"tag_type" => "icon",
	"tag_text" => "Block Tag",
	"cardGridTitle" => [
		"gridTitle" => "You may also like...",
		"gridTitleHeadingLevel" => 3
	],
	"cta" => [
		"button_text" => "See more",
		"button_type" => "link",
		"link_url" => "#",
		"button_style" => "primary-green"
	],
	"articles" => [
		[
			"hoverPop" => true,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "",
			"tags" => [
				"theme" => "dark-oatmeal-font",
				"limit" => false,
				"items" => []
			],
			"meta" => "10.12.2021 | 4min read with long meta description to overflow or wrap"
		],
		[
			"hoverPop" => true,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "",
			"tags" => [
				"theme" => "dark-oatmeal-font",
				"limit" => false,
				"items" => []
			],
			"meta" => "10.12.2021 | 4min read"
		],
		[
			"hoverPop" => true,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "",
			"tags" => [
				"theme" => "dark-oatmeal-font",
				"limit" => false,
				"items" => []
			],
			"meta" => "10.12.2021 | 4min read"
		],
		[
			"hoverPop" => true,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "",
			"tags" => [
				"theme" => "dark-oatmeal-font",
				"limit" => false,
				"items" => []
			],
			"meta" => "10.12.2021 | 4min read"
		]
	]
]
tag icon

Block Tag

You may also like...

Usage details:

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

Options used for this example:

[
	"cta" => [
		"button_text" => "See more",
		"button_type" => "link",
		"link_url" => "#",
		"button_style" => "primary-green"
	],
	"articles" => [
		[
			"hoverPop" => true,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "",
			"tags" => [
				"theme" => "dark-oatmeal-font",
				"limit" => false,
				"items" => []
			],
			"meta" => "10.12.2021 | 4min read"
		],
		[
			"hoverPop" => true,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "",
			"tags" => [
				"theme" => "dark-oatmeal-font",
				"limit" => false,
				"items" => []
			],
			"meta" => "10.12.2021 | 4min read"
		],
		[
			"hoverPop" => true,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "",
			"tags" => [
				"theme" => "dark-oatmeal-font",
				"limit" => false,
				"items" => []
			],
			"meta" => "10.12.2021 | 4min read"
		],
		[
			"hoverPop" => true,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "",
			"tags" => [
				"theme" => "dark-oatmeal-font",
				"limit" => false,
				"items" => []
			],
			"meta" => "10.12.2021 | 4min read"
		],
		[
			"hoverPop" => true,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "",
			"tags" => [
				"theme" => "dark-oatmeal-font",
				"limit" => false,
				"items" => []
			],
			"meta" => "10.12.2021 | 4min read"
		],
		[
			"hoverPop" => true,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "",
			"tags" => [
				"theme" => "dark-oatmeal-font",
				"limit" => false,
				"items" => []
			],
			"meta" => "10.12.2021 | 4min read"
		],
		[
			"hoverPop" => true,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "",
			"tags" => [
				"theme" => "dark-oatmeal-font",
				"limit" => false,
				"items" => []
			],
			"meta" => "10.12.2021 | 4min read"
		],
		[
			"hoverPop" => true,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "",
			"tags" => [
				"theme" => "dark-oatmeal-font",
				"limit" => false,
				"items" => []
			],
			"meta" => "10.12.2021 | 4min read"
		]
	]
]
Usage details:

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

Options used for this example:

[
	"cta" => [
		"button_text" => "See more",
		"button_type" => "link",
		"link_url" => "#",
		"button_style" => "primary-green"
	],
	"articles" => [
		[
			"hoverPop" => true,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "",
			"tags" => [
				"theme" => "dark-oatmeal-font",
				"limit" => false,
				"items" => []
			],
			"meta" => "10.12.2021 | 4min read"
		],
		[
			"hoverPop" => true,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "",
			"tags" => [
				"theme" => "dark-oatmeal-font",
				"limit" => false,
				"items" => []
			],
			"meta" => "10.12.2021 | 4min read"
		],
		[
			"hoverPop" => true,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "",
			"tags" => [
				"theme" => "dark-oatmeal-font",
				"limit" => false,
				"items" => []
			],
			"meta" => "10.12.2021 | 4min read"
		],
		[
			"hoverPop" => true,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "",
			"tags" => [
				"theme" => "dark-oatmeal-font",
				"limit" => false,
				"items" => []
			],
			"meta" => "10.12.2021 | 4min read"
		]
	]
]
Usage details:

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

Options used for this example:

[
	"articles" => [
		[
			"hoverPop" => false,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero autem dolores pariatur veniam ab quod odit obcaecati harum, unde iusto provident quibusdam cupiditate nulla fuga voluptatum quia, tenetur, blanditiis voluptates?",
			"tags" => [
				"limit" => 2,
				"theme" => "oatmeal",
				"items" => [
					[
						"text" => "Transformation"
					],
					[
						"text" => "Identity"
					],
					[
						"text" => "Identity"
					]
				]
			],
			"meta" => "Test | aasasd"
		],
		[
			"hoverPop" => false,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero autem dolores pariatur veniam ab quod odit obcaecati harum, unde iusto provident quibusdam cupiditate nulla fuga voluptatum quia, tenetur, blanditiis voluptates?",
			"tags" => [
				"limit" => 2,
				"theme" => "oatmeal",
				"items" => [
					[
						"text" => "Transformation"
					],
					[
						"text" => "Identity"
					],
					[
						"text" => "Identity"
					]
				]
			],
			"meta" => "Test | aasasd"
		],
		[
			"hoverPop" => false,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero autem dolores pariatur veniam ab quod odit obcaecati harum, unde iusto provident quibusdam cupiditate nulla fuga voluptatum quia, tenetur, blanditiis voluptates?",
			"tags" => [
				"limit" => 2,
				"theme" => "oatmeal",
				"items" => [
					[
						"text" => "Transformation"
					],
					[
						"text" => "Identity"
					],
					[
						"text" => "Identity"
					]
				]
			],
			"meta" => "Test | aasasd"
		],
		[
			"hoverPop" => false,
			"headerTags" => [
				"theme" => "dark-lemon-font",
				"items" => [
					[
						"text" => "Transformation"
					]
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
			"text" => "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero autem dolores pariatur veniam ab quod odit obcaecati harum, unde iusto provident quibusdam cupiditate nulla fuga voluptatum quia, tenetur, blanditiis voluptates?",
			"tags" => [
				"limit" => 2,
				"theme" => "oatmeal",
				"items" => [
					[
						"text" => "Transformation"
					],
					[
						"text" => "Identity"
					],
					[
						"text" => "Identity"
					]
				]
			],
			"meta" => "Test | aasasd"
		]
	]
]

Centered quote

Centered full-width quote block with the option to toggle avatar icon and text

Usage details:

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

Options used for this example:

[
	"has_overlay" => true,
	"person_avatar" => [
		"has_person" => 1,
		"person_image" => [
			"url" => "/resources/images/pattern-library/gettyimages-1327498437-2048x2048.jpeg"
		],
		"person_name" => "John Smith",
		"person_position" => "CEO"
	],
	"quote_body" => "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta mi dignissim ultricies suscipit. Nullam ut justo a velit vehicula vulputate sit amet a nisi.",
	"toggle_logo" => 1,
	"quote_logo" => [
		"url" => "/resources/images/pattern-library/logo-yodel.png",
		"alt" => "The Yodel logo"
	]
]
A version of the Kocho butterfly logo
Speech mark icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta mi dignissim ultricies suscipit. Nullam ut justo a velit vehicula vulputate sit amet a nisi.

John Smith

CEO



Usage details:

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

Options used for this example:

[
	"centred_content" => [
		[
			"content_type" => "heading",
			"heading" => [
				"heading_text" => "We speak to Yubico's CSO about the problem with passwords, different modern authentication solutions, and how to make passwordless a success in your organisation.",
				"heading_size" => "h2"
			]
		],
		[
			"content_type" => "large_text",
			"large_paragraph" => "<div>Here is an example of a startfirst using the large text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>"
		],
		[
			"content_type" => "text",
			"copy" => "<div>Here is an example of a normal paragraph using the normal wysiwyg. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>",
			"wysiwyg_img_border" => false
		]
	]
]

We speak to Yubico's CSO about the problem with passwords, different modern authentication solutions, and how to make passwordless a success in your organisation.

Here is an example of a startfirst using the large text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Here is an example of a normal paragraph using the normal wysiwyg. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Usage details:

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

Options used for this example:

[
	"centred_content" => [
		[
			"content_type" => "text",
			"copy" => "<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</div><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>",
			"wysiwyg_img_border" => false
		]
	]
]
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Usage details:

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

Options used for this example:

[
	"centred_content" => [
		[
			"content_type" => "text",
			"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquya.</p>",
			"wysiwyg_img_border" => false
		],
		[
			"content_type" => "quote",
			"quote" => [
				"bg_colour" => "oatmeal",
				"background_overlay" => [
					"has_overlay" => true,
					"overlay_image" => [
						[
							"url" => "/resources/images/patterns/Butterfly_2.svg",
							"alt" => "A stylized version of the Kocho butterfly logo"
						]
					],
					"overlay_position" => "top_right"
				],
				"show_quote" => true,
				"quote_text" => "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
				"quote_source" => "Bob Ross",
				"quote_link" => [
					"url" => "https://www.google.co.uk"
				]
			]
		],
		[
			"content_type" => "text",
			"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquya.</p>",
			"wysiwyg_img_border" => false
		]
	]
]

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquya.

quote icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Bob Ross

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquya.

Usage details:

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

Options used for this example:

[
	"centred_content" => [
		[
			"content_type" => "text",
			"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquya.</p>",
			"wysiwyg_img_border" => false
		],
		[
			"content_type" => "image",
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"image_source" => [
				"title" => "google.com",
				"url" => "https://google.com"
			],
			"image_border" => false
		]
	]
]

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquya.

kitten
Usage details:

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

Options used for this example:

[
	"centred_content" => [
		[
			"content_type" => "accordion",
			"accordion" => [
				"accordion_text" => "<p>Sustainable and secure growth that powers your potential. Select an option below to see how we can help your business.</p>",
				"items" => [
					[
						"title" => "Identity",
						"text" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>"
					],
					[
						"title" => "Secure Workforce",
						"text" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>"
					],
					[
						"title" => "Secure Operation",
						"text" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>"
					],
					[
						"title" => "Innovation & Transformation",
						"text" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>"
					],
					[
						"title" => "Managed Services",
						"text" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>"
					]
				]
			]
		]
	]
]

Sustainable and secure growth that powers your potential. Select an option below to see how we can help your business.

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Usage details:

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

Options used for this example:

[
	"centred_content" => [
		[
			"content_type" => "icons",
			"icons" => [
				"layout" => "grid",
				"heading_level" => "h2",
				"items" => [
					[
						"title" => "Example title here",
						"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?</p>",
						"image" => [
							"url" => "/resources/images/icons/brand-icons/id.svg",
							"alt" => "icon"
						]
					],
					[
						"title" => "Example title here",
						"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?</p>",
						"image" => [
							"url" => "/resources/images/icons/brand-icons/id.svg",
							"alt" => "icon"
						]
					],
					[
						"title" => "Example title here",
						"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?</p>",
						"image" => [
							"url" => "/resources/images/icons/brand-icons/id.svg",
							"alt" => "icon"
						]
					],
					[
						"title" => "Example title here",
						"copy" => "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?",
						"image" => [
							"url" => "/resources/images/icons/brand-icons/id.svg",
							"alt" => "icon"
						]
					]
				]
			]
		],
		[
			"content_type" => "text",
			"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquya.</p>",
			"wysiwyg_img_border" => false
		],
		[
			"content_type" => "icons",
			"icons" => [
				"layout" => "stacked",
				"heading_level" => "h2",
				"items" => [
					[
						"title" => "Example title here",
						"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?</p>",
						"image" => [
							"url" => "/resources/images/icons/brand-icons/id.svg",
							"alt" => "icon"
						]
					],
					[
						"title" => "Example title here",
						"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?</p>",
						"image" => [
							"url" => "/resources/images/icons/brand-icons/id.svg",
							"alt" => "icon"
						]
					],
					[
						"title" => "Example title here",
						"copy" => "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?",
						"image" => [
							"url" => "/resources/images/icons/brand-icons/id.svg",
							"alt" => "icon"
						]
					]
				]
			]
		]
	]
]
icon

Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?

icon

Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?

icon

Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?

icon

Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquya.

icon

Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?

icon

Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?

icon

Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?
Usage details:

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

Options used for this example:

[
	"centred_content" => [
		[
			"content_type" => "text",
			"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><ul><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</li><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</li><li>Lorem ipsum dolor sit amet, consetetur sadip scing elitr, sed diam nonumy.</li></ul>",
			"wysiwyg_img_border" => false
		]
	]
]

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
  • Lorem ipsum dolor sit amet, consetetur sadip scing elitr, sed diam nonumy.
Usage details:

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

Options used for this example:

[
	"centred_content" => [
		[
			"content_type" => "text_button",
			"text_button" => [
				"text_align" => "left",
				"title" => "Title text",
				"title_size" => "h4",
				"copy" => "<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus atque, iusto neque eos cum asperiores aperiam omnis perspiciatis porro soluta error nemo aut fugiat similique ea minus quae provident voluptatum?</p>",
				"text_has_button" => true,
				"text_cta" => [
					"button_text" => "Primary Button",
					"button_style" => "primary-green",
					"button_type" => "link",
					"link_url" => "https://google.com"
				],
				"has_tag" => true,
				"tag_type" => "icon",
				"tag_text" => "Tag with Icon",
				"bg_colour" => "white"
			]
		],
		[
			"content_type" => "text",
			"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>",
			"wysiwyg_img_border" => false
		]
	]
]
tag icon

Tag with Icon

Title text

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus atque, iusto neque eos cum asperiores aperiam omnis perspiciatis porro soluta error nemo aut fugiat similique ea minus quae provident voluptatum?

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Usage details:

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

Options used for this example:

[
	"centred_content" => [
		[
			"content_type" => "text",
			"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>",
			"wysiwyg_img_border" => false
		],
		[
			"content_type" => "video",
			"video_content" => [
				"provider" => "youtube",
				"embed_code" => "pVE92TNDwUk",
				"title" => "Placeholder video",
				"caption" => "A video from YouTube",
				"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"
				]
			]
		]
	]
]

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

placeholder overlay
play icon 00:00:33 Play Placeholder video video

A video from YouTube


Comparison table

A table for comparing pros and cons of up to 4 different tiers. The first tier is highlighted in lime

Usage details:

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

Options used for this example:

[
	"table_subtitle" => "Side by side",
	"table_title" => "A short heading about the comparison table",
	"table_title_width" => "narrow",
	"tiers" => [
		[
			"tier_title" => "Gold Tier",
			"tier_body" => "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.",
			"tier_is_link" => "not_link",
			"tier_bullets" => [
				[
					"tier_icons" => "tick",
					"tier_text" => "Impressive feature goes here like this"
				],
				[
					"tier_icons" => "tick",
					"tier_text" => "Impressive feature goes here, this time over two short lines"
				],
				[
					"tier_icons" => "tick",
					"tier_text" => "Impressive feature goes here like this"
				],
				[
					"tier_icons" => "tick",
					"tier_text" => "Another example feature here"
				],
				[
					"tier_icons" => "tick",
					"tier_text" => "Impressive feature here"
				],
				[
					"tier_icons" => "tick",
					"tier_text" => "Impressive feature goes here"
				]
			]
		],
		[
			"tier_title" => "Silver Tier",
			"tier_body" => "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.",
			"tier_is_link" => "not_link",
			"tier_bullets" => [
				[
					"tier_icons" => "tick",
					"tier_text" => "Impressive feature goes here like this"
				],
				[
					"tier_icons" => "tick",
					"tier_text" => "Impressive feature goes here, this time over two short lines"
				],
				[
					"tier_icons" => "tick",
					"tier_text" => "Impressive feature goes here like this"
				],
				[
					"tier_icons" => "cross",
					"tier_text" => "An unimpressive example feature here"
				],
				[
					"tier_icons" => "cross",
					"tier_text" => "Another unimpressive feature here"
				],
				[
					"tier_icons" => "cross",
					"tier_text" => "One more unimpressive feature goes here"
				]
			]
		],
		[
			"tier_title" => "Bronze Tier",
			"tier_body" => "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.",
			"tier_is_link" => "not_link",
			"tier_bullets" => [
				[
					"tier_icons" => "tick",
					"tier_text" => "Impressive feature goes here like this"
				],
				[
					"tier_icons" => "cross",
					"tier_text" => "Unimpressive feature goes here, this time over two short lines"
				],
				[
					"tier_icons" => "cross",
					"tier_text" => "Unimpressive feature goes here like this"
				],
				[
					"tier_icons" => "cross",
					"tier_text" => "An unimpressive example feature here"
				],
				[
					"tier_icons" => "cross",
					"tier_text" => "Another unimpressive feature here"
				],
				[
					"tier_icons" => "cross",
					"tier_text" => "One more unimpressive feature goes here"
				]
			]
		]
	]
]

Side by side

A short heading about the comparison table

Gold Tier

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.

  • Impressive feature goes here like this

  • Impressive feature goes here, this time over two short lines

  • Impressive feature goes here like this

  • Another example feature here

  • Impressive feature here

  • Impressive feature goes here

Silver Tier

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.

  • Impressive feature goes here like this

  • Impressive feature goes here, this time over two short lines

  • Impressive feature goes here like this

  • An unimpressive example feature here

  • Another unimpressive feature here

  • One more unimpressive feature goes here

Bronze Tier

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.

  • Impressive feature goes here like this

  • Unimpressive feature goes here, this time over two short lines

  • Unimpressive feature goes here like this

  • An unimpressive example feature here

  • Another unimpressive feature here

  • One more unimpressive feature goes here


Usage details:

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

Options used for this example:

[
	"bg_colour" => "oatmeal",
	"image" => [
		"url" => "/resources/images/pattern-library/kitten-green.jpg",
		"alt" => "kitten"
	],
	"meta" => "E-Guide | 12min read",
	"title_size" => "h3",
	"title" => "Event and download form with a form",
	"copy_type" => "manual",
	"copy" => "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas ex id lacus dictum cursus.<p><ul><li>Lorem ipsum</li><li>Dolor sit amet</li><li>Elitr nonumy</li></ul>",
	"isButton" => false,
	"form" => "<!--[if lte IE 8]><script charset=\"utf-8\" type=\"text/javascript\" src=\"//js.hsforms.net/forms/v2-legacy.js\"></script><![endif]--><script charset=\"utf-8\" type=\"text/javascript\" src=\"//js.hsforms.net/forms/v2.js\"></script><script>hbspt.forms.create([region => \"na1\",portalId => \"5837364\",formId => \"40b7d03f-265f-482e-9080-d9de7fa489d7\"]);</script>"
]
kitten
E-Guide | 12min read

Event and download form with a form

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas ex id lacus dictum cursus.

  • Lorem ipsum
  • Dolor sit amet
  • Elitr nonumy
Usage details:

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

Options used for this example:

[
	"bg_colour" => "oatmeal",
	"image" => [
		"url" => "/resources/images/pattern-library/kitten-green.jpg",
		"alt" => "kitten"
	],
	"meta" => "E-Guide | 12min read",
	"title_size" => "h3",
	"title" => "Event and download form with a button",
	"copy_type" => "manual",
	"copy" => "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas ex id lacus dictum cursus.<p><ul><li>Lorem ipsum</li><li>Dolor sit amet</li><li>Elitr nonumy</li></ul>",
	"isButton" => true,
	"add_button" => [
		"cta" => [
			"button_text" => "Click me",
			"button_type" => "link",
			"link_url" => "https://google.com"
		]
	]
]
kitten
E-Guide | 12min read

Event and download form with a button

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas ex id lacus dictum cursus.

  • Lorem ipsum
  • Dolor sit amet
  • Elitr nonumy

Usage details:

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

Options used for this example:

[
	"bg_colour" => "ebony",
	"has_tag" => true,
	"tag_type" => "yellow-text",
	"tag_text" => "FAQs",
	"text_align" => "left",
	"title" => "Great doesn't shy away from questions",
	"copy" => "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.",
	"has_button" => true,
	"text_cta" => [
		"button_text" => "Submit",
		"button_type" => "link",
		"link_url" => "#",
		"button_style" => "primary-green"
	],
	"items" => [
		[
			"title" => "Example question one sits here like this",
			"text" => "<p>Sleeping in the box more napping, more napping all the napping is exhausting find empty spot in cupboard and sleep all day roll over and sun my belly.</p><ul><li>Some list text</li><li><a href='#'>Test link</a></li></ul>"
		],
		[
			"title" => "Example question one sits here like this",
			"text" => "<p>I'm getting hungry for kick up litter for bawl under human beds for scratch the postman wake up lick paw wake up owner meow meow. I will ruin the couch with my claws burrow under covers as lick i the shoes shove bum in owner's face like camera lens. I show my fluffy belly but it's a trap! if you pet it i will tear up your hand purr when give birth claw at curtains stretch</p>"
		],
		[
			"title" => "Example question one sits here like this",
			"text" => "<p>Pushed the mug off the table. Ptracy eat an easter feather as if it were a bird then burp victoriously, but tender and i is playing on your console hooman yet cuddle no cuddle cuddle love scratch scratch and meow, for purrrrrr. Lick arm hair purrr purr littel cat, little cat purr purr for chase red laser dot. Lasers are tiny mice there's a forty year old lady there let us feast so stretch, yet groom forever, stretch tongue and leave it slightly out, blep yet chirp at birds but chase little red dot someday it will be mine!,</p>"
		]
	]
]

FAQs

Great doesn't shy away from questions

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
  • Sleeping in the box more napping, more napping all the napping is exhausting find empty spot in cupboard and sleep all day roll over and sun my belly.

  • I'm getting hungry for kick up litter for bawl under human beds for scratch the postman wake up lick paw wake up owner meow meow. I will ruin the couch with my claws burrow under covers as lick i the shoes shove bum in owner's face like camera lens. I show my fluffy belly but it's a trap! if you pet it i will tear up your hand purr when give birth claw at curtains stretch

  • Pushed the mug off the table. Ptracy eat an easter feather as if it were a bird then burp victoriously, but tender and i is playing on your console hooman yet cuddle no cuddle cuddle love scratch scratch and meow, for purrrrrr. Lick arm hair purrr purr littel cat, little cat purr purr for chase red laser dot. Lasers are tiny mice there's a forty year old lady there let us feast so stretch, yet groom forever, stretch tongue and leave it slightly out, blep yet chirp at birds but chase little red dot someday it will be mine!,



Usage details:

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

Options used for this example:

[
	"image" => [
		"url" => "/resources/images/pattern-library/kitten-green.jpg",
		"alt" => "kitten"
	]
]
kitten

Usage details:

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

Options used for this example:

[
	"title" => "Our History",
	"copy" => "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.",
	"events" => [
		[
			"subtitle" => "January",
			"title" => "Example heading here",
			"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laborE.</p>",
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"side_title" => "2019"
		],
		[
			"subtitle" => "January",
			"title" => "Example heading here",
			"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laborE.</p>",
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"side_title" => "2019"
		],
		[
			"subtitle" => "January",
			"title" => "Example",
			"copy" => "<p>With little text</p>",
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"side_title" => "2019"
		],
		[
			"subtitle" => "January",
			"title" => "Example heading here",
			"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laborE.</p>",
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"side_title" => "2019"
		],
		[
			"subtitle" => "January",
			"title" => "Example heading here",
			"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laborE.</p>",
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"side_title" => "2019"
		],
		[
			"subtitle" => "January",
			"title" => "Example heading here",
			"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laborE.</p>",
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"side_title" => "2019"
		],
		[
			"subtitle" => "January",
			"title" => "Example heading here",
			"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laborE.</p>",
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"side_title" => "2019"
		]
	]
]

Our History

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
2019
kitten

January

Example heading here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laborE.

2019
kitten

January

Example heading here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laborE.

2019
kitten

January

Example

With little text

2019
kitten

January

Example heading here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laborE.

2019
kitten

January

Example heading here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laborE.

2019
kitten

January

Example heading here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laborE.

2019
kitten

January

Example heading here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laborE.


Usage details:

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

Options used for this example:

[
	"layout" => "grid",
	"heading_level" => "h2",
	"items" => [
		[
			"title" => "Example title here",
			"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?</p>",
			"image" => [
				"url" => "/resources/images/icons/brand-icons/id.svg",
				"alt" => "icon"
			]
		],
		[
			"title" => "Example title here",
			"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?</p>",
			"image" => [
				"url" => "/resources/images/icons/brand-icons/id.svg",
				"alt" => "icon"
			]
		],
		[
			"title" => "Example title here",
			"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?</p>",
			"image" => [
				"url" => "/resources/images/icons/brand-icons/id.svg",
				"alt" => "icon"
			]
		],
		[
			"title" => "Example title here",
			"copy" => "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?",
			"image" => [
				"url" => "/resources/images/icons/brand-icons/id.svg",
				"alt" => "icon"
			]
		]
	]
]
icon

Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?

icon

Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?

icon

Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?

icon

Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?
Usage details:

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

Options used for this example:

[
	"layout" => "stack",
	"heading_level" => "h6",
	"items" => [
		[
			"title" => "Example title here",
			"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?</p>",
			"image" => [
				"url" => "/resources/images/icons/brand-icons/id.svg",
				"alt" => "icon"
			]
		],
		[
			"title" => "Example title here",
			"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?</p>",
			"image" => [
				"url" => "/resources/images/icons/brand-icons/id.svg",
				"alt" => "icon"
			]
		],
		[
			"title" => "Example title here",
			"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?</p>",
			"image" => [
				"url" => "/resources/images/icons/brand-icons/id.svg",
				"alt" => "icon"
			]
		],
		[
			"title" => "Example title here",
			"copy" => "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?",
			"image" => [
				"url" => "/resources/images/icons/brand-icons/id.svg",
				"alt" => "icon"
			]
		]
	]
]
icon
Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?

icon
Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?

icon
Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?

icon
Example title here
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?
Usage details:

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

Options used for this example:

[
	"layout" => "grid",
	"items" => [
		[
			"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?</p>",
			"image" => [
				"url" => "/resources/images/icons/brand-icons/id.svg",
				"alt" => "icon"
			]
		],
		[
			"title" => "Example title here",
			"image" => [
				"url" => "/resources/images/icons/brand-icons/id.svg",
				"alt" => "icon"
			]
		],
		[
			"title" => "Example title here",
			"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?</p>"
		],
		[
			"title" => "Example title here",
			"copy" => "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?",
			"image" => [
				"url" => "/resources/images/icons/brand-icons/id.svg",
				"alt" => "icon"
			]
		]
	]
]
icon

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?

icon

Example title here

Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?

icon

Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?

Usage details:

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

Options used for this example:

[
	"html" => "<div style='width => 100%'><iframe frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=en&amp;q=1%20Grafton%20Street,%20Dublin,%20Ireland+(My%20Business%20Name)&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed'><a href='https://www.gps.ie/truck-gps/'>delivery van gps</a></iframe></div>",
	"custom_dimensions" => true,
	"width" => "100%",
	"height" => "500px"
]


Usage details:

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

Options used for this example:

[
	"title" => "Join a team that's on a mission to become greater",
	"sorted_vacancies" => [
		"Sales" => [
			[
				"jobOpeningName" => "Sales Support Executive",
				"id" => 89
			],
			[
				"jobOpeningName" => "Client Manager",
				"id" => 76
			]
		],
		"Identity" => [
			[
				"jobOpeningName" => "Identity Architect",
				"id" => 85
			],
			[
				"jobOpeningName" => "External Identity Consultant",
				"id" => 73
			]
		]
	]
]

Join a team that's on a mission to become greater


Usage details:

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

Options used for this example:

[
	"background_overlay" => [
		"has_overlay" => true,
		"overlay_image" => [
			[
				"url" => "/resources/images/patterns/Butterfly_2.svg",
				"alt" => "A stylized version of the Kocho butterfly logo"
			]
		],
		"overlay_position" => "bottom_right"
	],
	"has_tag" => true,
	"tag_type" => "icon",
	"tag_text" => "Locations",
	"locations" => [
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"office_location" => "London",
			"body" => "Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet.",
			"address_lines" => [
				[
					"address" => "Waverley House"
				],
				[
					"address" => "4th Floor"
				],
				[
					"address" => "7-12 Noel Street"
				],
				[
					"address" => "Westminster"
				],
				[
					"address" => "London"
				],
				[
					"address" => "W1F 8GQ"
				],
				[
					"address" => "United Kingdom"
				]
			]
		],
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"office_location" => "South Wales",
			"body" => "Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet.",
			"address_lines" => [
				[
					"address" => "Waverley House"
				],
				[
					"address" => "4th Floor"
				],
				[
					"address" => "7-12 Noel Street"
				],
				[
					"address" => "Westminster"
				],
				[
					"address" => "London"
				],
				[
					"address" => "W1F 8GQ"
				],
				[
					"address" => "United Kingdom"
				]
			]
		]
	]
]
tag icon

Locations

kitten
London

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet.

Waverley House

4th Floor

7-12 Noel Street

Westminster

London

W1F 8GQ

United Kingdom

kitten
South Wales

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet.

Waverley House

4th Floor

7-12 Noel Street

Westminster

London

W1F 8GQ

United Kingdom


Usage details:

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

Options used for this example:

[
	"logos" => [
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/logo-axa.png",
				"alt" => "axa logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/logo-itv.png",
				"alt" => "itv logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/logo-yodel.png",
				"alt" => "yodel logo"
			]
		],
		[
			"logo" => [
				"url" => "/resources/images/pattern-library/logo-informa.png",
				"alt" => "informa logo"
			]
		]
	]
]

Media with aside

Image or video with caption and optional side text, and several layout options

Usage details:

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

Options used for this example:

[
	"media_type" => "image",
	"image_options" => [
		"image" => [
			"url" => "/resources/images/pattern-library/gettyimages-944812540-2048x2048.jpeg",
			"alt" => "A hilltop path with the sunset in the background"
		],
		"caption" => "Source => www.google.com"
	],
	"show_aside" => 1,
	"layout_with_aside" => "right",
	"aside" => [
		"has_tag" => true,
		"tag_text" => "Test this",
		"tag_type" => "text",
		"aside_title" => "Reach new levels",
		"aside_title_size" => "h2",
		"aside_body" => "Consider the wide range of data your company looks after, and the consequences of that falling into the wrong hands. Personal and financial data, client databases, blue prints, designs and intellectual property is all valuable and vital in keeping your business competitive and secure. ThirdSpace can keep you protected, and in doing so, help your company reach new levels of productivity and efficiency."
	]
]
A hilltop path with the sunset in the background
Source: www.google.com
Usage details:

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

Options used for this example:

[
	"media_type" => "image",
	"image_options" => [
		"image" => [
			"url" => "/resources/images/pattern-library/gettyimages-944812540-2048x2048.jpeg",
			"alt" => "A hilltop path with the sunset in the background"
		],
		"caption" => "Source => www.google.com"
	],
	"show_aside" => 0,
	"layout_no_aside" => "center"
]
A hilltop path with the sunset in the background
Source: www.google.com
Usage details:

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

Options used for this example:

[
	"media_type" => "image",
	"image_options" => [
		"image" => [
			"url" => "/resources/images/pattern-library/gettyimages-944812540-2048x2048.jpeg",
			"alt" => "A hilltop path with the sunset in the background"
		],
		"caption" => "Source => www.google.com"
	],
	"show_aside" => 0,
	"layout_no_aside" => "left"
]
A hilltop path with the sunset in the background
Source: www.google.com
Usage details:

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

Options used for this example:

[
	"media_type" => "video",
	"video_options" => [
		"provider" => "youtube",
		"embed_code" => "pVE92TNDwUk",
		"title" => "Placeholder video",
		"caption" => "A video from YouTube",
		"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"
		]
	],
	"show_aside" => 1,
	"layout_with_aside" => "right",
	"aside" => [
		"aside_title" => "Reach new levels",
		"aside_title_size" => "h2",
		"aside_body" => "Consider the wide range of data your company looks after, and the consequences of that falling into the wrong hands. Personal and financial data, client databases, blue prints, designs and intellectual property is all valuable and vital in keeping your business competitive and secure. ThirdSpace can keep you protected, and in doing so, help your company reach new levels of productivity and efficiency."
	]
]
placeholder overlay
play icon 00:00:33 Play Placeholder video video

A video from YouTube

Usage details:

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

Options used for this example:

[
	"media_type" => "video",
	"video_options" => [
		"provider" => "youtube",
		"embed_code" => "pVE92TNDwUk",
		"title" => "Placeholder video",
		"caption" => "A video from YouTube",
		"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"
		]
	],
	"show_aside" => 0,
	"layout_no_aside" => "center"
]
placeholder overlay
play icon 00:00:33 Play Placeholder video video

A video from YouTube

Usage details:

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

Options used for this example:

[
	"media_type" => "video",
	"video_options" => [
		"provider" => "youtube",
		"embed_code" => "pVE92TNDwUk",
		"title" => "Placeholder video",
		"caption" => "A video from YouTube",
		"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"
		]
	],
	"show_aside" => 1,
	"layout_with_aside" => "left",
	"aside" => [
		"aside_title" => "Reach new levels",
		"aside_title_size" => "h2",
		"aside_body" => "Consider the wide range of data your company looks after, and the consequences of that falling into the wrong hands. Personal and financial data, client databases, blue prints, designs and intellectual property is all valuable and vital in keeping your business competitive and secure. ThirdSpace can keep you protected, and in doing so, help your company reach new levels of productivity and efficiency."
	]
]
placeholder overlay
play icon 00:00:33 Play Placeholder video video

A video from YouTube


Usage details:

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

Options used for this example:

[
	"content" => [
		[
			"content_type" => "heading",
			"heading" => [
				"heading_text" => "We speak to Yubico's CSO about the problem with passwords, different modern authentication solutions, and how to make passwordless a success in your organisation.",
				"heading_size" => "h2"
			]
		],
		[
			"content_type" => "large_text",
			"large_paragraph" => "<div>Here is an example of a startfirst using the large text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>"
		],
		[
			"content_type" => "text",
			"copy" => "<div>Here is an example of a normal paragraph using the normal wysiwyg. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>"
		]
	]
]

We speak to Yubico's CSO about the problem with passwords, different modern authentication solutions, and how to make passwordless a success in your organisation.

Here is an example of a startfirst using the large text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Here is an example of a normal paragraph using the normal wysiwyg. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Usage details:

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

Options used for this example:

[
	"content" => [
		[
			"content_type" => "text",
			"copy" => "<h2>Example narrow content block with iframe embed</h2><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</div><div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</div>"
		],
		[
			"content_type" => "iframe",
			"iframe_embed" => [
				"html" => "<div style='width => 100%'><iframe width='100%' height='600' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=en&amp;q=1%20Grafton%20Street,%20Dublin,%20Ireland+(My%20Business%20Name)&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed'><a href='https://www.gps.ie/truck-gps/'>delivery van gps</a></iframe></div>"
			]
		]
	]
]

Example narrow content block with iframe embed

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Usage details:

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

Options used for this example:

[
	"content" => [
		[
			"content_type" => "text",
			"copy" => "<h2>Example narrow content block with quote</h2><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquya.</p>"
		],
		[
			"content_type" => "quote",
			"quote" => [
				"bg_colour" => "oatmeal",
				"background_overlay" => [
					"has_overlay" => true,
					"overlay_image" => [
						[
							"url" => "/resources/images/patterns/Butterfly_2.svg",
							"alt" => "A stylized version of the Kocho butterfly logo"
						]
					],
					"overlay_position" => "top_right"
				],
				"show_quote" => true,
				"quote_text" => "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
				"quote_source" => "Bob Ross",
				"quote_link" => [
					"url" => "https://www.google.co.uk"
				]
			]
		],
		[
			"content_type" => "text",
			"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquya.</p>"
		]
	]
]

Example narrow content block with quote

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquya.

quote icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Bob Ross

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquya.

Usage details:

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

Options used for this example:

[
	"content" => [
		[
			"content_type" => "text",
			"copy" => "<h2>Example narrow content block with image</h2><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquya.</p>"
		],
		[
			"content_type" => "image",
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"image_source" => [
				"title" => "google.com",
				"url" => "https://google.com"
			]
		]
	]
]

Example narrow content block with image

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquya.

kitten
Usage details:

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

Options used for this example:

[
	"content" => [
		[
			"content_type" => "accordion",
			"accordion" => [
				"accordion_text" => "<p>Sustainable and secure growth that powers your potential. Select an option below to see how we can help your business.</p>",
				"items" => [
					[
						"title" => "Identity",
						"text" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>"
					],
					[
						"title" => "Secure Workforce",
						"text" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>"
					],
					[
						"title" => "Secure Operation",
						"text" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>"
					],
					[
						"title" => "Innovation & Transformation",
						"text" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>"
					],
					[
						"title" => "Managed Services",
						"text" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>"
					]
				]
			]
		]
	]
]

Sustainable and secure growth that powers your potential. Select an option below to see how we can help your business.

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Usage details:

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

Options used for this example:

[
	"content" => [
		[
			"content_type" => "icons",
			"icons" => [
				"layout" => "grid",
				"heading_level" => "h2",
				"items" => [
					[
						"title" => "Example title here",
						"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?</p>",
						"image" => [
							"url" => "/resources/images/icons/brand-icons/id.svg",
							"alt" => "icon"
						]
					],
					[
						"title" => "Example title here",
						"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?</p>",
						"image" => [
							"url" => "/resources/images/icons/brand-icons/id.svg",
							"alt" => "icon"
						]
					],
					[
						"title" => "Example title here",
						"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?</p>",
						"image" => [
							"url" => "/resources/images/icons/brand-icons/id.svg",
							"alt" => "icon"
						]
					],
					[
						"title" => "Example title here",
						"copy" => "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?",
						"image" => [
							"url" => "/resources/images/icons/brand-icons/id.svg",
							"alt" => "icon"
						]
					]
				]
			]
		],
		[
			"content_type" => "text",
			"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquya.</p>"
		],
		[
			"content_type" => "icons",
			"icons" => [
				"layout" => "stacked",
				"heading_level" => "h2",
				"items" => [
					[
						"title" => "Example title here",
						"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?</p>",
						"image" => [
							"url" => "/resources/images/icons/brand-icons/id.svg",
							"alt" => "icon"
						]
					],
					[
						"title" => "Example title here",
						"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?</p>",
						"image" => [
							"url" => "/resources/images/icons/brand-icons/id.svg",
							"alt" => "icon"
						]
					],
					[
						"title" => "Example title here",
						"copy" => "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?",
						"image" => [
							"url" => "/resources/images/icons/brand-icons/id.svg",
							"alt" => "icon"
						]
					]
				]
			]
		]
	]
]
icon

Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?

icon

Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?

icon

Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?

icon

Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquya.

icon

Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?

icon

Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?

icon

Example title here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum blanditiis minima beatae similique nostrum odit cum reiciendis autem omnis aspernatur provident est architecto quasi, dolore nemo ut iste illum?
Usage details:

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

Options used for this example:

[
	"content" => [
		[
			"content_type" => "text",
			"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><ul><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</li><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</li><li>Lorem ipsum dolor sit amet, consetetur sadip scing elitr, sed diam nonumy.</li></ul>"
		]
	]
]

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
  • Lorem ipsum dolor sit amet, consetetur sadip scing elitr, sed diam nonumy.
Usage details:

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

Options used for this example:

[
	"content" => [
		[
			"content_type" => "text",
			"copy" => "<h2>Section title 1</h2><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><h2>Section title 2</h2><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><h2>Section title 3</h2><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><h2>Section title 4</h2><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><h2>Section title 5</h2><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>"
		]
	],
	"show_sidebar" => true,
	"sidebar" => [
		"sidebar_type" => "text",
		"anchor_to_existing_content" => true,
		"image" => [
			"url" => "/resources/images/pattern-library/logo-itv--large.png",
			"alt" => "itv"
		],
		"title" => "Company Name",
		"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>"
	]
]

Section title 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Section title 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Section title 3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Section title 4

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Section title 5

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Usage details:

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

Options used for this example:

[
	"content" => [
		[
			"content_type" => "text",
			"copy" => "<h2>Narrow content variant with form in sidebar</h2><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>"
		]
	],
	"show_sidebar" => true,
	"sidebar" => [
		"sidebar_type" => "form",
		"form" => [
			"form_title" => "Sign up now",
			"form_text" => "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
			"form" => "<!--[if lte IE 8]><script charset='utf-8' type='text/javascript' src='//js.hsforms.net/forms/v2-legacy.js'></script><![endif]--><script charset='utf-8' type='text/javascript' src='//js.hsforms.net/forms/v2.js'></script><script>hbspt.forms.create([region => 'na1',portalId => '5837364',formId => '2ba6a718-99af-4798-8910-e4864a90b417']);</script>"
		]
	]
]

Narrow content variant with form in sidebar

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Usage details:

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

Options used for this example:

[
	"content" => [
		[
			"content_type" => "text_button",
			"text_button" => [
				"text_align" => "left",
				"title" => "Title text",
				"title_size" => "h4",
				"copy" => "<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus atque, iusto neque eos cum asperiores aperiam omnis perspiciatis porro soluta error nemo aut fugiat similique ea minus quae provident voluptatum?</p>",
				"text_has_button" => true,
				"text_cta" => [
					"button_text" => "Primary Button",
					"button_style" => "primary-green",
					"button_type" => "link",
					"link_url" => "https://google.com"
				],
				"has_tag" => true,
				"tag_type" => "icon",
				"tag_text" => "Tag with Icon",
				"bg_colour" => "white"
			]
		],
		[
			"content_type" => "text",
			"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>"
		]
	],
	"show_sidebar" => true,
	"sidebar" => [
		"sidebar_type" => "form",
		"form" => [
			"form_title" => "Sign up now",
			"form_text" => "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
			"form" => "<!--[if lte IE 8]><script charset='utf-8' type='text/javascript' src='//js.hsforms.net/forms/v2-legacy.js'></script><![endif]--><script charset='utf-8' type='text/javascript' src='//js.hsforms.net/forms/v2.js'></script><script>hbspt.forms.create([region => 'na1',portalId => '5837364',formId => '2ba6a718-99af-4798-8910-e4864a90b417']);</script>"
		]
	]
]
tag icon

Tag with Icon

Title text

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus atque, iusto neque eos cum asperiores aperiam omnis perspiciatis porro soluta error nemo aut fugiat similique ea minus quae provident voluptatum?

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Usage details:

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

Options used for this example:

[
	"content" => [
		[
			"content_type" => "text",
			"copy" => "<h2>Narrow content variant with E-Guide download in sidebar</h2><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>"
		]
	],
	"show_sidebar" => true,
	"sidebar" => [
		"sidebar_type" => "post",
		"article_card" => [
			"article" => [
				"image" => [
					"url" => "/resources/images/pattern-library/kitten-green.jpg",
					"alt" => "kitten"
				],
				"title" => "The latest news and views on Microsoft technology - The Microsoft Tech Update (Ignite Special)",
				"featured_meta" => [
					"top" => "E-Guide | 4min read"
				],
				"form" => "<!--[if lte IE 8]><script charset='utf-8' type='text/javascript' src='//js.hsforms.net/forms/v2-legacy.js'></script><![endif]--><script charset='utf-8' type='text/javascript' src='//js.hsforms.net/forms/v2.js'></script><script>hbspt.forms.create([region => 'na1',portalId => '5837364',formId => '2ba6a718-99af-4798-8910-e4864a90b417']);</script>"
			]
		]
	]
]

Narrow content variant with E-Guide download in sidebar

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


Page Hero

Variants of heroes for non-homepage pages

Usage details:

To use this element: @include('.srv.www.kocho.co.uk.releases.20241219154942.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>"
	]
]
kitten

About us

This hero is the background image variant.

arrow icon arrow icon

Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis

Usage details:

To use this element: @include('.srv.www.kocho.co.uk.releases.20241219154942.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"
]
Funnel overlay image

Case Study | 6 min read

This hero is the background overlay variant.

Usage details:

To use this element: @include('.srv.www.kocho.co.uk.releases.20241219154942.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"
		]
	]
]
Lines overlay image

Case Study | 6 min read

This hero is the background overlay variant with an author avatar added.

kitten profile

Author Name

Author Company Position

Usage details:

To use this element: @include('.srv.www.kocho.co.uk.releases.20241219154942.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"
]
Butterfly overlay image

Case Study | 6 min read

This hero is the background overlay variant with a butterfly overlay

Usage details:

To use this element: @include('.srv.www.kocho.co.uk.releases.20241219154942.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>"
	]
]

About us

This hero is the split image variant.

arrow icon arrow icon

Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis

kitten
Usage details:

To use this element: @include('.srv.www.kocho.co.uk.releases.20241219154942.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"
	]
]

Mr Cat | CEO

An opening quote icon

This hero is the split image variant with quote text and the speaker's details.

`
kitten
Usage details:

To use this element: @include('.srv.www.kocho.co.uk.releases.20241219154942.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"
]

About us

This hero is the split card variant with a featured post landscape card to the right.

Usage details:

To use this element: @include('.srv.www.kocho.co.uk.releases.20241219154942.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"
		]
	]
]

Watch the video

This hero is the split video variant with a relatively long title.

placeholder overlay
play icon 00:00:33 Play Placeholder video video
Usage details:

To use this element: @include('.srv.www.kocho.co.uk.releases.20241219154942.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"
]
Funnel overlay image

Event

This hero is the background overlay variant for a single event page

calendar icon

Date & time

  • 20.01.2022 | 15.00
  • 21.01.2022 | 15.00
  • 22.01.2022 | 15.00
map pin icon

Location

London

SN1 EB3

ticket icon

Available seats

Usage details:

To use this element: @include('.srv.www.kocho.co.uk.releases.20241219154942.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"
]
Butterfly overlay image

Event

This hero is the background overlay variant for a single event page

calendar icon

Date & time

  • 20.01.2022 | 15.00
  • 21.01.2022 | 15.00
  • 22.01.2022 | 15.00
map pin icon

Location

London

SN1 EB3

ticket icon

Available seats

Usage details:

To use this element: @include('.srv.www.kocho.co.uk.releases.20241219154942.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"
]
Lines overlay image

Event

This hero is the background overlay variant for a single event page

calendar icon

Date & time

  • 20.01.2022 | 15.00
  • 21.01.2022 | 15.00
  • 22.01.2022 | 15.00
map pin icon

Location

London

SN1 EB3

ticket icon

Available seats


People

People row or grid with optional CTA

Usage details:

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

Options used for this example:

[
	"bg_colour" => "ebony",
	"title" => "The team driving you toward greater",
	"has_tag" => true,
	"tag_text" => "Our People",
	"tag_type" => "yellow-text",
	"text_align" => "left",
	"title_size" => "h2",
	"fetch_random" => true,
	"cta_url" => "#",
	"people" => [
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"url" => "#",
			"title" => "Anna Web",
			"job" => "Head of SOC"
		],
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"url" => "#",
			"title" => "Des Lekerman",
			"job" => "Chief Executive Officer"
		],
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"url" => "#",
			"title" => "Anna Web",
			"job" => "Head of SOC"
		],
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"url" => "#",
			"title" => "Des Lekerman",
			"job" => "Chief Executive Officer"
		],
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"url" => "#",
			"title" => "Anna Web",
			"job" => "Head of SOC"
		],
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"url" => "#",
			"title" => "Des Lekerman",
			"job" => "Chief Executive Officer"
		],
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"url" => "#",
			"title" => "Anna Web",
			"job" => "Head of SOC"
		],
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"url" => "#",
			"title" => "Des Lekerman",
			"job" => "Chief Executive Officer"
		],
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"url" => "#",
			"title" => "Anna Web",
			"job" => "Head of SOC"
		],
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"url" => "#",
			"title" => "Des Lekerman",
			"job" => "Chief Executive Officer"
		],
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"url" => "#",
			"title" => "Anna Web",
			"job" => "Head of SOC"
		],
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"url" => "#",
			"title" => "Des Lekerman",
			"job" => "Chief Executive Officer"
		],
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"url" => "#",
			"title" => "Anna Web",
			"job" => "Head of SOC"
		],
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"url" => "#",
			"title" => "Des Lekerman",
			"job" => "Chief Executive Officer"
		],
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"url" => "#",
			"title" => "Anna Web",
			"job" => "Head of SOC"
		],
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"url" => "#",
			"title" => "Des Lekerman",
			"job" => "Chief Executive Officer"
		]
	]
]
Usage details:

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

Options used for this example:

[
	"bg_colour" => "ebony",
	"title" => "You may also be interested in these lovely people",
	"has_tag" => true,
	"tag_text" => "Our People",
	"tag_type" => "yellow-text",
	"text_align" => "left",
	"title_size" => "h2",
	"fetch_random" => false,
	"people" => [
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"url" => "#",
			"title" => "Anna Web",
			"job" => "Head of SOC"
		],
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"url" => "#",
			"title" => "Des Lekerman",
			"job" => "Chief Executive Officer"
		],
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"url" => "#",
			"title" => "Anna Web",
			"job" => "Head of SOC"
		],
		[
			"image" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"headingLevel" => 3,
			"url" => "#",
			"title" => "Des Lekerman",
			"job" => "Chief Executive Officer"
		]
	]
]

Usage details:

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

Options used for this example:

[
	"title" => "Become greater.",
	"title_colour" => "lime",
	"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis</p>",
	"bg_image" => [
		"url" => "/resources/images/pattern-library/kitten-grey.jpg",
		"alt" => "kitten"
	],
	"button_type" => "video",
	"button_text" => "Watch the Kocho Film",
	"has_video" => false,
	"hero_video" => [
		"provider" => "youtube",
		"embed_code" => "pVE92TNDwUk",
		"title" => "Placeholder video",
		"caption" => "A video from YouTube",
		"sources" => [],
		"modal" => true
	]
]
kitten

Become greater.

arrow icon arrow icon

Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis

Usage details:

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

Options used for this example:

[
	"title" => "Video background example.",
	"title_colour" => "lime",
	"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis</p>",
	"bg_image" => [
		"url" => "/resources/images/pattern-library/kitten-grey.jpg",
		"alt" => "kitten"
	],
	"has_video" => true,
	"video" => [
		"source" => [
			"url" => "http://techslides.com/demos/sample-videos/small.mp4"
		]
	],
	"button_type" => "video",
	"button_text" => "Watch the Kocho Film",
	"hero_video" => [
		"provider" => "youtube",
		"embed_code" => "pVE92TNDwUk",
		"title" => "Placeholder video",
		"caption" => "A video from YouTube",
		"sources" => [],
		"modal" => true
	]
]
kitten

Video background example.

arrow icon arrow icon

Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis

Usage details:

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

Options used for this example:

[
	"title" => "Greater together.",
	"has_tag" => true,
	"tag_text" => "Careers",
	"title_colour" => "lime",
	"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis</p>",
	"bg_image" => [
		"url" => "/resources/images/pattern-library/kitten-grey.jpg",
		"alt" => "kitten"
	],
	"has_video" => false,
	"button_type" => "link",
	"button_text" => "Current Vacancies",
	"button_link" => [
		"url" => "#"
	]
]
kitten

Careers

Greater together.

arrow icon arrow icon

Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis


Quote/insert card

Card for quotes and other text with optional quote styling and citation

Usage details:

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

Options used for this example:

[
	"bg_colour" => "oatmeal",
	"has_overlay" => true,
	"show_quote" => true,
	"quote_text" => "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
	"quote_source" => "Bob Ross",
	"quote_link" => [
		"url" => "https://www.google.co.uk"
	]
]
Butterfly overlay image
quote icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Bob Ross
Usage details:

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

Options used for this example:

[
	"bg_colour" => "ebony",
	"background_overlay" => [
		"has_overlay" => false
	],
	"show_quote" => false,
	"quote_text" => "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
	"quote_source" => "",
	"quote_link" => [
		"url" => ""
	]
]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Share bar

A list of icons for sharing the current page to Facebook, LinkedIn, and Twitter

Usage details:

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

Options used for this example:

[
	"align_type" => "normal",
	"socials" => [
		[
			"name" => "Facebook",
			"url" => "https://www.facebook.com/sharer.php?u=https://www.google.co.uk",
			"img" => "/resources/images/pattern-library/facebook-oatmeal.svg"
		],
		[
			"name" => "Twitter",
			"url" => "https://twitter.com/intent/tweet?url=https://www.google.co.uk",
			"img" => "/resources/images/pattern-library/twitter-oatmeal.svg"
		],
		[
			"name" => "LinkedIn",
			"url" => "https://www.linkedin.com/shareArticle?mini=true&url=https://www.google.co.uk",
			"img" => "/resources/images/pattern-library/linkedin-oatmeal.svg"
		]
	],
	"tags" => [
		[
			"text" => "Secure Operation",
			"button" => false
		],
		[
			"text" => "Transformation",
			"button" => false
		],
		[
			"text" => "Yubico",
			"button" => false
		],
		[
			"text" => "Identity Governance",
			"button" => false
		]
	]
]
  • Secure Operation
  • Transformation
  • Yubico
  • Identity Governance

Speaker Cards

A block containing information about speakers and hosts.

Usage details:

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

Options used for this example:

[
	"block_type" => "expanded",
	"has_tag" => true,
	"tag_text" => "Speakers",
	"tag_type" => "yellow-text",
	"speakers" => [
		[
			"speaker" => [
				"version" => "closed",
				"profile" => [
					"url" => "/resources/images/pattern-library/kitten-grey.jpg",
					"alt" => "kitten"
				],
				"name" => "Jane Bloggs",
				"subtitle" => "Guest",
				"closed_about" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis</p>",
				"social_icons" => [
					[
						"name" => "twitter",
						"url" => "https://twitter.com"
					],
					[
						"name" => "linkedin",
						"url" => "https://linkedin.com"
					]
				],
				"has_button" => true,
				"cta" => [
					"button_text" => "Visit Profile",
					"button_style" => "primary-green",
					"button_type" => "link",
					"link_url" => "https://google.com"
				]
			]
		],
		[
			"speaker" => [
				"version" => "closed",
				"profile" => [
					"url" => "/resources/images/pattern-library/kitten-grey.jpg",
					"alt" => "kitten"
				],
				"name" => "Claire Speaker",
				"subtitle" => "Guest",
				"closed_about" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim.</p>",
				"expanded_about" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis</p>",
				"social_icons" => [
					[
						"name" => "twitter",
						"url" => "https://twitter.com"
					],
					[
						"name" => "linkedin",
						"url" => "https://linkedin.com"
					]
				]
			]
		],
		[
			"speaker" => [
				"version" => "expanded",
				"profile" => [
					"url" => "/resources/images/pattern-library/kitten-grey.jpg",
					"alt" => "kitten"
				],
				"name" => "Joe Speaker",
				"subtitle" => "Guest",
				"closed_about" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim.</p>",
				"expanded_about" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis</p>"
			]
		]
	]
]
Butterfly overlay image

Speakers

kitten

Guest

Jane Bloggs

Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis

kitten

Guest

Claire Speaker

Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim.

Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis

kitten

Guest

Joe Speaker

Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis

Usage details:

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

Options used for this example:

[
	"block_type" => "expanded",
	"has_tag" => true,
	"tag_text" => "Speakers",
	"tag_type" => "yellow-text",
	"speakers" => [
		[
			"speaker" => [
				"version" => "expanded",
				"profile" => [
					"url" => "/resources/images/pattern-library/kitten-grey.jpg",
					"alt" => "kitten"
				],
				"name" => "Jane Bloggs",
				"subtitle" => "Guest",
				"closed_about" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim.</p>",
				"expanded_about" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis</p>",
				"social_icons" => [
					[
						"name" => "twitter",
						"url" => "https://twitter.com"
					],
					[
						"name" => "linkedin",
						"url" => "https://linkedin.com"
					]
				],
				"has_button" => true,
				"cta" => [
					"button_text" => "Visit Profile",
					"button_style" => "primary-green",
					"button_type" => "link",
					"link_url" => "https://google.com"
				]
			]
		],
		[
			"speaker" => [
				"version" => "expanded",
				"profile" => [
					"url" => "/resources/images/pattern-library/kitten-grey.jpg",
					"alt" => "kitten"
				],
				"name" => "Claire Speaker",
				"subtitle" => "Guest",
				"closed_about" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim.</p>",
				"expanded_about" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis</p>",
				"social_icons" => [
					[
						"name" => "twitter",
						"url" => "https://twitter.com"
					],
					[
						"name" => "linkedin",
						"url" => "https://linkedin.com"
					]
				]
			]
		],
		[
			"speaker" => [
				"version" => "expanded",
				"profile" => [
					"url" => "/resources/images/pattern-library/kitten-grey.jpg",
					"alt" => "kitten"
				],
				"name" => "Joe Speaker",
				"subtitle" => "Guest",
				"closed_about" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim.</p>",
				"expanded_about" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis</p>"
			]
		]
	]
]
Butterfly overlay image

Speakers

kitten

Guest

Jane Bloggs

Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis

kitten

Guest

Claire Speaker

Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis

kitten

Guest

Joe Speaker

Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis

Usage details:

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

Options used for this example:

[
	"block_type" => "single",
	"has_overlay" => true,
	"overlay_image" => [
		"url" => "/resources/images/patterns/Butterfly_1.png",
		"alt" => "butterfly"
	],
	"speaker" => [
		"version" => "expanded",
		"profile" => [
			"url" => "/resources/images/pattern-library/kitten-grey.jpg",
			"alt" => "kitten"
		],
		"name" => "Jane Bloggs",
		"subtitle" => "Guest",
		"closed_about" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim.</p>",
		"expanded_about" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis</p>",
		"social_icons" => [
			[
				"name" => "twitter",
				"url" => "https://twitter.com"
			],
			[
				"name" => "linkedin",
				"url" => "https://linkedin.com"
			]
		],
		"has_button" => true,
		"cta" => [
			"button_text" => "Visit Profile",
			"button_style" => "primary-green",
			"button_type" => "link",
			"link_url" => "https://google.com"
		]
	]
]
Butterfly overlay image
kitten

Guest

Jane Bloggs

Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis


Stat block

A block for key stats with colour and layout options

Usage details:

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

Options used for this example:

[
	"stats_align" => "center",
	"stats_theme" => "lemon",
	"stats" => [
		[
			"stat_icon" => "98%",
			"stat_desc" => "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
		],
		[
			"stat_icon" => "100+",
			"stat_desc" => "Nullam ut justo a velit vehicula vulputate sit amet a nisi."
		]
	]
]

98%

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

100+

Nullam ut justo a velit vehicula vulputate sit amet a nisi.

Usage details:

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

Options used for this example:

[
	"stats_align" => "center",
	"stats_theme" => "ebony",
	"stats_icon_colour" => "lemon",
	"stats" => [
		[
			"stat_icon" => "98%",
			"stat_desc" => "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
		],
		[
			"stat_icon" => "100+",
			"stat_desc" => "Nullam ut justo a velit vehicula vulputate sit amet a nisi."
		],
		[
			"stat_icon" => "\u00a345M",
			"stat_desc" => "Mauris in dui mi. Donec finibus egestas nulla sed tempus. "
		],
		[
			"stat_icon" => "47",
			"stat_desc" => "Fusce pellentesque pellentesque mauris in luctus. Curabitur ut ligula pulvinar, volutpat nunc sit amet, feugiat libero."
		]
	]
]

98%

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

100+

Nullam ut justo a velit vehicula vulputate sit amet a nisi.

£45M

Mauris in dui mi. Donec finibus egestas nulla sed tempus.

47

Fusce pellentesque pellentesque mauris in luctus. Curabitur ut ligula pulvinar, volutpat nunc sit amet, feugiat libero.

Usage details:

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

Options used for this example:

[
	"stats_align" => "right",
	"stats_theme" => "ebony",
	"stats_icon_colour" => "lime",
	"stats" => [
		[
			"stat_icon" => "98%",
			"stat_desc" => "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
		],
		[
			"stat_icon" => "100+",
			"stat_desc" => "Nullam ut justo a velit vehicula vulputate sit amet a nisi."
		],
		[
			"stat_icon" => "\u00a345M",
			"stat_desc" => "Mauris in dui mi. Donec finibus egestas nulla sed tempus. "
		]
	]
]

98%

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

100+

Nullam ut justo a velit vehicula vulputate sit amet a nisi.

£45M

Mauris in dui mi. Donec finibus egestas nulla sed tempus.


Usage details:

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

Options used for this example:

[]

Table

Table used for generic purposes or events agenda

Usage details:

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

Options used for this example:

[
	"bg_colour" => "white",
	"has_tag" => true,
	"tag_type" => "icon",
	"tag_text" => "Agenda",
	"text_align" => "left",
	"title" => "Event agenda",
	"copy" => "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.",
	"body_rows" => [
		[
			"cells" => [
				[
					"element" => "th",
					"text" => "asdasdasda"
				],
				[
					"element" => "th",
					"text" => "asdasdasda"
				],
				[
					"element" => "th",
					"text" => "asdasdasda"
				],
				[
					"element" => "th",
					"text" => "asdasdasda"
				]
			]
		],
		[
			"cells" => [
				[
					"element" => "td",
					"text" => "10:00 - 10:30",
					"type" => "tag-text"
				],
				[
					"element" => "td",
					"text" => "Making the switch to modern authentication for seamless and secure access."
				],
				[
					"element" => "td",
					"text" => "The power of Microsoft Teams for remote worker productivity"
				],
				[
					"element" => "td",
					"text" => "Tools and solutions to protect sensitive files and guard against data loss. Including Azure Information Protection demonstration."
				]
			]
		],
		[
			"cells" => [
				[
					"element" => "td",
					"text" => "10:00 - 10:30",
					"type" => "tag-text"
				],
				[
					"element" => "td",
					"text" => "Tools and solutions to detect, monitor and manage threats in real time. Including Microsoft Threat Protection demonstration."
				],
				[
					"element" => "td",
					"text" => "Break for lunch."
				],
				[
					"element" => "td",
					"text" => "Tools and solutions to protect."
				]
			]
		],
		[
			"cells" => [
				[
					"element" => "td",
					"text" => "10:00 - 10:30",
					"type" => "tag-text"
				],
				[
					"element" => "td",
					"text" => "Tools and solutions to detect, monitor and manage threats in real time. Including Microsoft Threat Protection demonstration."
				],
				[
					"element" => "td",
					"text" => "Break for lunch."
				],
				[
					"element" => "td",
					"text" => "Tools and solutions to protect."
				]
			]
		]
	]
]
tag icon

Agenda

Event agenda

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.

asdasdasda

asdasdasda

asdasdasda

asdasdasda

10:00 - 10:30

Making the switch to modern authentication for seamless and secure access.

The power of Microsoft Teams for remote worker productivity

Tools and solutions to protect sensitive files and guard against data loss. Including Azure Information Protection demonstration.

10:00 - 10:30

Tools and solutions to detect, monitor and manage threats in real time. Including Microsoft Threat Protection demonstration.

Break for lunch.

Tools and solutions to protect.

10:00 - 10:30

Tools and solutions to detect, monitor and manage threats in real time. Including Microsoft Threat Protection demonstration.

Break for lunch.

Tools and solutions to protect.


Usage details:

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

Options used for this example:

[
	"title" => "An insight into our world.",
	"post_types" => [
		"case-studies",
		"events"
	],
	"filters" => [
		[
			"title" => "What we do",
			"tags" => [
				[
					"text" => "Digital Transformation",
					"value" => "Digital-Transformation"
				],
				[
					"text" => "ID Management",
					"value" => "ID-Management"
				],
				[
					"text" => "On-site Support",
					"value" => "On-site-Support"
				]
			]
		],
		[
			"title" => "Testing",
			"tags" => [
				[
					"text" => "Test",
					"value" => "Test"
				]
			]
		]
	]
]

An insight into our world.

What we do

Testing


Usage details:

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

Options used for this example:

[
	"tall_img" => "/"
]

Text/Image/Cards block

A block that displays text and optional image side by side on desktop and stacked on mobile, with optional cards that display beneath.

Usage details:

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

Options used for this example:

[
	"title_size" => "title_normal",
	"image_position" => "left",
	"variant" => "wide",
	"shape" => "half",
	"tag" => "What we do",
	"title" => "**Greatness** is small things done well.",
	"title_highlight_colour" => "lime",
	"bg_colour" => "ebony",
	"content_type" => "accordion",
	"background_logo" => true,
	"standfirst_width" => "full",
	"accordion" => [
		"accordion_text" => "<p>Sustainable and secure growth that powers your potential. **Select an option below** to see how we can help your business.</p>",
		"text_highlight_colour" => "lemon",
		"items" => [
			[
				"title" => "Identity",
				"text" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>"
			],
			[
				"title" => "Secure Workforce",
				"text" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>"
			],
			[
				"title" => "Secure Operation",
				"text" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>"
			],
			[
				"title" => "Innovation & Transformation",
				"text" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>"
			],
			[
				"title" => "Managed Services",
				"text" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>"
			]
		]
	],
	"include_image" => true,
	"image" => [
		"url" => "/app/themes/sage10/resources/images/pattern-library/kitten-stretch.jpg",
		"alt" => "kitten"
	]
]
Usage details:

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

Options used for this example:

[
	"title_size" => "title_normal",
	"variant" => "default",
	"bg_colour" => "ebony",
	"standfirst_width" => "full",
	"text" => [
		"text_align" => "left",
		"title" => "A short heading to accompany some key tech-focused points",
		"title_size" => "h2",
		"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>",
		"has_tag" => true,
		"tag_type" => "icon",
		"tag_text" => "At a glance",
		"lower_standfirst_width" => "half",
		"lower_copy_width" => "half",
		"title_layout" => "half"
	],
	"include_image" => false,
	"include_cards" => true,
	"badges" => [
		"default_colour" => "white",
		"per_line" => 4,
		"badges" => [
			[
				"title" => "The first step to our industry leading approach goes here",
				"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit eos explicabo, assumenda ab a rem tempora earum modi repellendus cupiditate, nam exercitationem, autem minima blanditiis tenetur praesentium quia quos neque.</p>",
				"icon" => [
					"url" => "/resources/images/pattern-library/circle.png",
					"alt" => "icon"
				],
				"link" => [
					"title" => "Learn More",
					"url" => "#"
				]
			],
			[
				"title" => "This here is the second step to our industry leading approach over a few lines",
				"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit eos explicabo, assumenda ab a rem tempora earum modi repellendus cupiditate, nam exercitationem, autem minima blanditiis tenetur praesentium quia quos neque.</p>",
				"icon" => [
					"url" => "/resources/images/pattern-library/circle.png",
					"alt" => "icon"
				],
				"link" => [
					"title" => "Learn More",
					"url" => "#"
				]
			],
			[
				"title" => "The third and almost final step of our industry leading approach goes here",
				"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit eos explicabo, assumenda ab a rem tempora earum modi repellendus cupiditate, nam exercitationem, autem minima blanditiis tenetur praesentium quia quos neque.</p>",
				"icon" => [
					"url" => "/resources/images/pattern-library/circle.png",
					"alt" => "icon"
				],
				"link" => [
					"title" => "Learn More",
					"url" => "#"
				]
			],
			[
				"title" => "The fourth step to our approach is shortest",
				"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit eos explicabo, assumenda ab a rem tempora earum modi repellendus cupiditate, nam exercitationem, autem minima blanditiis tenetur praesentium quia quos neque.</p>",
				"icon" => [
					"url" => "/resources/images/pattern-library/circle.png",
					"alt" => "icon"
				],
				"link" => [
					"title" => "Learn More",
					"url" => "#"
				]
			]
		]
	]
]
Usage details:

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

Options used for this example:

[
	"title_size" => "title_normal",
	"variant" => "narrow",
	"bg_colour" => "white",
	"standfirst_width" => "full",
	"text" => [
		"text_align" => "left",
		"title" => "A short heading to accompany some key tech-focused points",
		"title_size" => "h2",
		"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>",
		"has_tag" => true,
		"tag_type" => "icon",
		"tag_text" => "At a glance",
		"lower_standfirst_width" => "half",
		"lower_copy_width" => "half",
		"title_layout" => "half"
	],
	"include_cards" => true,
	"card_position" => "side",
	"badges" => [
		"default_colour" => "oatmeal",
		"default_highlight_colour" => "lime",
		"per_line" => 4,
		"badges" => [
			[
				"title" => "Tech Name / Title",
				"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>",
				"link" => [
					"title" => "",
					"url" => "#"
				]
			],
			[
				"title" => "Tech Name / Title",
				"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>",
				"link" => [
					"title" => "",
					"url" => "#"
				]
			]
		]
	]
]
tag icon

At a glance

A short heading to accompany some key tech-focused points

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Usage details:

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

Options used for this example:

[
	"title_size" => "title_normal",
	"standfirst_width" => "full",
	"variant" => "default",
	"bg_colour" => "oatmeal",
	"text" => [
		"text_align" => "left",
		"title" => "A short heading to accompany some key industry-focused points",
		"title_layout" => "half",
		"title_size" => "h2",
		"copy" => "",
		"has_tag" => true,
		"tag_type" => "icon",
		"tag_text" => "Our Approach",
		"lower_standfirst_width" => "half",
		"lower_copy_width" => "half"
	],
	"include_cards" => true,
	"card_position" => "under",
	"badges" => [
		"default_colour" => "white",
		"default_highlight_colour" => "lime",
		"per_line" => 3,
		"badges" => [
			[
				"title" => "A heading goes here talking about a key aspect of this specific solution over a few lines",
				"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>",
				"link" => [
					"title" => "",
					"url" => "#"
				]
			],
			[
				"title" => "A heading goes here talking about a key aspect of this specific solution over a few lines",
				"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>",
				"link" => [
					"title" => "",
					"url" => "#"
				]
			],
			[
				"title" => "A heading goes here talking about a key aspect of this specific solution over a few lines",
				"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>",
				"link" => [
					"title" => "",
					"url" => "#"
				]
			]
		]
	]
]
Usage details:

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

Options used for this example:

[
	"title_size" => "title_normal",
	"standfirst_width" => "full",
	"image_position" => "right",
	"variant" => "default",
	"bg_colour" => "white",
	"text" => [
		"text_align" => "left",
		"title" => "A short heading about our secure workforce goes here",
		"title_size" => "h2",
		"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>",
		"has_tag" => true,
		"tag_type" => "icon",
		"tag_text" => "Innovation & Transformation",
		"lower_standfirst_width" => "half",
		"lower_copy_width" => "half",
		"title_layout" => "half"
	],
	"include_image" => true,
	"image" => [
		"url" => "/app/themes/sage10/resources/images/pattern-library/kitten-stretch.jpg",
		"alt" => "kitten"
	]
]
tag icon

Innovation & Transformation

A short heading about our secure workforce goes here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Usage details:

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

Options used for this example:

[
	"title_size" => "title_normal",
	"standfirst_width" => "full",
	"image_position" => "left",
	"variant" => "default",
	"bg_colour" => "white",
	"text" => [
		"text_align" => "left",
		"title" => "A short heading about our secure workforce goes here",
		"title_size" => "h2",
		"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>",
		"has_tag" => true,
		"tag_type" => "icon",
		"tag_text" => "Innovation & Transformation",
		"lower_standfirst_width" => "half",
		"lower_copy_width" => "half",
		"title_layout" => "half"
	],
	"include_image" => true,
	"image" => [
		"url" => "/app/themes/sage10/resources/images/pattern-library/kitten-stretch.jpg",
		"alt" => "kitten"
	]
]
tag icon

Innovation & Transformation

A short heading about our secure workforce goes here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Usage details:

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

Options used for this example:

[
	"title_size" => "title_large",
	"standfirst_width" => "full",
	"image_position" => "left",
	"variant" => "wide",
	"shape" => "half",
	"bg_colour" => "white",
	"text" => [
		"text_align" => "left",
		"title" => "Thinking of joining us?",
		"title_size" => "h2",
		"copy" => "<p>You're in the right place!</p><p> Here you'll find everything you need to know about life at ThirdSpace and our current career opportunities. A few members of our team have also shared their experiences of their career journeys with us. Where could yours take you?</p><p> Want to find out more? Get in touch \u2013 we're more than happy to answer your questions.</p>",
		"has_tag" => true,
		"tag_type" => "icon",
		"tag_text" => "Join Us",
		"lower_standfirst_width" => "half",
		"lower_copy_width" => "half",
		"title_layout" => "half"
	],
	"include_image" => true,
	"image" => [
		"url" => "/app/themes/sage10/resources/images/pattern-library/kitten-stretch.jpg",
		"alt" => "kitten"
	]
]
tag icon

Join Us

Thinking of joining us?

You're in the right place!

Here you'll find everything you need to know about life at ThirdSpace and our current career opportunities. A few members of our team have also shared their experiences of their career journeys with us. Where could yours take you?

Want to find out more? Get in touch – we're more than happy to answer your questions.

Usage details:

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

Options used for this example:

[
	"title_size" => "title_normal",
	"standfirst_width" => "full",
	"image_position" => "right",
	"variant" => "wide",
	"shape" => "half",
	"bg_colour" => "white",
	"text" => [
		"text_align" => "left",
		"title" => "Thinking of joining us?",
		"title_size" => "h2",
		"title_layout" => "half",
		"lower_standfirst_width" => "half",
		"lower_copy_width" => "half",
		"copy" => "<p>You're in the right place!</p><p> Here you'll find everything you need to know about life at ThirdSpace and our current career opportunities. A few members of our team have also shared their experiences of their career journeys with us. Where could yours take you?</p><p> Want to find out more? Get in touch \u2013 we're more than happy to answer your questions.</p>"
	],
	"include_image" => true,
	"image" => [
		"url" => "/app/themes/sage10/resources/images/pattern-library/kitten-yawn.jpg",
		"alt" => "kitten"
	]
]

Thinking of joining us?

You're in the right place!

Here you'll find everything you need to know about life at ThirdSpace and our current career opportunities. A few members of our team have also shared their experiences of their career journeys with us. Where could yours take you?

Want to find out more? Get in touch – we're more than happy to answer your questions.

Usage details:

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

Options used for this example:

[
	"title_size" => "title_normal",
	"standfirst_width" => "full",
	"image_position" => "left",
	"variant" => "wide",
	"shape" => "full",
	"bg_colour" => "white",
	"text" => [
		"text_align" => "left",
		"title" => "Thinking of joining us?",
		"title_size" => "h2",
		"title_layout" => "half",
		"copy" => "<p>You're in the right place!</p><p> Here you'll find everything you need to know about life at ThirdSpace and our current career opportunities. A few members of our team have also shared their experiences of their career journeys with us. Where could yours take you?</p><p> Want to find out more? Get in touch \u2013 we're more than happy to answer your questions.</p>",
		"has_tag" => true,
		"lower_standfirst_width" => "half",
		"lower_copy_width" => "half",
		"tag_type" => "icon",
		"tag_text" => "Join Us"
	],
	"include_image" => true,
	"image" => [
		"url" => "/app/themes/sage10/resources/images/pattern-library/kitten-stretch.jpg",
		"alt" => "kitten"
	]
]
tag icon

Join Us

Thinking of joining us?

You're in the right place!

Here you'll find everything you need to know about life at ThirdSpace and our current career opportunities. A few members of our team have also shared their experiences of their career journeys with us. Where could yours take you?

Want to find out more? Get in touch – we're more than happy to answer your questions.

Usage details:

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

Options used for this example:

[
	"title_size" => "title_large",
	"standfirst_width" => "full",
	"image_position" => "right",
	"variant" => "wide",
	"shape" => "full",
	"bg_colour" => "white",
	"text" => [
		"text_align" => "left",
		"title" => "Thinking of joining us?",
		"title_size" => "h2",
		"copy" => "<p>You're in the right place!</p><p> Here you'll find everything you need to know about life at ThirdSpace and our current career opportunities. A few members of our team have also shared their experiences of their career journeys with us. Where could yours take you?</p><p> Want to find out more? Get in touch \u2013 we're more than happy to answer your questions.</p>",
		"lower_standfirst_width" => "half",
		"lower_copy_width" => "half",
		"title_layout" => "half"
	],
	"include_image" => true,
	"image" => [
		"url" => "/app/themes/sage10/resources/images/pattern-library/kitten-yawn.jpg",
		"alt" => "kitten"
	]
]

Thinking of joining us?

You're in the right place!

Here you'll find everything you need to know about life at ThirdSpace and our current career opportunities. A few members of our team have also shared their experiences of their career journeys with us. Where could yours take you?

Want to find out more? Get in touch – we're more than happy to answer your questions.

Usage details:

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

Options used for this example:

[
	"title_size" => "title_normal",
	"standfirst_width" => "full",
	"image_position" => "right",
	"variant" => "wide",
	"shape" => "full",
	"tag" => "Block tag",
	"standfirst" => "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur.",
	"bg_colour" => "ebony",
	"title" => "A short title about our secure workforce",
	"title_highlight_colour" => "lime",
	"title_layout" => "half",
	"text" => [
		"title" => "",
		"standfirst" => "",
		"lower_standfirst_width" => "half",
		"lower_copy_width" => "half",
		"title_layout" => "half",
		"icons" => [
			"heading_level" => "h2",
			"items" => [
				[
					"title" => "Example title here",
					"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur.</p>",
					"image" => [
						"url" => "/resources/images/icons/brand-icons/id.svg",
						"alt" => "icon"
					]
				],
				[
					"title" => "Example title here",
					"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur.</p>",
					"image" => [
						"url" => "/resources/images/icons/brand-icons/id.svg",
						"alt" => "icon"
					]
				],
				[
					"title" => "Example title here",
					"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur.</p>",
					"image" => [
						"url" => "/resources/images/icons/brand-icons/id.svg",
						"alt" => "icon"
					]
				]
			]
		]
	],
	"include_image" => true,
	"image" => [
		"url" => "/app/themes/sage10/resources/images/pattern-library/kitten-yawn.jpg",
		"alt" => "kitten"
	]
]

Block tag

A short title about our secure workforce

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur.
icon

Example title here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur.

icon

Example title here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur.

icon

Example title here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur.

Usage details:

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

Options used for this example:

[
	"title_size" => "title_normal",
	"standfirst_width" => "full",
	"image_position" => "right",
	"bg_colour" => "white",
	"variant" => "narrow",
	"text" => [
		"text_align" => "left",
		"title" => "Our commitment<br>to our people",
		"title_size" => "h2",
		"title_layout" => "half",
		"lower_standfirst_width" => "half",
		"lower_copy_width" => "half",
		"copy" => "<p>We're committed to ensuring the members of our team are empowered and encouraged to grow professionally and develop their skills.</p><p>Our need to adapt, evolve and freely experiment with new ideas is vital to our success, and we do everything we can to support individuals that share those ideals.</p>",
		"has_tag" => false
	],
	"include_image" => true,
	"image" => [
		"url" => "/app/themes/sage10/resources/images/pattern-library/kitten-green.jpg",
		"alt" => "kitten"
	]
]

Our commitment
to our people

We're committed to ensuring the members of our team are empowered and encouraged to grow professionally and develop their skills.

Our need to adapt, evolve and freely experiment with new ideas is vital to our success, and we do everything we can to support individuals that share those ideals.

Usage details:

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

Options used for this example:

[
	"title_size" => "title_normal",
	"standfirst_width" => "full",
	"image_position" => "left",
	"bg_colour" => "white",
	"variant" => "narrow",
	"text" => [
		"text_align" => "left",
		"title" => "Our commitment<br>to our people",
		"title_size" => "h2",
		"title_layout" => "half",
		"copy" => "<p>We're committed to ensuring the members of our team are empowered and encouraged to grow professionally and develop their skills.</p><p>Our need to adapt, evolve and freely experiment with new ideas is vital to our success, and we do everything we can to support individuals that share those ideals.</p>",
		"lower_standfirst_width" => "half",
		"lower_copy_width" => "half",
		"has_tag" => false
	],
	"include_image" => true,
	"image" => [
		"url" => "/app/themes/sage10/resources/images/pattern-library/kitten-wave.jpg",
		"alt" => "kitten"
	]
]

Our commitment
to our people

We're committed to ensuring the members of our team are empowered and encouraged to grow professionally and develop their skills.

Our need to adapt, evolve and freely experiment with new ideas is vital to our success, and we do everything we can to support individuals that share those ideals.

Usage details:

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

Options used for this example:

[
	"title_size" => "title_normal",
	"standfirst_width" => "full",
	"image_position" => "left",
	"variant" => "default",
	"bg_colour" => "white",
	"text" => [
		"text_align" => "left",
		"title" => "A short heading about our secure workforce goes here",
		"title_size" => "h2",
		"title_layout" => "half",
		"copy" => "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>",
		"has_tag" => true,
		"tag_type" => "icon",
		"lower_standfirst_width" => "half",
		"lower_copy_width" => "half",
		"tag_text" => "Innovation & Transformation"
	],
	"include_image" => true,
	"image" => [
		"url" => "/app/themes/sage10/resources/images/pattern-library/kitten-stretch.jpg",
		"alt" => "kitten"
	],
	"include_cards" => true,
	"card_position" => "side",
	"badges" => [
		"default_colour" => "ebony",
		"default_highlight_colour" => "lemon",
		"per_line" => 4,
		"badges" => [
			[
				"title" => "Badge title",
				"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>",
				"link" => [
					"title" => "Learn More",
					"url" => "#"
				]
			],
			[
				"title" => "Badge title",
				"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>",
				"link" => [
					"title" => "Learn More",
					"url" => "#"
				]
			],
			[
				"title" => "Badge title",
				"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>",
				"link" => [
					"title" => "Learn More",
					"url" => "#"
				]
			],
			[
				"title" => "Badge title",
				"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>",
				"link" => [
					"title" => "Learn More",
					"url" => "#"
				]
			]
		]
	]
]
tag icon

Innovation & Transformation

A short heading about our secure workforce goes here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Usage details:

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

Options used for this example:

[
	"title_size" => "title_normal",
	"standfirst_width" => "full",
	"image_position" => "right",
	"variant" => "wide",
	"bg_colour" => "white",
	"text" => [
		"text_align" => "left",
		"title" => "Thinking of joining us?",
		"title_size" => "h2",
		"title_layout" => "half",
		"lower_standfirst_width" => "half",
		"lower_copy_width" => "half",
		"copy" => "<p>You're in the right place!</p><p> Here you'll find everything you need to know about life at ThirdSpace and our current career opportunities. A few members of our team have also shared their experiences of their career journeys with us. Where could yours take you?</p>"
	],
	"include_image" => true,
	"image" => [
		"url" => "/app/themes/sage10/resources/images/pattern-library/kitten-yawn.jpg",
		"alt" => "kitten"
	],
	"include_cards" => true,
	"badges" => [
		"default_colour" => "oatmeal",
		"default_highlight_colour" => "lime",
		"per_line" => 3,
		"badges" => [
			[
				"title" => "Badge title",
				"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius rerum soluta</p>",
				"link" => [
					"title" => "Learn More",
					"url" => "#"
				]
			],
			[
				"title" => "Badge title",
				"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius rerum soluta</p>",
				"link" => [
					"title" => "Learn More",
					"url" => "#"
				]
			],
			[
				"title" => "Badge title",
				"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius rerum soluta</p>",
				"link" => [
					"title" => "Learn More",
					"url" => "#"
				]
			],
			[
				"title" => "Badge title",
				"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius rerum soluta</p>",
				"link" => [
					"title" => "Learn More",
					"url" => "#"
				]
			]
		]
	]
]

Thinking of joining us?

You're in the right place!

Here you'll find everything you need to know about life at ThirdSpace and our current career opportunities. A few members of our team have also shared their experiences of their career journeys with us. Where could yours take you?

Usage details:

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

Options used for this example:

[
	"title_size" => "title_normal",
	"standfirst_width" => "full",
	"image_position" => "left",
	"bg_colour" => "oatmeal",
	"variant" => "narrow",
	"text" => [
		"text_align" => "left",
		"title" => "Our commitment<br>to our people",
		"title_size" => "h2",
		"title_layout" => "half",
		"copy" => "<p>We're committed to ensuring the members of our team are empowered and encouraged to grow professionally and develop their skills.</p>",
		"lower_standfirst_width" => "half",
		"lower_copy_width" => "half",
		"has_tag" => false
	],
	"include_image" => true,
	"image" => [
		"url" => "/app/themes/sage10/resources/images/pattern-library/kitten-wave.jpg",
		"alt" => "kitten"
	],
	"include_cards" => true,
	"badges" => [
		"default_colour" => "white",
		"default_highlight_colour" => "ebony",
		"per_line" => 3,
		"badges" => [
			[
				"title" => "Badge title",
				"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>",
				"link" => [
					"title" => "Learn More",
					"url" => "#"
				]
			],
			[
				"title" => "Badge title",
				"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>",
				"link" => [
					"title" => "Learn More",
					"url" => "#"
				]
			],
			[
				"title" => "Badge title",
				"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>",
				"link" => [
					"title" => "Learn More",
					"url" => "#"
				]
			],
			[
				"title" => "Badge title",
				"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>",
				"link" => [
					"title" => "Learn More",
					"url" => "#"
				]
			],
			[
				"title" => "Badge title",
				"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>",
				"link" => [
					"title" => "Learn More",
					"url" => "#"
				]
			],
			[
				"title" => "Badge title",
				"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>",
				"link" => [
					"title" => "Learn More",
					"url" => "#"
				]
			]
		]
	]
]

Usage details:

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

Options used for this example:

[
	"bg_colour" => "lime",
	"layout" => "full",
	"has_overlay" => true,
	"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit aliquet egestas parturient.<strong> Semper placerat consequat etiam</strong></p>",
	"cta" => [
		"button_text" => "Primary Button",
		"button_type" => "link",
		"link_url" => "https://google.com",
		"button_style" => "primary-ebony"
	]
]
Butterfly overlay image

Lorem ipsum dolor sit amet consectetur adipiscing elit aliquet egestas parturient. Semper placerat consequat etiam

Usage details:

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

Options used for this example:

[
	"bg_colour" => "lemon",
	"layout" => "contain",
	"has_overlay" => true,
	"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit aliquet egestas parturient.</p>",
	"cta" => [
		"button_text" => "Primary Button",
		"button_type" => "link",
		"link_url" => "https://google.com",
		"button_style" => "primary-ebony"
	]
]
Butterfly overlay image

Lorem ipsum dolor sit amet consectetur adipiscing elit aliquet egestas parturient.


Usage details:

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

Options used for this example:

[
	"text_align" => "left",
	"title" => "Title text",
	"title_size" => "h2",
	"copy" => "<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus atque, iusto neque eos cum asperiores aperiam omnis perspiciatis porro soluta error nemo aut fugiat similique ea minus quae provident voluptatum?</p>",
	"text_has_button" => true,
	"text_cta" => [
		"button_text" => "Primary Button",
		"button_style" => "primary-green",
		"button_type" => "link",
		"link_url" => "https://google.com"
	],
	"bg_colour" => "oatmeal",
	"header" => [
		"has_tag" => true,
		"tag_type" => "text",
		"tag_text" => "Tag with Icon"
	],
	"form" => "<!--[if lte IE 8]><script charset='utf-8' type='text/javascript' src='//js.hsforms.net/forms/v2-legacy.js'></script><![endif]--><script charset='utf-8' type='text/javascript' src='//js.hsforms.net/forms/v2.js'></script><script>hbspt.forms.create([region => 'na1',portalId => '5837364',formId => '2ba6a718-99af-4798-8910-e4864a90b417']);</script>"
]

Tag with Icon

Title text

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus atque, iusto neque eos cum asperiores aperiam omnis perspiciatis porro soluta error nemo aut fugiat similique ea minus quae provident voluptatum?

Usage details:

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

Options used for this example:

[
	"text_align" => "left",
	"title" => "Title text",
	"title_size" => "h2",
	"copy" => "<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus atque, iusto neque eos cum asperiores aperiam omnis perspiciatis porro soluta error nemo aut fugiat similique ea minus quae provident voluptatum?</p>",
	"text_has_button" => true,
	"text_cta" => [
		"button_text" => "Primary Button",
		"button_style" => "primary-green",
		"button_type" => "link",
		"link_url" => "https://google.com"
	],
	"bg_colour" => "white",
	"header" => [
		"has_tag" => true,
		"tag_type" => "text",
		"tag_text" => "Tag with Icon"
	],
	"form" => "<!--[if lte IE 8]><script charset='utf-8' type='text/javascript' src='//js.hsforms.net/forms/v2-legacy.js'></script><![endif]--><script charset='utf-8' type='text/javascript' src='//js.hsforms.net/forms/v2.js'></script><script>hbspt.forms.create([region => 'na1',portalId => '5837364',formId => '2705141b-ffd6-4b42-809b-c3bedd559596']);</script>",
	"show_card" => true,
	"card_bg_colour" => "oatmeal",
	"card_tag_text" => "Get in touch",
	"card_links" => [
		[
			"text" => "0800 044 5009",
			"url" => "tel:0800445009"
		],
		[
			"text" => "[email protected]",
			"url" => "mailto:[email protected]"
		]
	],
	"card_social_text" => "Stay up to date:",
	"card_social_icons" => [
		[
			"name" => "Facebook",
			"url" => "https://www.facebook.com",
			"img" => [
				"url" => "/app/themes/sage10/resources/images/social-icons/facebook-ebony.svg"
			],
			"absolute" => false
		],
		[
			"name" => "Twitter",
			"url" => "https://www.twitter.com",
			"img" => [
				"url" => "/app/themes/sage10/resources/images/social-icons/twitter-ebony.svg"
			],
			"absolute" => false
		],
		[
			"name" => "LinkedIn",
			"url" => "https://www.linkedin.com",
			"img" => [
				"url" => "/app/themes/sage10/resources/images/social-icons/linkedin-ebony.svg"
			],
			"absolute" => false
		]
	]
]

Tag with Icon

Title text

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus atque, iusto neque eos cum asperiores aperiam omnis perspiciatis porro soluta error nemo aut fugiat similique ea minus quae provident voluptatum?

Get in touch

Stay up to date:


Usage details:

To use this element: @include('.srv.www.kocho.co.uk.releases.20241219154942.web.app.themes.sage10.app.View.......library.blocks.text-with-icon-columns.text-with-icon-columns', $options)

Options used for this example:

[
	"bg_colour" => "oatmeal",
	"has_tag" => true,
	"tag_text" => "Introduction",
	"tag_type" => "icon",
	"text_align" => "left",
	"title" => "Getting the job done",
	"title_size" => "h2",
	"icon_columns" => [
		[
			"title" => "Cloud based solutions provide total security and enhance productivity",
			"copy" => "Lorem ipsum dolor sit amet consectetur adipiscing elit nunc potenti congue, molestie nostra aptent viverra justo vestibulum per vehicula fusce.",
			"icon" => [
				"url" => "/resources/images/icons/brand-icons/id.svg",
				"alt" => "id icon"
			]
		],
		[
			"title" => "Project managers are no longer confined to the office - manage workflow on the move",
			"copy" => "Lorem ipsum dolor sit amet consectetur adipiscing elit nunc potenti congue, molestie nostra aptent viverra justo vestibulum per vehicula fusce.",
			"icon" => [
				"url" => "/resources/images/icons/brand-icons/rocket.svg",
				"alt" => "rocket icon"
			]
		],
		[
			"title" => "Approve job changes and foremen requests from any site, at any time",
			"copy" => "Lorem ipsum dolor sit amet consectetur adipiscing elit nunc potenti congue, molestie nostra aptent viverra justo vestibulum per vehicula fusce.",
			"icon" => [
				"url" => "/resources/images/icons/brand-icons/notebook.svg",
				"alt" => "notebook icon"
			]
		],
		[
			"title" => "Project managers are no longer confined to the office - manage workflow on the move",
			"copy" => "Lorem ipsum dolor sit amet consectetur adipiscing elit nunc potenti congue, molestie nostra aptent viverra justo vestibulum per vehicula fusce.",
			"icon" => [
				"url" => "/resources/images/icons/brand-icons/gift.svg",
				"alt" => "gift icon"
			]
		]
	]
]
tag icon

Introduction

Getting the job done

id icon

Cloud based solutions provide total security and enhance productivity

Lorem ipsum dolor sit amet consectetur adipiscing elit nunc potenti congue, molestie nostra aptent viverra justo vestibulum per vehicula fusce.

rocket icon

Project managers are no longer confined to the office - manage workflow on the move

Lorem ipsum dolor sit amet consectetur adipiscing elit nunc potenti congue, molestie nostra aptent viverra justo vestibulum per vehicula fusce.

notebook icon

Approve job changes and foremen requests from any site, at any time

Lorem ipsum dolor sit amet consectetur adipiscing elit nunc potenti congue, molestie nostra aptent viverra justo vestibulum per vehicula fusce.

gift icon

Project managers are no longer confined to the office - manage workflow on the move

Lorem ipsum dolor sit amet consectetur adipiscing elit nunc potenti congue, molestie nostra aptent viverra justo vestibulum per vehicula fusce.


Text with Image

A two column block with two layout options and a choice of either a case study card or custom text column

Usage details:

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

Options used for this example:

[
	"has_top_tag" => 0,
	"content_type" => "custom",
	"layout" => "img-left",
	"image_width" => "half",
	"articles" => [
		[
			"bg_colour" => "white",
			"layout" => "img-right",
			"has_top_tag" => 0,
			"top_tag_type" => "",
			"top_tag_text" => "",
			"top_title" => "",
			"content_type" => "case_study",
			"case_study_title_size" => "h2",
			"meta" => "Case Study | 12min Read",
			"icon" => [
				"url" => "/resources/images/pattern-library/logo-informa.png",
				"alt" => "the Informa logo"
			],
			"title" => "Devising a Stirling approach to threat protection in the higher education sector.",
			"cta" => [
				"button_text" => "Read More",
				"button_type" => "link",
				"link_url" => "https://google.com"
			],
			"image" => [
				"url" => "/resources/images/pattern-library/gettyimages-1327498437-2048x2048.jpeg",
				"alt" => "kitten"
			]
		],
		[
			"bg_colour" => "oatmeal",
			"layout" => "img-right",
			"has_top_tag" => 0,
			"top_tag_type" => "",
			"top_tag_text" => "",
			"top_title" => "",
			"content_type" => "custom",
			"custom" => [
				"has_tag" => true,
				"tag_type" => "icon",
				"tag_text" => "Location",
				"text_align" => "left",
				"title" => "Where to find us",
				"copy" => "<p>Lorem ipsum dolor sit amet, consetetur adipiscing elitr.</p><p><u>The Red Church,</u><br/>Redfield,</br>Bristol,</br>BS15 4LD</p>",
				"has_button" => true,
				"cta" => [
					"button_text" => "Get Directions",
					"button_type" => "link",
					"link_url" => "https://google.com"
				]
			],
			"image" => [
				"url" => "/resources/images/pattern-library/gettyimages-1338923760-2048x2048.jpeg",
				"alt" => "nighttime timelapse of winding hilltop road"
			]
		],
		[
			"bg-colour" => "white",
			"layout" => "img-left",
			"has_top_tag" => 1,
			"top_tag_type" => "icon",
			"top_tag_text" => "Featured",
			"top_title" => "The latest and greatest from our world",
			"content_type" => "case_study",
			"case_study_title_size" => "h3",
			"meta" => "Case Study | 12min Read",
			"icon" => [
				"url" => "/resources/images/pattern-library/logo-informa.png",
				"alt" => "the Informa logo"
			],
			"title" => "Devising a Stirling approach to threat protection in the higher education sector.",
			"cta" => [
				"button_text" => "Read More",
				"button_type" => "link",
				"link_url" => "https://google.com"
			],
			"image" => [
				"url" => "/resources/images/pattern-library/gettyimages-1327498437-2048x2048.jpeg",
				"alt" => "kitten"
			]
		]
	]
]

Usage details:

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

Options used for this example:

[
	"has_tag" => false,
	"tag_type" => "",
	"tag_text" => "",
	"block_title_size" => "small",
	"title" => "More than just a job",
	"title_colour" => "lemon",
	"body" => "At vero eos at accusam et justo duo dolore et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.",
	"bullet_icons" => false,
	"bullet_title_layout" => "inline",
	"bullet_title_colour" => "lemon",
	"bullet_colour" => "lemon",
	"standfirst" => false,
	"bullet_lists" => [
		[
			"bullet_title" => "Learn and develop everyday",
			"bullet_text" => "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper, diam sit amet mattis blandit, tortor tellus eleifend eros, feugiat tincidunt nunc metus nec magna. Sed rutrum laoreet nulla non vehicula. Maecenas scelerisque urna elit, non gravida est elementum nec. In non lectus finibus, consectetur eros in, tincidunt augue."
		],
		[
			"bullet_title" => "Enjoy a great work/life balance",
			"bullet_text" => "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper, diam sit amet mattis blandit, tortor tellus eleifend eros, feugiat tincidunt nunc metus nec magna. Sed rutrum laoreet nulla non vehicula. Maecenas scelerisque urna elit, non gravida est elementum nec. In non lectus finibus, consectetur eros in, tincidunt augue."
		],
		[
			"bullet_title" => "Celebrate your successes",
			"bullet_text" => "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper, diam sit amet mattis blandit, tortor tellus eleifend eros, feugiat tincidunt nunc metus nec magna. Sed rutrum laoreet nulla non vehicula. Maecenas scelerisque urna elit, non gravida est elementum nec. In non lectus finibus, consectetur eros in, tincidunt augue."
		]
	]
]

More than just a job

At vero eos at accusam et justo duo dolore et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

  • arrow icon

    Learn and develop everyday

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper, diam sit amet mattis blandit, tortor tellus eleifend eros, feugiat tincidunt nunc metus nec magna. Sed rutrum laoreet nulla non vehicula. Maecenas scelerisque urna elit, non gravida est elementum nec. In non lectus finibus, consectetur eros in, tincidunt augue.

  • arrow icon

    Enjoy a great work/life balance

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper, diam sit amet mattis blandit, tortor tellus eleifend eros, feugiat tincidunt nunc metus nec magna. Sed rutrum laoreet nulla non vehicula. Maecenas scelerisque urna elit, non gravida est elementum nec. In non lectus finibus, consectetur eros in, tincidunt augue.

  • arrow icon

    Celebrate your successes

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper, diam sit amet mattis blandit, tortor tellus eleifend eros, feugiat tincidunt nunc metus nec magna. Sed rutrum laoreet nulla non vehicula. Maecenas scelerisque urna elit, non gravida est elementum nec. In non lectus finibus, consectetur eros in, tincidunt augue.

Usage details:

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

Options used for this example:

[
	"has_tag" => true,
	"tag_type" => "yellow-text",
	"tag_text" => "Our Values",
	"title" => "The Kocho Way",
	"block_title_size" => "large",
	"title_colour" => "white",
	"body" => "",
	"standfirst" => false,
	"bullet_icons" => true,
	"bullet_title_layout" => "not_inline",
	"bullet_title_colour" => "lime",
	"bullet_colour" => "lemon",
	"bullet_lists" => [
		[
			"icon" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"bullet_title" => "Do what's right",
			"bullet_text" => "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper, diam sit amet mattis blandit, tortor tellus eleifend eros, feugiat tincidunt nunc metus nec magna. Sed rutrum laoreet nulla non vehicula. Maecenas scelerisque urna elit, non gravida est elementum nec. In non lectus finibus, consectetur eros in, tincidunt augue."
		],
		[
			"icon" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"bullet_title" => "Think greater",
			"bullet_text" => "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper, diam sit amet mattis blandit, tortor tellus eleifend eros, feugiat tincidunt nunc metus nec magna. Sed rutrum laoreet nulla non vehicula. Maecenas scelerisque urna elit, non gravida est elementum nec. In non lectus finibus, consectetur eros in, tincidunt augue."
		],
		[
			"icon" => [
				"url" => "/resources/images/pattern-library/kitten-green.jpg",
				"alt" => "kitten"
			],
			"bullet_title" => "Better together",
			"bullet_text" => "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper, diam sit amet mattis blandit, tortor tellus eleifend eros, feugiat tincidunt nunc metus nec magna. Sed rutrum laoreet nulla non vehicula. Maecenas scelerisque urna elit, non gravida est elementum nec. In non lectus finibus, consectetur eros in, tincidunt augue."
		]
	]
]

Our Values

The Kocho Way

  • kitten

    Do what's right

    arrow icon

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper, diam sit amet mattis blandit, tortor tellus eleifend eros, feugiat tincidunt nunc metus nec magna. Sed rutrum laoreet nulla non vehicula. Maecenas scelerisque urna elit, non gravida est elementum nec. In non lectus finibus, consectetur eros in, tincidunt augue.

  • kitten

    Think greater

    arrow icon

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper, diam sit amet mattis blandit, tortor tellus eleifend eros, feugiat tincidunt nunc metus nec magna. Sed rutrum laoreet nulla non vehicula. Maecenas scelerisque urna elit, non gravida est elementum nec. In non lectus finibus, consectetur eros in, tincidunt augue.

  • kitten

    Better together

    arrow icon

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper, diam sit amet mattis blandit, tortor tellus eleifend eros, feugiat tincidunt nunc metus nec magna. Sed rutrum laoreet nulla non vehicula. Maecenas scelerisque urna elit, non gravida est elementum nec. In non lectus finibus, consectetur eros in, tincidunt augue.


Two column quote

Two-column block with quote and optional person details, and a second column with either an image or a CTA with optional body text

Usage details:

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

Options used for this example:

[
	"bg_colour" => "ebony",
	"has_overlay" => true,
	"quote_body" => "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta mi dignissim ultricies suscipit. Nullam ut justo a velit vehicula vulputate sit amet a nisi.",
	"person_avatar" => [
		"has_person" => 1,
		"person_image" => [
			"url" => "/resources/images/pattern-library/gettyimages-1327498437-2048x2048.jpeg"
		],
		"person_name" => "John Smith",
		"person_position" => "CEO"
	],
	"toggle_logo" => 1,
	"quote_logo" => [
		"url" => "/resources/images/pattern-library/logo-yodel.png",
		"alt" => "The Yodel logo"
	],
	"col_2_options" => "cta",
	"col_2_cta" => [
		"cta_body" => "Need help becoming greater?",
		"cta" => [
			"button_text" => "Speak to an expert",
			"button_type" => "link",
			"link_url" => "https://google.com"
		]
	]
]
Lines overlay image
Speech mark icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta mi dignissim ultricies suscipit. Nullam ut justo a velit vehicula vulputate sit amet a nisi.

John Smith

CEO

Need help becoming greater?

Usage details:

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

Options used for this example:

[
	"bg_colour" => "green",
	"has_overlay" => true,
	"quote_body" => "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta mi dignissim ultricies suscipit. Nullam ut justo a velit vehicula vulputate sit amet a nisi.",
	"person_avatar" => [
		"has_person" => 1,
		"person_name" => "John Smith",
		"person_position" => "CEO"
	],
	"toggle_logo" => 0,
	"col_2_options" => "image",
	"image" => [
		"url" => "/resources/images/pattern-library/kitten-green.jpg",
		"alt" => "kitten"
	]
]
Butterfly overlay image
Speech mark icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta mi dignissim ultricies suscipit. Nullam ut justo a velit vehicula vulputate sit amet a nisi.

John Smith

CEO

kitten

Usage details:

To use this element: @include('.srv.www.kocho.co.uk.releases.20241219154942.web.app.themes.sage10.app.View.......library.blocks.two-column-text-with-quote.two-column-text-with-quote', $options)

Options used for this example:

[
	"bg_colour" => "oatmeal",
	"standfirst" => "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas ex id lacus dictum cursus. Cras efficitur fermentum quam, in finibus ligula sollicitudin quis. ",
	"content" => "<p>Adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis. Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis.</p><p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis.</p>",
	"social_icons" => [
		[
			"name" => "twitter",
			"url" => "https://www.twitter.com"
		],
		[
			"name" => "linkedin",
			"url" => "https://www.linkedin.com"
		]
	],
	"quote_text" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis.</p>"
]
circle mask
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas ex id lacus dictum cursus. Cras efficitur fermentum quam, in finibus ligula sollicitudin quis.

Adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis. Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis.

Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis.

Quote icon

Lorem ipsum dolor sit amet consectetur adipiscing elit dignissim dictum suspendisse, senectus netus mattis dapibus iaculis dictumst massa primis.


Usage details:

To use this element: @include('.srv.www.kocho.co.uk.releases.20241219154942.web.app.themes.sage10.app.View.......library.blocks.vertical-text-with-cta.vertical-text-with-cta', $options)

Options used for this example:

[
	"bg_colour" => "ebony",
	"has_overlay" => true,
	"has_tag" => true,
	"tag_type" => "yellow-text",
	"tag_text" => "Block Tag",
	"text_align" => "center",
	"title" => "Vertical Text with CTA Block",
	"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum ante vel vitae eget, vestibulum lobortis ut feugiat tristique est nisl felis ad sem. Volutpat dui nec tortor ligula, nascetur euismod orci.</p>",
	"has_button" => true,
	"cta" => [
		"button_text" => "Primary Button",
		"button_style" => "primary-green",
		"button_type" => "link",
		"link_url" => "https://google.com"
	]
]
Circle overlay image

Block Tag

Vertical Text with CTA Block

Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum ante vel vitae eget, vestibulum lobortis ut feugiat tristique est nisl felis ad sem. Volutpat dui nec tortor ligula, nascetur euismod orci.

Usage details:

To use this element: @include('.srv.www.kocho.co.uk.releases.20241219154942.web.app.themes.sage10.app.View.......library.blocks.vertical-text-with-cta.vertical-text-with-cta', $options)

Options used for this example:

[
	"bg_colour" => "oatmeal",
	"has_overlay" => true,
	"has_tag" => true,
	"tag_type" => "icon",
	"tag_text" => "Block Tag",
	"text_align" => "center",
	"title" => "Vertical Text with CTA Block",
	"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum ante vel vitae eget, vestibulum lobortis ut feugiat tristique est nisl felis ad sem. Volutpat dui nec tortor ligula, nascetur euismod orci.</p>"
]
Circle overlay image
tag icon

Block Tag

Vertical Text with CTA Block

Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum ante vel vitae eget, vestibulum lobortis ut feugiat tristique est nisl felis ad sem. Volutpat dui nec tortor ligula, nascetur euismod orci.

Usage details:

To use this element: @include('.srv.www.kocho.co.uk.releases.20241219154942.web.app.themes.sage10.app.View.......library.blocks.vertical-text-with-cta.vertical-text-with-cta', $options)

Options used for this example:

[
	"bg_colour" => "white",
	"has_tag" => true,
	"tag_type" => "icon",
	"tag_text" => "Block Tag",
	"text_align" => "left",
	"title" => "Left Aligned",
	"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum ante vel vitae eget, vestibulum lobortis ut feugiat tristique est nisl felis ad sem. Volutpat dui nec tortor ligula, nascetur euismod orci.</p>",
	"has_button" => true,
	"cta" => [
		"button_text" => "Primary Button",
		"button_style" => "primary-green",
		"button_type" => "link",
		"link_url" => "https://google.com"
	]
]
tag icon

Block Tag

Left Aligned

Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum ante vel vitae eget, vestibulum lobortis ut feugiat tristique est nisl felis ad sem. Volutpat dui nec tortor ligula, nascetur euismod orci.

Usage details:

To use this element: @include('.srv.www.kocho.co.uk.releases.20241219154942.web.app.themes.sage10.app.View.......library.blocks.vertical-text-with-cta.vertical-text-with-cta', $options)

Options used for this example:

[
	"bg_colour" => "white",
	"has_tag" => false,
	"tag_type" => "",
	"tag_text" => "",
	"text_align" => "left",
	"title" => "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor indivunt ut labore et dolore magna aliquyam erat.",
	"title_size" => "h5",
	"copy" => "<p>Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum ante vel vitae eget, vestibulum lobortis ut feugiat tristique est nisl felis ad sem. Volutpat dui nec tortor ligula, nascetur euismod orci.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor indivunt ut labore et dolore magna aliquyam erat.</p>",
	"has_button" => true,
	"cta" => [
		"button_text" => "Download",
		"button_style" => "primary-green",
		"button_type" => "link",
		"link_url" => "https://google.com"
	]
]
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor indivunt ut labore et dolore magna aliquyam erat.

Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum ante vel vitae eget, vestibulum lobortis ut feugiat tristique est nisl felis ad sem. Volutpat dui nec tortor ligula, nascetur euismod orci.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor indivunt ut labore et dolore magna aliquyam erat.


Usage details:

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

Options used for this example:

[
	"text" => [
		"text_align" => "left",
		"title" => "Title text",
		"title_size" => "h3",
		"copy" => "<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus atque, iusto neque eos cum asperiores aperiam omnis perspiciatis porro soluta error nemo aut fugiat similique ea minus quae provident voluptatum?</p>",
		"text_has_button" => false,
		"text_cta" => "",
		"has_tag" => true,
		"tag_type" => "icon",
		"tag_text" => "Tag with Icon",
		"bg_colour" => "white"
	],
	"provider" => "youtube",
	"embed_code" => "pVE92TNDwUk",
	"title" => "Placeholder video",
	"caption" => "",
	"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"
	]
]
tag icon

Tag with Icon

Title text

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus atque, iusto neque eos cum asperiores aperiam omnis perspiciatis porro soluta error nemo aut fugiat similique ea minus quae provident voluptatum?

placeholder overlay
play icon 00:00:33 Play Placeholder video video