Example
Markup
<div class="card-actions">
<div class="card-actions__disturber disturber">-11%</div>
<a href="javascript://" class="card-actions__secondary btn btn--plain btn--icon icon icon-wishlist"></a>
<a href="javascript://" class="card-actions__primary btn btn--plain btn--icon icon icon-basket"></a>
</div>
<br>
<form class="card-actions card-actions--extended">
<div class="card-actions__disturber">
<span class="disturber">-11%</span>
</div>
<a href="javascript://" class="card-actions__secondary btn btn--plain btn--icon icon icon-wishlist"></a>
<div class="card-actions__quantity quantity quantity--buttons">
<button value="-" class="quantity__minus">-</button>
<input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
<button value="+" class="quantity__plus">+</button>
</div>
<button class="card-actions__primary btn btn--plain btn--icon icon icon-basket"></button>
</form>
<br>
<form class="card-actions card-actions--extended">
<div class="card-actions__quantity quantity quantity--buttons">
<button value="-" class="quantity__minus">-</button>
<input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
<button value="+" class="quantity__plus">+</button>
</div>
<button class="card-actions__primary card-actions__discreet btn btn--plain btn--icon icon icon-menu-more"></button>
<div class="card-actions__disturber">
<span class="disturber">-11%</span>
</div>
</form>
<br>
<form class="card-actions card-actions--extended">
<div class="card-actions__quantity quantity quantity--buttons">
<button value="-" class="quantity__minus">-</button>
<input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
<button value="+" class="quantity__plus">+</button>
</div>
<div class="card-actions__disturber">
<span class="disturber">-11%</span>
</div>
</form>
<br>
<div class="card-actions card-actions--extended">
<div class="card-actions__disturber">
<span class="disturber">-11%</span>
</div>
<a href="javascript://" class="card-actions__primary card-actions__choose-varition">Ausführung wählen</a>
</div>
Source:
assets/styles/03-molecules/04-miscellaneous/_card-actions.scss, line 1