nuxt-x-affiliate
Pattern Bg
Decorative SVG pattern layer — 13 tiles, tinted by the element's text colour.
Pattern Bg
A repeating decorative pattern for section backgrounds. Usually reached through
<XAFSection :bg="{ pattern: 'grid' }"> rather than used directly.
The pattern is painted as a CSS mask over background-color: currentColor,
so it inherits the element's text colour — tint it with an ordinary Tailwind class
(text-primary-500, dark:text-white) and dark mode needs no special handling.
Components
<XAFPatternBg />
<div class="relative text-primary-500">
<XAFPatternBg pattern="hexagons" :opacity="0.08" />
<div class="relative z-10">Content above the pattern.</div>
</div>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
pattern | 'dots' | 'grid' | 'diagonal' | 'topography' | 'circuit' | 'waves' | 'plaid' | 'diagonalPlaid' | 'hexagons' | 'triangles' | 'crosses' | 'zigzag' | 'diamonds' | 'dots' | Which tile to repeat |
opacity | number | 0.05 | 0–1. Patterns are decoration — keep it low |
color | string | 'auto' | 'auto' inherits the text colour; any CSS colour also works |
fade | boolean | true | Fade the pattern out at the top and bottom edges |
AI Context
component: XAFPatternBg
package: "@xenterprises/nuxt-x-affiliate"
use-when: Decorative repeating pattern behind a section