diff --git a/CHANGELOG.md b/CHANGELOG.md
index 957f0d9..4577419 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,4 +9,5 @@
- add indicator-page-point
- add blur
- add radio
-- add toast
\ No newline at end of file
+- add toast
+- add card
\ No newline at end of file
diff --git a/src/components/card/README.md b/src/components/card/README.md
new file mode 100644
index 0000000..b5ecc1a
--- /dev/null
+++ b/src/components/card/README.md
@@ -0,0 +1,32 @@
+## star-card
+
+星光 web 组件 --- Card 组件介绍：（2022 年 9 月 02 日）
+
+star-card 的用途：
+用于显示图片、文本等简要信息，帮助用户简单直观地获取卡片所在环境的主要信息，卡片组件具备拆卸、跳转页面等功能。
+
+star-card 类型：
+1、base
+具有图片、标题、内容以及页脚几个模块，同时删除base类型对应模块可以转变成其他类型：无图卡片、无页脚卡片等。
+
+2、linkcard
+该类型相比base类型多出点击后跳转相应链接的功能。
+
+3、tupianonly
+该类型只展现一张正方形图片，用于陈列图片组。
+
+star-card 其他属性：
+1、image
+通过填写图片URL来讲图片展示在卡片上。
+
+2、heading
+填写卡片标题以表明该卡片的用途。
+
+3、subheading
+简短描述卡片对应的内容，让用户快速获取卡片重要信息。
+
+4、footer
+卡片页脚，一般用来填写卡片内容的时间、作者等信息。
+
+5、link
+用来填写链接卡片的跳转网址。
\ No newline at end of file
diff --git a/src/components/card/card-styles.ts b/src/components/card/card-styles.ts
new file mode 100644
index 0000000..f81886b
--- /dev/null
+++ b/src/components/card/card-styles.ts
@@ -0,0 +1,113 @@
+import {css, CSSResult} from 'lit'
+
+export const sharedStyles: CSSResult = css`
+ :host {
+ --background-image-url: ''
+ }
+
+ div {
+ width:200px;
+ }
+
+ .card {
+ background: #FFFFFF;
+ border-color: #E6E6E6;
+ border-radius: 4px;
+ border-style: solid;
+ border-width: 1px;
+ box-sizing: border-box;
+ color: #222222;
+ flex-direction: column;
+ height: atuo;
+ min-width: 200px;
+ position: relative;
+ text-decoration-color: #222222;
+ text-decoration-thickness: auto;
+ unicode-bidi: isolate;
+ width: 200px;
+ }
+
+ .base:hover {
+ background: #E6E6E6;
+ border-color: #B1B1B1;
+ }
+
+ .cardhead {
+ background-image: url(var(--background-image-url));
+ align-items: center;
+ border-bottom-width: 1px;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: center;
+ overflow-x: hidden;
+ overflow-y: hidden;
+ }
+
+ .base-image {
+ display: block;
+ object-fit: cover;
+ width: 198px;
+ }
+
+ .cardbody {
+ color: #222222;
+ display: block;
+ height: 80px;
+ padding-bottom: 10px;
+ padding-left: 20px;
+ padding-right: 0px;
+ padding-top: 1px;
+ width: 180px;
+ }
+
+ .heading {
+ align-items: baseline;
+ color: #222222;
+ display: flex;
+ height: 18px;
+ width: 150px;
+ }
+
+ .subheading {
+ color: #222222;
+ display: flex;
+ height: 14px;
+ margin-top: 6px;
+ width: 180px;
+ }
+
+ .cardfooter {
+ border-color: #E6E6E6;
+ border-top-style: solid;
+ border-top-width: 1px;
+ display: block;
+ margin-left: 24px;
+ margin-right: 24px;
+ padding-bottom: 10px;
+ padding-top: 1px;
+ width: 150px;
+ }
+
+ .imageonly {
+ background: #B1B1B1;
+ border-color: #000000;
+ border: 10px;
+ border-style: solid;
+ border-width: 1px;
+ border-image-outset: 0;
+ }
+
+ .imageonly-image {
+ height: 198px;
+ border: 1px;
+ border-radius: 3px;
+ object-fit: cover;
+ width: 198px;
+ }
+
+ .imageonly:hover {
+ border-color: #E6E6E6;
+ }
+`
\ No newline at end of file
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
new file mode 100644
index 0000000..4a55053
--- /dev/null
+++ b/src/components/card/card.ts
@@ -0,0 +1,134 @@
+import {
+ html,
+ LitElement,
+ CSSResultArray,
+ HTMLTemplateResult,
+ nothing,
+ } from "lit"
+ import {customElement, property} from "lit/decorators.js"
+ import {sharedStyles} from "./card-styles"
+
+ export enum CardType {
+ BASE = "base",
+ LINKCARD = "linkcard",
+ IMAGEONLY = "imageonly",
+ LABELONLY = "labelonly",
+ FOOTERDELETED = 'footerdeleted',
+ }
+
+ // export enum CardSize {
+ // SMALL = "small",
+ // MEDIUM = "medium",
+ // }
+
+ @customElement("star-card")
+ export class StarCard extends LitElement {
+ public static override get styles(): CSSResultArray {
+ return [sharedStyles]
+ }
+
+ @property({type: String}) type = "base"
+ // @property({type: String}) size = "medium"
+ @property({type: String}) heading = ""
+ @property({type: String}) subheading = ""
+ @property({type: String}) footer = ""
+ @property({type: String}) image = ""
+ @property({type: String}) link = ""
+
+ getBaseCard(): HTMLTemplateResult {
+ return html`
+
+
+
+
+
+
${this.heading}
+
${this.subheading}
+
+
+
+
+
+
+
+
${this.heading}
+
${this.subheading}
+
+
+
+
+
${this.heading}
+
${this.subheading}
+
+
+
+
+
+
+
+
+
+
+
+
${this.heading}
+
${this.subheading}
+
+
+
基础卡片
+
+
+
+
+
+
+
+
链接卡片
+
+
+
+
+
+
+
+
无图卡片
+
+
+
+
+
+
+
+
无页脚卡片
+
+
+
+
+
+
+
+
只图卡片
+
+
+ `
+ }
+
+ public static override get styles(): CSSResultArray {
+ return [sharedStyles]
+ }
+
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "panel-card": PanelCard
+ }
+ }
\ No newline at end of file
diff --git a/src/test/panels/card/image/1.png b/src/test/panels/card/image/1.png
new file mode 100644
index 0000000..9a3616b
Binary files /dev/null and b/src/test/panels/card/image/1.png differ
diff --git a/src/test/panels/card/image/2.jpg b/src/test/panels/card/image/2.jpg
new file mode 100644
index 0000000..9eb14d5
Binary files /dev/null and b/src/test/panels/card/image/2.jpg differ
diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts
index 80b5c0f..36977fe 100644
--- a/src/test/panels/root.ts
+++ b/src/test/panels/root.ts
@@ -9,6 +9,7 @@ import '../../components/li/li'
import './about/about'
import './icon/icon'
import './general/general'
+import './card/card'
import './indicators/indicators'
import './blur/use-blur'
import './button/button'
@@ -153,6 +154,14 @@ export class PanelRoot extends LitElement {
href="#blur"
>
+
+