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.20241029111403.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