Card
The Card component used to display content related to a single subject in a visually engaging and organized manner.
Usage
Visual effects
You can add visual effects to your card by using the lights and noise props.
Customization
You are able to customize the Card by updating design tokens from tokens.config file.
Nuxt Studio ready
Edit your theme content and appearance with live-preview within Nuxt Studio.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon | String | '' | Icon name from Iconify |
col | [String, Number, Object] | 1 | Amount of columns Card takes inside CardGrid |
row | [String, Number, Object] | 1 | Amount of rows Card takes inside CardGrid |
noise | Boolean | false | Add noise filter effect |
lights | Boolean | false | Add cursor lights effect |
Slots
| Slot | Description |
|---|---|
default | A slot for any arbitrary content |
title | A slot for title content |
description | A slot for description content |
Design Tokens
tokens.config.ts
import { defineTheme } from 'pinceau'
export default defineTheme({
docux: {
landing: {
card: {
padding: '{space.1}',
borderRadius: '{radii.sm}',
borderWidth: '0px',
borderStyle: 'solid',
borderColor: 'rgba({temp.color.gray.800}, 0.5)',
backgroundColor: 'transparent',
backgroundImage: 'none',
backdropFilter: '{elements.backdrop.filter}',
boxShadow: 'none',
minHeight: 'auto',
wrapper: {
borderRadius: '{radii.xs}',
backgroundColor: 'transparent',
backgroundImage: {
initial: 'linear-gradient(135deg, rgba({temp.color.gray.100}, 0.5), rgba({temp.color.gray.200}, .5))',
dark: 'linear-gradient(135deg, rgba({temp.color.gray.800}, 0.4), rgba({temp.color.gray.800}, .7))'
}
},
noise: {
opacity: {
initial: '0.2',
dark: '0.2'
}
},
content: {
padding: '{space.8}'
},
icon: {
marginBottom: '{space.4}',
width: '{space.6}',
height: '{space.6}',
padding: '{space.3}',
borderRadius: '{radii.xs}',
backgroundColor: {
initial: 'rgba({temp.color.gray.300}, 0.2)',
dark: 'rgba({temp.color.gray.900}, 0.2)'
},
boxShadow: 'inset -0.5px 0.5px 0px hsla(0,0%,100%,.1), inset 0.5px 0px 0px hsla(0,0%,100%,.1)'
},
title: {
marginBottom: '{space.2}',
fontSize: '{text.2xl.fontSize}',
lineHeight: '{text.2xl.lineHeight}',
fontWeight: '{fontWeight.medium}',
letterSpacing: '{letterSpacing.tight}',
color: '{elements.text.primary.color.static}'
},
description: {
fontSize: '{text.sm.fontSize}',
lineHeight: '{text.sm.lineHeight}',
fontWeight: '{fontWeight.medium}',
color: '{elements.text.secondary.color.static}'
}
},
}
}
})