Quote
Displays a quote
Quote
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<div class="c-quote" data-uid="673ed1e0cc9f2">
<!-- image.blade.php -->
<figure class="c-image c-quote__image" data-uid="673ed1e0cca59">
<img src="https://picsum.photos/id/1028/300/200" alt="Placeholder" class="c-image__image" />
</figure>
<div class="c-quote__content">
<!-- icon.blade.php -->
<span class="c-icon c-quote__icon c-icon--format-quote c-icon--material c-icon--material-format_quote material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-inherit" material-symbol="format_quote" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="673ed1e0ccb37">
</span>
<div class="c-quote__quote">
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> <p>Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>
<div class="c-quote__footer">
<div class="c-quote__footer-content">
<p><b>Lorem Ipsum</b><br>Dolor</p>
</div>
<!-- icon.blade.php -->
<span class="c-icon c-quote__icon c-icon--format-quote c-icon--material c-icon--material-format_quote material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-inherit" material-symbol="format_quote" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="673ed1e0ccb88">
</span>
</div>
</div>
</div>@quote([
'content' => '<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> <p>Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>',
'footer' => '<p><b>Lorem Ipsum</b><br>Dolor</p>',
'image' => (object) [
'src' => 'https://picsum.photos/id/1028/300/200',
'alt' => 'Placeholder'
]
])
@endquoteBlade component parameters
| Key | Default value | Type | Available values | Description |
| image | [] | array | - | The image as an object where the src key is the image url. |
| content | string | - | Main content of the quote. | |
| footer | string | - | Can contain the author of the quote or any other information. | |
| id | string | - | The DOM id of the component. | |
| classList | [] | array | - | Array containing wrapping classes array |
| attributeList | [] | array | - | Array containing keys and values rendered as attributes |
| containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |