卡片視圖常用于展現一段完整獨立的信息，比如一篇文章的預覽圖、作者信息、點贊數量等，如下是一個卡片demo示例；  使用mui-card類即可生成一個卡片容器，卡片視圖主要有頁眉、內容區、頁腳三部分組成，結構如下： ~~~ <div class="mui-card"> <!--頁眉，放置標題--> <div class="mui-card-header">頁眉</div> <!--內容區--> <div class="mui-card-content">內容區</div> <!--頁腳，放置補充信息或支持的操作--> <div class="mui-card-footer">頁腳</div> </div> ~~~ 卡片頁眉及內容區，均支持放置圖片； 頁眉放置圖片的話，需要在.mui-card-header節點上增加.mui-card-media類，然后設置一張圖片做背景圖即可，代碼如下： ~~~ <div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(../images/cbd.jpg)"></div> ~~~ 若希望在頁眉放置更豐富的信息，比如頭像、主標題、副標題，則需使用.mui-media-body類，示例代碼如下： ~~~ <div class="mui-card-header mui-card-media"> <img src="../images/logo.png" /> <div class="mui-media-body"> 小M <p>發表于 2016-06-30 15:30</p> </div> </div> ~~~