<div class="add-to-list-toast">
<div class="add-to-list-toast__container">
<div class="image ">
<picture>
<img src="/example-assets/images/add-to-list-toast/image.png" class="image__img add-to-list-toast__image is-loading" alt="A super awesome product. A super awesome product." onload="this.classList.remove('is-loading')" />
</picture>
</div>
<div class="add-to-list-toast__name">
A super awesome product. A super awesome product.
</div>
<div class="add-to-list-toast__close">
<button class="button-icon--icon-regular -icon-close" type="button" name="close" value="close">
<span class="visually-hidden">Schliessen</span>
</button>
</div>
</div>
<div class="add-to-list-toast__message--success">Zur Liste hinzugefügt.</div>
<div class="add-to-list-toast__button">
<a href="#" class="button--secondary-small">Zur Liste</a>
</div>
</div>
{% include '@SharedComponents/modules/shared/components/add-to-list-toast/add-to-list-toast.twig' %}
{
"image": {
"src": "/example-assets/images/add-to-list-toast/image.png",
"alt": "A super awesome product. A super awesome product."
},
"name": "A super awesome product. A super awesome product.",
"closeLabel": "Schliessen",
"message": {
"type": "success",
"value": "Zur Liste hinzugefügt."
},
"button": {
"href": "#",
"title": "Zur Liste"
}
}
import './add-to-list-toast.scss';
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared/components/add-to-list-toast/add-to-list-toast";
This component is only being used in Angular directly since it’s being shown dynamically.