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 |