用途:<sgds-card> 是 SGDS 的通用内容卡片组件,用于在卡片容器中展示图片或图标、副标题、标题、描述文字以及页脚链接区域。它适合一般内容展示;若需图片为主并叠加徽章或操作,用 <sgds-image-card>;图标主导且垂直居中的布局用 <sgds-icon-card>;内容旁配小缩略图用 <sgds-thumbnail-card>。
主要能力:通过槽位(slot)组织内容,image 或 icon(二者互斥)、upper、menu、subtitle、title、description、默认槽、lower、footer。属性包括 orientation(vertical 默认 / horizontal)、stretchedLink(整卡可点击,href 自动取自 footer 槽内的 <a>)、disabled、hideBorder、tinted、imagePosition(before / after)、imageAdjustment(default / padding around / aspect ratio,含空格需原样传值)。footer 槽内放置 <sgds-link> 作为 CTA;旧的 link 槽自 3.3.2 起已弃用。组件无自定义事件或公开方法。
使用方式:安装与框架集成见 sgds-components-setup。示例: <sgds-card> <img slot="image" alt="Description" src="image.jpg" /> <span slot="subtitle">SUBTITLE</span> <span slot="title">Card Title</span> <span slot="description">Some descriptive text about this card.</span> <sgds-link slot="footer"> <a href="/page">Go somewhere <sgds-icon name="arrow-right"></sgds-icon></a> </sgds-link> </sgds-card> 整卡可点击写 <sgds-card stretchedLink>;横向布局写 orientation="horizontal";禁用写 disabled;着色背景写 tinted。
适用场景:需要标准内容卡片、整卡跳转、图片或图标展示的界面。
限制:不提供 CSS 样式修改,未暴露自定义属性和 CSS parts;image 与 icon 槽不宜同时使用,否则布局可能异常;imageAdjustment 的字符串值含空格须精确传递;stretchedLink 不在卡片自身设置 href。具体框架版本与安装步骤以 sgds-components-setup 资料为准。