#### 卡片面板
代码示例：
```
<div class="win-card win-clearfix">
<div class="win-card-left win-left">
<img src="../img/card.png" />
</div>
<div class="win-card-right">
<div class="win-card-header">卡片面板</div>
<div class="win-card-content">
<p>卡片面板通常用于非白色背景色的主体内，从而映衬出边框投影</p>
</div>
</div>
</div>
<div class="win-card win-card-sm win-inline">
<div class="win-card-header">
<i class="win-icon win-icon-rate-solid"></i>
<span class="">8.4</span>
</div>
<div class="win-card-content">
<p>天气质量：良好</p>
</div>
</div>
<div class="win-card win-card-sm win-inline">
<div class="win-card-header">
<img src="../img/card_1.png" />
<span class="">8.4</span>
</div>
<div class="win-card-content">
<p>天气质量：良好</p>
</div>
</div>
<div class="win-card win-card-sm win-inline">
<div class="win-card-header">
<img src="../img/card_2.png" />
<span class="">8.4</span>
</div>
<div class="win-card-content">
<p>天气质量：良好</p>
</div>
</div>
```
*****
#### 折叠面板
代码示例：
```
<div class="win-collapse">
<div class="win-colla-item">
<div class="win-colla-title">
杜甫
<i class="win-icon win-icon-right"></i>
</div>
<div class="win-colla-content win-hide">
<p>杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。</p>
</div>
</div>
<div class="win-colla-item">
<div class="win-colla-title">
李清照
<i class="win-icon win-icon-right"></i>
</div>
<div class="win-colla-content win-hide">
<p>李清照工诗善文，更擅长词。李清照词，人称“易安词”、“漱玉词”，以其号与集而得名。《易安集》、《漱玉集》，宋人早有著录。其词流传至今的，据今人所辑约有45首，另存疑10余首。她的《漱玉词》既男性亦为之惊叹。她不但有高深的文学修养，而且有大胆的创造精神。从总的情况看，她的创作内容因她在北宋和南宋时期生活的变化而呈现出前后期不同的特点。</p>
</div>
</div>
<div class="win-colla-item">
<div class="win-colla-title">
鲁迅
<i class="win-icon win-icon-right"></i>
</div>
<div class="win-colla-content win-hide">
<p>鲁迅的创作生涯里也创作过许多优秀的诗歌。虽然总体数量并不是很大，但其艺术特点有着很多为人称道、值得深入研究的地方。郭沫若曾评价道：“鲁迅先生无心作诗，偶有所作，每臻绝唱。或则犀角烛怪，或则肝胆照人。”鲁迅的诗歌，在古体诗创作方面表现的尤为突出，这些诗歌不仅内容丰富、朗朗上口，更有很高的艺术美感及思想特色，是革命丰富情感、完美艺术特质的良好的结合体。</p>
</div>
</div>
</div>
```
*****
#### 横向折叠面板
代码示例：
```
<div class="win-collapse-cross win-clearfix">
<div class="win-colla-item">
<div class="win-colla-title">
<i class="win-icon win-icon-right"></i>
<h1 class="win-ellipsis">标题内容</h1>
<p class="win-ellipsis">说明文字内容</p>
</div>
<div class="win-colla-content">
<h1 class="win-text-center">标题内容</h1>
<p class="win-hide">说明文字内容说明文字内容说明文字内容说明文字内容说明文字内容说明文字内容说明文字内容</p>
<h1 class="win-text-center">标题内容</h1>
<p class="win-hide">说明文字内容说明文字内容说明文字内容说明文字内容说明文字内容说明文字内容说明文字内容</p>
</div>
</div>
<div class="win-colla-item">
<div class="win-colla-title">
<i class="win-icon win-icon-right"></i>
<h1 class="win-ellipsis">标题内容</h1>
<p class="win-ellipsis">说明文字内容</p>
</div>
<div class="win-colla-content">
<h1 class="win-text-center">标题内容</h1>
<p class="win-hide">说明文字内容说明文字内容说明文字内容说明文字内容说明文字内容说明文字内容说明文字内容</p>
<h1 class="win-text-center">标题内容</h1>
<p class="win-hide">说明文字内容说明文字内容说明文字内容说明文字内容说明文字内容说明文字内容说明文字内容</p>
</div>
</div>
<div class="win-colla-item">
<div class="win-colla-title">
<i class="win-icon win-icon-right"></i>
<h1 class="win-ellipsis">标题内容</h1>
<p class="win-ellipsis">说明文字内容</p>
</div>
<div class="win-colla-content">
<h1 class="win-text-center">标题内容</h1>
<p class="win-hide">说明文字内容说明文字内容说明文字内容说明文字内容说明文字内容说明文字内容说明文字内容</p>
<h1 class="win-text-center">标题内容</h1>
<p class="win-hide">说明文字内容说明文字内容说明文字内容说明文字内容说明文字内容说明文字内容说明文字内容</p>
</div>
</div>
</div>
```
