Vertical timeline
A vertical timeline with space for a supertitle, optional top copy, timeline cards and images
A vertical timeline with space for a supertitle, optional top copy, timeline cards and images
To use this element: @include('.srv.www.cerbaresearch.com.releases.20240417123507.web.app.themes.cerba.resources....library.blocks.vertical-timeline.vertical-timeline', $options)
Options used for this example:
[
"title" => "Lorem ipsum dolor sit amet",
"top_copy" => "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec luctus libero. Vestibulum egestas maximus lacus. Maecenas finibus quam vel euismod posuere. Aliquam odio lorem, posuere vehicula efficitur eu, lobortis quis est.",
"cards" => [
[
"card_marker" => "Stage 1",
"card_title" => "Lorem ipsum dolor sit amet, consectetur",
"card_body" => "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec luctus libero. Vestibulum egestas maximus lacus. Maecenas finibus quam vel euismod posuere. Aliquam odio lorem, posuere vehicula efficitur eu, lobortis quis est.",
"card_img" => [
"url" => "/assets/images/pattern-library/kitten-grey.jpg"
]
],
[
"card_marker" => "Stage 2",
"card_title" => "Lorem ipsum dolor sit amet, consectetur",
"card_body" => "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec luctus libero. Vestibulum egestas maximus lacus. Maecenas finibus quam vel euismod posuere. Aliquam odio lorem, posuere vehicula efficitur eu, lobortis quis est.",
"card_img" => [
"url" => "/assets/images/pattern-library/kitten-green.jpg"
]
],
[
"card_marker" => "Stage 3",
"card_title" => "Lorem ipsum dolor sit amet, consectetur",
"card_body" => "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec luctus libero. Vestibulum egestas maximus lacus. Maecenas finibus quam vel euismod posuere. Aliquam odio lorem, posuere vehicula efficitur eu, lobortis quis est.",
"card_img" => [
"url" => "/assets/images/pattern-library/kitten-yawn.jpg"
]
]
]
]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec luctus libero. Vestibulum egestas maximus lacus. Maecenas finibus quam vel euismod posuere. Aliquam odio lorem, posuere vehicula efficitur eu, lobortis quis est.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec luctus libero. Vestibulum egestas maximus lacus. Maecenas finibus quam vel euismod posuere. Aliquam odio lorem, posuere vehicula efficitur eu, lobortis quis est.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec luctus libero. Vestibulum egestas maximus lacus. Maecenas finibus quam vel euismod posuere. Aliquam odio lorem, posuere vehicula efficitur eu, lobortis quis est.