Tab switcher
A block for displaying content under tab headings
A block for displaying content under tab headings
To use this element: @include('.srv.www.cerbaresearch.com.releases.20240417123507.web.app.themes.cerba.resources....library.blocks.tab-switcher.tab-switcher', $options)
Options used for this example:
[
"supertitle" => "Lorem ipsum dolor sit amet",
"tabs" => [
[
"tab_title" => "Tab 1",
"tab_content_title" => "A longer title for the tab content",
"tab_body" => "<p>Nunc massa nunc, congue et velit id, accumsan rhoncus enim. Proin ultricies feugiat enim, id fringilla tortor cursus nec. Fusce lacinia mattis risus vel lacinia. Suspendisse ac facilisis ex. Morbi eu turpis nibh.</p>",
"tab_caption" => "<p><strong>Optional caption => </strong>Maecenas tempus justo sed enim finibus mattis. </p>",
"image" => [
"url" => "/assets/images/pattern-library/kitten-green.jpg"
]
],
[
"tab_title" => "Tab 2",
"tab_content_title" => "A longer title for the tab content",
"tab_body" => "<p>Nunc massa nunc, congue et velit id, accumsan rhoncus enim. Proin ultricies feugiat enim, id fringilla tortor cursus nec. Fusce lacinia mattis risus vel lacinia. Suspendisse ac facilisis ex. Morbi eu turpis nibh.</p>",
"tab_caption" => "<p><strong>Optional caption => </strong>Maecenas tempus justo sed enim finibus mattis. </p>",
"image" => [
"url" => "/assets/images/pattern-library/kitten-grey.jpg"
]
],
[
"tab_title" => "Tab 3",
"tab_content_title" => "A longer title for the tab content",
"tab_body" => "<p>Nunc massa nunc, congue et velit id, accumsan rhoncus enim. Proin ultricies feugiat enim, id fringilla tortor cursus nec. Fusce lacinia mattis risus vel lacinia. Suspendisse ac facilisis ex. Morbi eu turpis nibh.</p>",
"tab_caption" => "<p><strong>Optional caption => </strong>Maecenas tempus justo sed enim finibus mattis. </p>",
"image" => [
"url" => "/assets/images/pattern-library/kitten-yawn.jpg"
]
],
[
"tab_title" => "Tab 4",
"tab_content_title" => "A longer title for the tab content",
"tab_body" => "<p>Nunc massa nunc, congue et velit id, accumsan rhoncus enim. Proin ultricies feugiat enim, id fringilla tortor cursus nec. Fusce lacinia mattis risus vel lacinia. Suspendisse ac facilisis ex. Morbi eu turpis nibh.</p>",
"tab_caption" => "<p><strong>Optional caption => </strong>Maecenas tempus justo sed enim finibus mattis. </p>",
"image" => [
"url" => "/assets/images/pattern-library/kitten-green.jpg"
]
],
[
"tab_title" => "Tab 5",
"tab_content_title" => "A longer title for the tab content",
"tab_body" => "<p>Nunc massa nunc, congue et velit id, accumsan rhoncus enim. Proin ultricies feugiat enim, id fringilla tortor cursus nec. Fusce lacinia mattis risus vel lacinia. Suspendisse ac facilisis ex. Morbi eu turpis nibh.</p>",
"tab_caption" => "<p><strong>Optional caption => </strong>Maecenas tempus justo sed enim finibus mattis. </p>",
"image" => [
"url" => "/assets/images/pattern-library/kitten-grey.jpg"
]
],
[
"tab_title" => "Tab 6",
"tab_content_title" => "A longer title for the tab content",
"tab_body" => "<p>Nunc massa nunc, congue et velit id, accumsan rhoncus enim. Proin ultricies feugiat enim, id fringilla tortor cursus nec. Fusce lacinia mattis risus vel lacinia. Suspendisse ac facilisis ex. Morbi eu turpis nibh.</p>",
"tab_caption" => "<p><strong>Optional caption => </strong>Maecenas tempus justo sed enim finibus mattis. </p>",
"image" => [
"url" => "/assets/images/pattern-library/kitten-yawn.jpg"
]
],
[
"tab_title" => "Tab 7",
"tab_content_title" => "A longer title for the tab content",
"tab_body" => "<p>Nunc massa nunc, congue et velit id, accumsan rhoncus enim. Proin ultricies feugiat enim, id fringilla tortor cursus nec. Fusce lacinia mattis risus vel lacinia. Suspendisse ac facilisis ex. Morbi eu turpis nibh.</p>",
"tab_caption" => "<p><strong>Optional caption => </strong>Maecenas tempus justo sed enim finibus mattis. </p>",
"image" => [
"url" => "/assets/images/pattern-library/kitten-green.jpg"
]
],
[
"tab_title" => "Tab 8",
"tab_content_title" => "A longer title for the tab content",
"tab_body" => "<p>Nunc massa nunc, congue et velit id, accumsan rhoncus enim. Proin ultricies feugiat enim, id fringilla tortor cursus nec. Fusce lacinia mattis risus vel lacinia. Suspendisse ac facilisis ex. Morbi eu turpis nibh.</p>",
"tab_caption" => "<p><strong>Optional caption => </strong>Maecenas tempus justo sed enim finibus mattis. </p>",
"image" => [
"url" => "/assets/images/pattern-library/kitten-grey.jpg"
]
],
[
"tab_title" => "Tab 9",
"tab_content_title" => "A longer title for the tab content",
"tab_body" => "<p>Nunc massa nunc, congue et velit id, accumsan rhoncus enim. Proin ultricies feugiat enim, id fringilla tortor cursus nec. Fusce lacinia mattis risus vel lacinia. Suspendisse ac facilisis ex. Morbi eu turpis nibh.</p>",
"tab_caption" => "<p><strong>Optional caption => </strong>Maecenas tempus justo sed enim finibus mattis. </p>",
"image" => [
"url" => "/assets/images/pattern-library/kitten-yawn.jpg"
]
]
]
]
To use this element: @include('.srv.www.cerbaresearch.com.releases.20240417123507.web.app.themes.cerba.resources....library.blocks.tab-switcher.tab-switcher', $options)
Options used for this example:
[
"supertitle" => "Lorem ipsum dolor sit amet",
"tabs" => [
[
"tab_title" => "Tab 1",
"tab_content_title" => "A longer title for the tab content",
"tab_body" => "<p>Nunc massa nunc, congue et velit id, accumsan rhoncus enim. Proin ultricies feugiat enim, id fringilla tortor cursus nec. Fusce lacinia mattis risus vel lacinia. Suspendisse ac facilisis ex. Morbi eu turpis nibh.</p>",
"tab_caption" => "<p><strong>Optional caption => </strong>Maecenas tempus justo sed enim finibus mattis. </p>",
"image" => [
"url" => "/assets/images/pattern-library/kitten-green.jpg"
]
],
[
"tab_title" => "Tab 2",
"tab_content_title" => "A longer title for the tab content",
"tab_body" => "<p>Nunc massa nunc, congue et velit id, accumsan rhoncus enim. Proin ultricies feugiat enim, id fringilla tortor cursus nec. Fusce lacinia mattis risus vel lacinia. Suspendisse ac facilisis ex. Morbi eu turpis nibh.</p>",
"tab_caption" => "<p><strong>Optional caption => </strong>Maecenas tempus justo sed enim finibus mattis. </p>",
"image" => [
"url" => "/assets/images/pattern-library/kitten-grey.jpg"
]
],
[
"tab_title" => "Tab 3",
"tab_content_title" => "A longer title for the tab content",
"tab_body" => "<p>Nunc massa nunc, congue et velit id, accumsan rhoncus enim. Proin ultricies feugiat enim, id fringilla tortor cursus nec. Fusce lacinia mattis risus vel lacinia. Suspendisse ac facilisis ex. Morbi eu turpis nibh.</p>",
"tab_caption" => "<p><strong>Optional caption => </strong>Maecenas tempus justo sed enim finibus mattis. </p>",
"image" => [
"url" => "/assets/images/pattern-library/kitten-yawn.jpg"
]
]
]
]