diff --git a/demo/pc/card.html b/demo/pc/card.html
index 7e87145..925d50a 100644
--- a/demo/pc/card.html
+++ b/demo/pc/card.html
@@ -218,5 +218,51 @@
         </div>
 
 
+    </div>
+</fieldset>
+
+<fieldset class="layui-elem-field layui-field-title">
+    <legend>用户主页名片</legend>
+    <div class="layui-field-box">
+        <div class="ul-padding-md ul-bg-gray" style="width:300px">
+            <div class="ul-info-card">
+                <div class="header">
+                    <div class="img" style="background-image: url('/static/images/view.jpg');">
+
+                    </div>
+                </div>
+                <div class="body">
+                    <div class="title">
+                        奥宏科技
+                    </div>
+                    <div class="line">
+
+                    </div>
+                    <div class="info">
+                        <div class="info-item">
+                            <div class="info-title">ID</div>
+                            <div class="info-value">2369</div>
+                        </div>
+                        <div class="info-item">
+                            <div class="info-title">性别</div>
+                            <div class="info-value">男</div>
+                        </div>
+                        <div class="info-item">
+                            <div class="info-title">工作时间</div>
+                            <div class="info-value">3年</div>
+                        </div>
+                        <div class="info-item">
+                            <div class="info-title">地址</div>
+                            <div class="info-value">山东省临沂市兰山区</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="footer">
+                    <div class="layui-btn layui-btn-fluid layui-btn-normal">
+                        <i class="layui-icon layui-icon-cellphone"></i> 立即联系
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </fieldset>
\ No newline at end of file
diff --git a/demo/tpl.html b/demo/tpl.html
index f3fc771..cbcf2e7 100644
--- a/demo/tpl.html
+++ b/demo/tpl.html
@@ -1,6 +1,6 @@
 <fieldset class="layui-elem-field layui-field-title">
-  <legend>字段集区块 - 横线风格</legend>
-  <div class="layui-field-box">
-    内容区域
-  </div>
+    <legend>字段集区块 - 横线风格</legend>
+    <div class="layui-field-box">
+        内容区域
+    </div>
 </fieldset>
\ No newline at end of file
diff --git a/source/scss/card/_index.scss b/source/scss/card/_index.scss
index 3943206..a5e0089 100644
--- a/source/scss/card/_index.scss
+++ b/source/scss/card/_index.scss
@@ -1,2 +1,3 @@
 @import './ul-card-simple-icon';
-@import './ul-card-message';
\ No newline at end of file
+@import './ul-card-message';
+@import './ul-info-card';
\ No newline at end of file
diff --git a/source/scss/card/_ul-info-card.scss b/source/scss/card/_ul-info-card.scss
new file mode 100644
index 0000000..be21b77
--- /dev/null
+++ b/source/scss/card/_ul-info-card.scss
@@ -0,0 +1,48 @@
+.ul-info-card {
+
+    background-color: #fff;
+
+    .header {
+        .img {
+            width              : 100%;
+            height             : 160px;
+            background-size    : cover;
+            background-position: center;
+        }
+    }
+
+    .body {
+        margin-top: 15px;
+
+        .title {
+            text-align : center;
+            font-size  : 18px;
+            font-weight: 600;
+            color      : #333;
+        }
+
+        .line {
+            height          : 3px;
+            width           : 60px;
+            background-color: #1E9FFF;
+            margin          : 10px auto;
+        }
+
+        .info {
+            padding: 15px;
+
+            .info-item {
+                display      : inline-block;
+                min-width    : 30%;
+                margin-bottom: 10px;
+                margin-right : 1%;
+
+                .info-title {
+                    font-size    : 12px;
+                    color        : #999;
+                    margin-bottom: 6px;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/view/index/index/index.html b/view/index/index/index.html
index afbb67a..e901431 100644
--- a/view/index/index/index.html
+++ b/view/index/index/index.html
@@ -129,7 +129,10 @@
 
         $('.main-content h2,.main-content>.demo-page>fieldset').each(function (index, elem) {
             if ($(elem).find('.demo-js-src').length == 0) {
-                $(elem).children('.layui-field-box').addClass('demo-js-src').css('display', 'block');
+                $(elem).children('.layui-field-box')
+                    .addClass('demo-js-src')
+                    .css('display', 'block')
+                    .data('title', $(elem).children('legend').text());
             }
         })
         $('.main-content h2,.main-content>.demo-page>fieldset>legend').each(function (index, elem) {
@@ -191,7 +194,8 @@
             });
             var contentCode = htmlListNew.join("\n");
             if ($(this).siblings('pre.demo-js').length == 0) {
-                $('<pre class="layui-code demo-js"></pre>').insertAfter(this);
+                var title = $(this).data('title');
+                $('<pre  class="layui-code demo-js" lay-title="' + title + '"></pre>').insertAfter(this);
             }
             $(this).siblings('pre.demo-js').text(contentCode)
         })