Examples¶
Ready-to-use HTML examples for the most common MetrePay UI patterns. Each example is self-contained and can be copied directly into a project.
Example Library¶
| Example | Description | Framework |
|---|---|---|
| Payment Form | Complete single payment form | Vanilla CSS |
| Catalog Page | Product catalog with hero | Vanilla CSS |
| Dashboard Widget | Stats row + data table | Vanilla CSS |
| Hero Section | Landing page hero | Vanilla CSS |
How to Use¶
- Copy the HTML from any example
- Add the Cabin font link to your
<head> - Adjust the content (merchant name, amounts, products)
- The CSS is self-contained — no external dependencies needed
All examples use:
- font-family: 'Cabin', sans-serif (Google Fonts)
- MetrePay CSS variables
- Vanilla CSS (no framework required)