<div class="radio-image">
<div class="radio-image__radio">
<div class="radio--light is-initialized is-filled-in">
<div class="radio__wrapper">
<input class="radio__input" id="choice" type="radio" name="choice" value="1" data-test="Yes" />
<label class="radio__label" for="choice">Kartenzahlung
</label>
</div>
</div>
</div>
<div class="radio-image__image-tooltip-container">
<div class="radio-image__image-container">
<div class="image ">
<picture>
<img src="/example-assets/images/radio-image/payment-datatrans.png" class="image__img radio-image__image is-loading" alt="Mastercard, VIA, PostFinance, Twint" title="Mastercard, VIA, PostFinance, Twint" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<div class="radio-image__tooltip">
<button type="button" class="info-tooltip__toggle--small" data-info-tooltip-content="Lorem ipsum dolor sit amet">
<span class="visually-hidden">Information</span>
</button>
</div>
</div>
</div>
{% include '@SharedComponents/modules/shared/components/form-components/radio-image/radio-image.twig' %}
{
"radio": {
"variant": "light",
"id": "choice",
"name": "choice",
"label": "Kartenzahlung",
"value": "1",
"required": false,
"disabled": false,
"helper": "",
"error": "",
"attributes": {
"data-test": "Yes"
},
"checked": false
},
"image": {
"src": "/example-assets/images/radio-image/payment-datatrans.png",
"alt": "Mastercard, VIA, PostFinance, Twint",
"title": "Mastercard, VIA, PostFinance, Twint"
},
"tooltip": {
"variant": "small",
"title": "Information",
"content": "Lorem ipsum dolor sit amet"
}
}
import './radio-image.scss';
import RadioImage, {selector as sel} from 'cando-cx-components-library/components/modules/shared/components/form-components/radio-image/radio-image';
export default RadioImage;
export const selector = sel;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared/components/form-components/radio-image/radio-image";
No notes defined.