Card

小卡片,用于展示简介和详细信息

基础展示

Preview
Code
Nuxt Framework
原生支持 SSR 和 SPA 渲染模式

Props

iconstring
图标
titlestring
标题
textstring
内容
iconBoxClassstring
透传的图标盒子类
iconClassstring
透传的图标类
contentBoxClassstring
透传的内容盒子类(包含标题和文本)
titleClassstring
透传的标题类
textClassstring
透传的文本类

Attrs

Omit<HTMLAttributes,'class'>object
原生 divattrs

样式

Code
/**
 * ObCard - 样式
 */
export default obCva<ICardProps>('p-6 flex flex-col gap-5 rounded-max border border-mediumGray bg-lightGray items-start')

/**
 * ObCard - iconBox 样式
 */
export const iconBoxStyle = 'w-8 flex justify-center items-center bg-primary rounded-small c-white aspect-square'

/**
 * ObCard - icon 样式
 */
export const iconStyle = ''

/**
 * ObCard - contentBox 样式
 */
export const contentBoxStyle = 'flex flex-col gap-2 font-bold'

/**
 * ObCard - title 样式
 */
export const titleStyle = 'text-lg'

/**
 * ObCard - text 样式
 */
export const textStyle = ''