Payment option list
Taxonomic name: PAYMENT-OPTION-LIST
Beta v.1.0.0 - Updated 14/03/17.
Atom
The payment option list gives users a clear visual illustration of available payment options.
- Should be used within payment forms to demonstrate the payment options available.
- Payment options stack in a mobile view
- Payment options are not clickable – they are for illustrative purposes only.
Examples
Pay securely using
Code Examples
Pay securely using
<ul class="payment-options-list">
<li class="payment-options-list__item"><img src="[ CDN Folder Path ]/images/forms/..." alt="..." /></li>
</ul>Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.payment-options-list |
Base style for payment options list | Yes | ul |
|
.payment-options-list__item |
Base style for payment options list item | Yes | .payment-options-list > li |
Available image options
The following table gives you a quick overview of the payment option images available.
| Payment types | Image | Filename |
|---|---|---|
| American Express |  |
payment-type-american-express.png |
| Apple Pay |  |
payment-type-apple-pay.png |
| Cirrus |  |
payment-type-cirrus.png |
| Delta |  |
payment-type-delta.png |
| Direct Debit |  |
payment-type-direct-debit.png |
| Google Wallet |  |
payment-type-google-wallet.png |
| Maestro |  |
payment-type-maestro.png |
| Mastercard |  |
payment-type-mastercard.png |
| Paypal |  |
payment-type-paypal.png |
| Solo |  |
payment-type-solo.png |
| Switch |  |
payment-type-switch.png |
| Visa |  |
payment-type-visa.png |
| Visa Electron |  |
payment-type-visa-electron.png |