Cards
A card grid layout block
A card grid layout block
To use this element: @include('.srv.www.cerbaresearch.com.releases.20240417123507.web.app.themes.cerba.resources....library.blocks.card-grid.card-grid', $options)
Options used for this example:
[
"cards" => [
[
"text" => [
"text_body" => "<p>Lorem ipsum dolor sit amet, <a href='/pattern-library'>consectetur adipisicing elit</a>. Laudantium voluptas beatae provident repellendus, totam quas cumque tenetur dignissimos eligendi, <strong>laborum commodi doloremque</strong> repellat in rerum non voluptatum illum perspiciatis necessitatibus.</p>",
"text_title" => "This card doesn't act as a link",
"text_title_size" => "normal",
"text_link" => [
"url" => "/",
"title" => "Read more"
]
],
"image" => [
"url" => "/assets/images/pattern-library/kitten-grey.jpg"
]
],
[
"text" => [
"text_body" => "<p>Lorem ipsum dolor sit amet, <a href='/pattern-library'>consectetur adipisicing elit</a>. Laudantium voluptas beatae provident repellendus, totam quas cumque tenetur dignissimos eligendi, <strong>laborum commodi doloremque</strong> repellat in rerum non voluptatum illum perspiciatis necessitatibus.</p>",
"text_title" => "This card doesn't act as a link",
"text_title_size" => "normal",
"text_link" => [
"url" => "/",
"title" => "Read more"
]
],
"image" => [
"url" => "/assets/images/pattern-library/kitten-grey.jpg"
]
],
[
"text" => [
"text_body" => "<p>Lorem ipsum dolor sit amet, <a href='/pattern-library'>consectetur adipisicing elit</a>. Laudantium voluptas beatae provident repellendus, totam quas cumque tenetur dignissimos eligendi, <strong>laborum commodi doloremque</strong> repellat in rerum non voluptatum illum perspiciatis necessitatibus.</p>",
"text_title" => "This card doesn't act as a link",
"text_title_size" => "normal",
"text_link" => [
"url" => "/",
"title" => "Read more"
]
],
"image" => [
"url" => "/assets/images/pattern-library/kitten-grey.jpg"
]
],
[
"text" => [
"text_body" => "<p>Lorem ipsum dolor sit amet, <a href='/pattern-library'>consectetur adipisicing elit</a>. Laudantium voluptas beatae provident repellendus, totam quas cumque tenetur dignissimos eligendi, <strong>laborum commodi doloremque</strong> repellat in rerum non voluptatum illum perspiciatis necessitatibus.</p>",
"text_title" => "This card doesn't act as a link",
"text_title_size" => "normal",
"text_link" => [
"url" => "/",
"title" => "Read more"
]
],
"image" => [
"url" => "/assets/images/pattern-library/kitten-grey.jpg"
]
],
[
"text" => [
"text_body" => "<p>Lorem ipsum dolor sit amet, <a href='/pattern-library'>consectetur adipisicing elit</a>. Laudantium voluptas beatae provident repellendus, totam quas cumque tenetur dignissimos eligendi, <strong>laborum commodi doloremque</strong> repellat in rerum non voluptatum illum perspiciatis necessitatibus.</p>",
"text_title" => "This card doesn't act as a link",
"text_title_size" => "normal",
"text_link" => [
"url" => "/",
"title" => "Read more"
]
],
"image" => [
"url" => "/assets/images/pattern-library/kitten-grey.jpg"
]
],
[
"card_as_link" => true,
"text" => [
"text_body" => "<p>Lorem ipsum dolor sit amet, <a href='/pattern-library'>consectetur adipisicing elit</a>. Laudantium voluptas beatae provident repellendus, totam quas cumque tenetur dignissimos eligendi, <strong>laborum commodi doloremque</strong> repellat in rerum non voluptatum illum perspiciatis necessitatibus.</p>",
"text_title" => "This whole card acts as a link",
"text_title_size" => "normal",
"text_link" => [
"url" => "/",
"title" => "Read more"
]
],
"image" => [
"url" => "/assets/images/pattern-library/kitten-grey.jpg"
]
]
]
]
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium voluptas beatae provident repellendus, totam quas cumque tenetur dignissimos eligendi, laborum commodi doloremque repellat in rerum non voluptatum illum perspiciatis necessitatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium voluptas beatae provident repellendus, totam quas cumque tenetur dignissimos eligendi, laborum commodi doloremque repellat in rerum non voluptatum illum perspiciatis necessitatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium voluptas beatae provident repellendus, totam quas cumque tenetur dignissimos eligendi, laborum commodi doloremque repellat in rerum non voluptatum illum perspiciatis necessitatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium voluptas beatae provident repellendus, totam quas cumque tenetur dignissimos eligendi, laborum commodi doloremque repellat in rerum non voluptatum illum perspiciatis necessitatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium voluptas beatae provident repellendus, totam quas cumque tenetur dignissimos eligendi, laborum commodi doloremque repellat in rerum non voluptatum illum perspiciatis necessitatibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium voluptas beatae provident repellendus, totam quas cumque tenetur dignissimos eligendi, laborum commodi doloremque repellat in rerum non voluptatum illum perspiciatis necessitatibus.