卡片

将信息聚合在卡片容器中展示。

基础用法

包含标题,内容等。

卡片标题 2018-01-24
卡片列表内容 1
卡片列表内容 2
卡片列表内容 3
<div class="vus-border-1 vus-shadow-2-12 vus-radius-4">
   <div class="vus-pt-15 vus-pr-15 vus-pb-15 vus-pl-15 vus-border-bottom-1">
      <span class="vus-fs-16">卡片标题</span>
      <span class="vus-fr vus-color--gray">2018-01-24</span>
   </div>
   <div class="vus-pt-15 vus-pr-15 vus-pb-15 vus-pl-15">
      <div class="vus-pt-5 vus-pb-5">卡片列表内容 1</div>
      <div class="vus-pt-5 vus-pb-5">卡片列表内容 2</div>
      <div class="vus-pt-5 vus-pb-5">卡片列表内容 3</div>
   </div>
</div>

带图片

可配置定义更丰富的内容展示。

卡片标题1
2018-01-24
卡片标题2
2018-01-24
卡片标题3
2018-01-24
<div class="vus-box lr-10 tb-10">
   <div class="vus-flex-1 vus-flex-xs-2 vus-flex-sm-3">
      <div class="vus-border-1 vus-shadow-2-12 vus-radius-4">
         <div class="vus-relative">
            <img src="../img/demo-img-300x300.jpg" class="vus-img">
         </div>
         <div class="vus-pt-10 vus-pr-10 vus-pb-10 vus-pl-10">
            <div class="vus-pb-2 vus-fs-16">卡片标题</div>
            <div class="vus-color--gray vus-fs-12">2018-01-24</div>
         </div>
      </div>
   </div>
</div>