nuxt-x-affiliate
Card Glass
Frosted-glass card — translucent, blurred, with an optional gradient glow border. Reads over photography.
Card Glass
A translucent, blurred card for use over a photo or gradient — where a solid card would look pasted on.
Blur and border colours come from the --x-glass-* tokens in the layer's
main.css, which flip for dark mode automatically.
Components
<XAFCardGlass />
<XAFSection :bg="{ variant: 'bold', image: '/bench.jpg', imageOverlay: 'heavy' }">
<div class="grid gap-6 md:grid-cols-2">
<XAFCardGlass
title="Frosted over photography"
subtitle="Blur and border flip automatically in dark mode."
glow
>
<p>Body content.</p>
</XAFCardGlass>
</div>
</XAFSection>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | '' | Card heading |
subtitle | string | '' | Line under the heading |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Padding scale |
glow | boolean | false | Draw the gradient glow border |
Slots
| Slot | Description |
|---|---|
| default | Card body |
header | Replace the title/subtitle block |
footer | Footer, above a divider |
AI Context
component: XAFCardGlass
package: "@xenterprises/nuxt-x-affiliate"
use-when: Frosted-glass card over a photo or gradient background