卡片

用于组织信息和操作，通常也作为详细信息的入口。

规则

形状为矩形，高度可定义。分为基本和通栏

代码演示

卡片

基本样式

标题文本溢出怎么办，溢出截断溢出怎么办，溢出截断

辅助文字内容溢出怎么办，溢出截断溢出怎么办，溢出截断

状态文字

文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行

卡尾文字

标题文本

状态文字

项目标题

项目内容文字

项目标题

文字超长溢出怎么办，溢出截断溢出怎么办，溢出截断

项目标题

文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行

卡尾文字

尾部介绍或操作

通栏模式

标题文本溢出怎么办，溢出截断溢出怎么办，溢出截断

辅助文字内容溢出怎么办，溢出截断溢出怎么办，溢出截断

状态文字

文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行

卡尾文字

标题文本溢出怎么办，溢出截断溢出怎么办，溢出截断

辅助文字内容溢出怎么办，溢出截断溢出怎么办，溢出截断

状态文字

项目标题

项目内容文字

项目标题

文字超长溢出怎么办，溢出截断溢出怎么办，溢出截断

项目标题

文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行

卡尾文字

尾部介绍或操作

默认

card 默认样式。提供两种组合情况。添加.card得到组件。card-header溢出截断。提供两种图片size card-icon,card-icon-sm你可以使用img标签，也可以使用smart为你提供的 icon

<div class="card">
	<div class="card-header card-nowrap">
		<img src="https://image.yuantutech.com/i4/cafad83e314e9fb646211d779686bf72-73-73.png" class="card-icon-sm">
		<div class="card-content">
			<div class="card-title txt-nowrap">标题文本溢出怎么办，溢出截断溢出怎么办，溢出截断</div><!-- 
			<div class="card-brief txt-nowrap">辅助文字内容溢出怎么办，溢出截断溢出怎么办，溢出截断</div> -->
		</div>
		<div class="card-extra txt-prompt" >状态文字</div>
	</div>
	<div class="card-body ">
		<div class="card-body-item">
			<div class="card-brief-title">项目标题</div>
			<div class="card-content">项目内容文字</div>
		</div>

		<div class="card-body-item">
			<div class="card-brief-title">项目标题</div>
			<div class="card-content txt-nowrap">文字超长溢出怎么办，溢出截断溢出怎么办，溢出截断</div>
		</div>
		<div class="card-body-item">
			<div class="card-brief-title">项目标题</div>
			<div class="card-content">文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行</div>
		</div>
	</div>
	<div class="card-footer">
		<div class="card-brief">卡尾文字</div>
		<div class="card-extra">尾部介绍或操作</div>
	</div>
</div>

通栏

添加.card-full获得通栏的card组件

<div class="card card-full">
	<div class="card-header card-nowrap">
		<img src="https://image.yuantutech.com/i4/cafad83e314e9fb646211d779686bf72-73-73.png" class="card-icon">
		<div class="card-content">
			<div class="card-title txt-nowrap">标题文本溢出怎么办，溢出截断溢出怎么办，溢出截断</div>
			<div class="card-brief txt-nowrap">辅助文字内容溢出怎么办，溢出截断溢出怎么办，溢出截断</div>
		</div>
		<div class="card-extra txt-prompt" >状态文字</div>
	</div>
	<div class="card-body ">
		<div class="card-brief">文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行</div>
	</div>
	<div class="card-footer">
		<div class="card-brief">卡尾文字</div>
		<div class="card-extra">卡尾文字</div>
	</div>
</div>
<br>
<div class="card card-full">
	<div class="card-header card-nowrap">
		<img src="https://image.yuantutech.com/i4/cafad83e314e9fb646211d779686bf72-73-73.png" class="card-icon">
		<div class="card-content">
			<div class="card-title txt-nowrap">标题文本溢出怎么办，溢出截断溢出怎么办，溢出截断</div>
			<div class="card-brief txt-nowrap">辅助文字内容溢出怎么办，溢出截断溢出怎么办，溢出截断</div>
		</div>
		<div class="card-extra txt-prompt" >状态文字</div>
	</div>
	<div class="card-body ">
		<div class="card-body-item">
			<div class="card-brief-title">项目标题</div>
			<div class="card-content">项目内容文字</div>
		</div>

		<div class="card-body-item">
			<div class="card-brief-title">项目标题</div>
			<div class="card-content txt-nowrap">文字超长溢出怎么办，溢出截断溢出怎么办，溢出截断</div>
		</div>
		<div class="card-body-item">
			<div class="card-brief-title">项目标题</div>
			<div class="card-content">文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行</div>
		</div>
	</div>
	<div class="card-footer">
		<div class="card-brief">卡尾文字</div>
		<div class="card-extra">尾部介绍或操作</div>
	</div>
</div>