Bought Together
Bought Together Items
Bought together items are courses which are bought together often by users. Each item has bought-together__details for a course image and title and bought-together--flex-end element for the price. They also contain a checkbox for the user to unselect and select the item before they add them to their basket.
<div class="bought-together">
<div class="card bought-together__item">
<div class="bought-together__details">
...
</div>
<div class="price bought-together--flex-end">
...
</div>
<div class="checkbox">
<input id="bt01" type="checkbox">
<label for="bt01">Selected</label>
</div>
</div>
</div>
Bought Together Add
Add icon to show the relationship between the bought together items.
add
<i class="bought-together__plus material-icons">add</i>
Bought Together Well
The well shows the total cost of the bought together items and an action to add these items to the user's cart.
3 Selected Total Price: £22.00
<div class="bought-together__well">
<div class="bought-together__total">
...
</div>
<div class="bought-together__action">
...
</div>
</div>