diff --git a/src/badge/index.js b/src/badge/index.js
index d5b7b03..b89b264 100644
--- a/src/badge/index.js
+++ b/src/badge/index.js
@@ -47,6 +47,8 @@ class Badge extends Component {
         padding: 0 4px;
         border-radius: 10px;
         background: var(--color-red-1);
+        -webkit-user-select: none;
+        user-select: none;
       }
 
       .num {
diff --git a/src/card/index.js b/src/card/index.js
index 55aeba1..37084cf 100644
--- a/src/card/index.js
+++ b/src/card/index.js
@@ -22,7 +22,7 @@ class Card extends Component {
       flex-direction: column;
       position: relative;
       width: 100%;
-      border: 1px solid var(--color-plain-2);
+      border: 1px solid var(--wc-card-border-color, var(--color-plain-2));
       border-radius: inherit;
       background: #fff;
       color: var(--color-dark-1);
@@ -34,16 +34,17 @@ class Card extends Component {
         align-items: center;
         justify-content: space-between;
         width: 100%;
-        min-height: 52px;
-        padding: var(--card-padding, 8px 16px);
-        border-bottom: 1px solid var(--color-plain-2);
+        min-height: var(--wc-card-header-height, 52px);
+        padding: var(--wc-card-header-padding, 8px 16px);
         font-size: 16px;
+        box-shadow: inset 0 -1px 0 0 var(--color-plain-2);
+        -webkit-user-select: none;
         user-select: none;
       }
       .content {
         flex: 1;
         min-height: 64px;
-        padding: var(--card-padding, 8px 16px);
+        padding: var(--wc-card-padding, 8px 16px);
         font-size: 14px;
         color: var(--color-dark-1);
       }
@@ -60,10 +61,12 @@ class Card extends Component {
 
   render() {
     return html`
-      <div class="card-box">
-        <div class="header"><slot name="header">${this.header}</slot></div>
+      <main class="card-box">
+        <header class="header">
+          <slot name="header">${this.header}</slot>
+        </header>
         <div class="content"><slot></slot></div>
-      </div>
+      </main>
     `
   }
 }