卡片

完整的卡片

我是标题
PlaceholderImage cap
卡片标题

展望未来,我们将一如既往注重产品的用户体验和实用价值,为日新月异的互联网发展而不懈努力!

<div class="ui-card">
<div class="ui-card-header"><div class="ui-card-header-title">我是标题</div><div class="ui-card-header-more"><a href="#">更多</a></div></div>
<div class="ui-card-image"><svg width="100%" height="150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg></div>
<div class="ui-card-body">
<div class="ui-card-title">卡片标题</div>
<p class="ui-card-text">展望未来,我们将一如既往注重产品的用户体验和实用价值,为日新月异的互联网发展而不懈努力!</p>
</div>
<div class="ui-card-footer">
<a href="">编辑</a> <a href="">删除</a>
</div>
</div>

其他效果

PlaceholderImage cap
卡片标题

展望未来,我们将一如既往注重产品的用户体验和实用价值,为日新月异的互联网发展而不懈努力!

PlaceholderImage cap
卡片标题

展望未来,我们将一如既往注重产品的用户体验和实用价值,为日新月异的互联网发展而不懈努力!

PlaceholderImage cap
卡片标题

展望未来,我们将一如既往注重产品的用户体验和实用价值,为日新月异的互联网发展而不懈努力!

PlaceholderImage cap
卡片标题

展望未来,我们将一如既往注重产品的用户体验和实用价值,为日新月异的互联网发展而不懈努力!