BAGS — Design System

Benefits Detail Simple 

<form action="#" class="selection">
    <div class="package package--xl"><input type="radio" id="package-xl" name="package" value="package-xl">
        <label for="package-xl">
            XL<div class="small">32 sáčků</div>
        </label>
        <div class="package__price">€ 42
            <div class="package__price-before">€ 57</div>
        </div>
        <div class="package__benefits">
            <div class="package__benefit">
                <div class="icon">
                    <i aria-hidden="true" class="icon-transport"></i>
                </div>
                <div class="text">Doprava
                    <strong>zadarmo</strong>
                </div>
            </div>
            <div class="package__benefit">
                <div class="icon">
                    <i aria-hidden="true" class="icon-save-hand"></i>
                </div>
                <div class="text">Sleva
                    <strong>26 %</strong>
                </div>
            </div>
            <div class="package__benefit">
                <div class="icon">
                    <i aria-hidden="true" class="icon-microfilter"></i>
                </div>
                <div class="text">8× mikrofiltr
                    <strong>zadarmo</strong>
                </div>
            </div>
            <div class="package__benefit">
                <div class="icon">
                    <i aria-hidden="true" class="icon-gift"></i>
                </div>
                <div class="text">1× vůně
                    <strong>zadarmo</strong>
                </div>
            </div>
        </div>
    </div>
    <div class="package package--l package--selected"><input type="radio" id="package-l" name="package" value="package-l" checked="">
        <label for="package-l">
            L<div class="small">24 sáčků</div>
        </label>
        <div class="package__price">€ 36
            <div class="package__price-before">€ 44</div>
        </div>
        <div class="package__benefits">
            <div class="package__benefit">
                <div class="icon">
                    <i aria-hidden="true" class="icon-transport"></i>
                </div>
                <div class="text">Doprava
                    <strong>zadarmo</strong>
                </div>
            </div>
            <div class="package__benefit">
                <div class="icon">
                    <i aria-hidden="true" class="icon-save-hand"></i>
                </div>
                <div class="text">Sleva
                    <strong>19 %</strong>
                </div>
            </div>
            <div class="package__benefit">
                <div class="icon">
                    <i aria-hidden="true" class="icon-microfilter"></i>
                </div>
                <div class="text">6× mikrofiltr
                    <strong>zadarmo</strong>
                </div>
            </div>
        </div>
    </div>
    <div class="package package--m"><input type="radio" id="package-m" name="package" value="package-m">
        <label for="package-m">
            M<div class="small">16 sáčků</div>
        </label>
        <div class="package__price">€ 30
            <div class="package__price-before">€ 34</div>
        </div>
        <div class="package__benefits">
            <div class="package__benefit">
                <div class="icon">
                    <i aria-hidden="true" class="icon-transport"></i>
                </div>
                <div class="text">Doprava
                    <strong>zadarmo</strong>
                </div>
            </div>
            <div class="package__benefit">
                <div class="icon">
                    <i aria-hidden="true" class="icon-save-hand"></i>
                </div>
                <div class="text">Sleva
                    <strong>12 %</strong>
                </div>
            </div>
            <div class="package__benefit">
                <div class="icon">
                    <i aria-hidden="true" class="icon-microfilter"></i>
                </div>
                <div class="text">4× mikrofiltr
                    <strong>zadarmo</strong>
                </div>
            </div>
        </div>
    </div>
    <div class="package package--s"><input type="radio" id="package-s" name="package" value="package-s">
        <label for="package-s">
            S<div class="small">8 sáčků</div>
        </label>
        <div class="package__price">€ 17</div>
        <div class="package__benefits">
            <div class="package__benefit">
                <div class="icon">
                    <i aria-hidden="true" class="icon-transport"></i>
                </div>
                <div class="text">Doprava
                    <strong>za € 2</strong>
                </div>
            </div>
            <div class="package__benefit">
                <div class="icon">
                    <i aria-hidden="true" class="icon-microfilter"></i>
                </div>
                <div class="text">2× mikrofiltr
                    <strong>zadarmo</strong>
                </div>
            </div>
        </div>
    </div>
</form>
<script type="text/javascript" src="../../js/detail-simple.js"></script>
 
<form action="#" class="selection">
    {% render '@benefits-detail-simple-xl' %}
    {% render '@benefits-detail-simple-l' %}
    {% render '@benefits-detail-simple-m' %}
    {% render '@benefits-detail-simple-s' %}
</form>
<script type="text/javascript" src="{{ '/js/detail-simple.js' | path }}"></script>
 
/* No context defined. */

No notes defined.