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}'
}
},
}
}
})