> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Card Form Layout Builder

> Design custom card payment form layouts with live preview and platform-specific code generation.

Design custom card payment form layouts with live preview and platform-specific code generation. Select your platform, choose a layout preset, toggle fields, configure platform-specific options, and copy the generated code.

***

## How to Use

1. **Select a platform**: Web, iOS, or Android
2. **Choose a layout preset**: Vertical, grouped, compact, or single-line
3. **Toggle fields**: Enable or disable optional fields like cardholder name and submit button
4. **Configure options**: Platform-specific controls for styling, theming, and form behavior
5. **Copy the code**: Switch between code tabs and use the copy button

***

## Layout Presets

| Preset | Description | Best For |
| - | - | - |
| **Vertical** | All fields stacked in a single column | Simple forms, mobile-first designs |
| **Grouped** | Expiry and CVV side by side | Standard desktop layouts |
| **Compact** | Minimal height with 2-column grid | Space-constrained UIs |
| **Single-line** | Core card fields in one row | Inline checkout experiences |

***

## See also

> [card] [Layout customization](https://primer.io/docs/checkout/primer-checkout/build-your-ui/layout-customization.md)
>
> Learn about slot-based layout customization

> [card] [Styling customization](https://primer.io/docs/checkout/primer-checkout/build-your-ui/styling-customization.md)
>
> CSS variables and styling options

> [card] [Design tokens explorer](https://primer.io/docs/checkout/primer-checkout/build-your-ui/design-tokens-explorer.md)
>
> Interactive token visualization

> [card] [PrimerCardForm (iOS)](https://primer.io/docs/sdk/ios-checkout/v3.0.0-beta/api/card-form/primer-card-form.md)
>
> iOS card form view and slot API reference


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.