#### 卡片面板
代碼示例：
```
<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>
```
