logo
English

导航菜单

Documents

Contact

Introduction

Contact component is used to display contact information for businesses or individuals, supporting multiple contact methods (email, phone, address) and social media links. The component design is clean and professional, suitable for use on contact pages, footers, or about us pages of business websites.

Component Features:

  • Supports multiple contact methods: email, phone, address, website
  • Built-in social media links: GitHub, Twitter, Facebook, LinkedIn
  • Supports WeChat and WhatsApp QR codes with hover display
  • Automatically generates clickable links (email, phone, website)
  • Provides compact mode to adapt to different layout needs
  • Supports custom titles and descriptions
  • Beautiful icon design, clear and easy to identify

Examples

Props

address

Address information.

---



import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="联系我们"
  description="欢迎随时与我们联系"
  email="contact@example.com"
  phone="+1 (555) 123-4567"
  address="123 Business St, City, State 12345"
  website="https://example.com"
/>

---



import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="联系我们"
  description="欢迎随时与我们联系"
  email="contact@example.com"
  phone="+1 (555) 123-4567"
  website="https://example.com"
/>

background

Background color type, supports all preset background colors and opacity variants.

---



import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="默认背景"
  description="使用默认背景色的联系信息"
  email="contact@company.com"
  phone="+1 (555) 123-4567"
/>

---



import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="主色调背景"
  description="使用主色调背景的联系信息"
  email="contact@company.com"
  phone="+1 (555) 123-4567"
  background="primary"
/>

---



import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="主色调半透明"
  description="使用主色调半透明背景的联系信息"
  email="contact@company.com"
  phone="+1 (555) 123-4567"
  background="primary/20"
/>

---



import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="强调色背景"
  description="使用强调色背景的联系信息"
  email="contact@company.com"
  phone="+1 (555) 123-4567"
  background="accent"
/>

---



import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="成功色背景"
  description="使用成功色背景的联系信息"
  email="contact@company.com"
  phone="+1 (555) 123-4567"
  background="success"
/>

---



import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="警告色背景"
  description="使用警告色背景的联系信息"
  email="contact@company.com"
  phone="+1 (555) 123-4567"
  background="warning"
/>

---



import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="错误色背景"
  description="使用错误色背景的联系信息"
  email="contact@company.com"
  phone="+1 (555) 123-4567"
  background="error"
/>

class

Custom CSS class for overriding default styles.

---



/**
 * @component Contact.CustomStyle
 *
 * @description
 * 展示如何使用class属性自定义Contact组件的样式。
 */

import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="联系我们"
  description="自定义样式的联系信息卡片"
  email="contact@company.com"
  phone="+1 (555) 123-4567"
  address="123 Business St, City, State 12345"
  github="https://github.com/company"
  twitter="https://twitter.com/company"
  class="custom-contact-card"
/>

<style>
  .custom-contact-card {
    background: linear-gradient(135deg, #eff6ff 0%, #f3e8ff 100%);
    border: 2px solid #bfdbfe;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
</style>

compact

Whether to use compact mode.

---



/**
 * @component Contact.Compact
 *
 * @description
 * 紧凑模式的Contact组件示例。
 */
import { Contact } from "@coffic/cosy-ui";
---

<Contact email="contact@company.com" phone="+1 (555) 123-4567" compact />

description

Contact information description.

---



/**
 * @component Contact.WithTitle
 *
 * @description
 * 带标题和描述的Contact组件示例。
 */
import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="联系我们"
  description="欢迎随时与我们取得联系，我们将尽快回复您"
  email="contact@company.com"
  phone="+1 (555) 123-4567"
  address="123 Business St, City, State 12345"
/>

email

Email address.

---



import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="联系我们"
  description="欢迎随时与我们联系"
  email="contact@example.com"
  phone="+1 (555) 123-4567"
  website="https://example.com"
/>

---



import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="联系我们"
  description="欢迎随时与我们联系"
  phone="+1 (555) 123-4567"
  website="https://example.com"
/>

facebook

Facebook link.

---



/**
 * @component Contact.Social
 *
 * @description
 * 带社交媒体链接的Contact组件示例。
 */
import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="联系我们"
  email="contact@company.com"
  phone="+1 (555) 123-4567"
  website="https://www.company.com"
  github="https://github.com/company"
  twitter="https://twitter.com/company"
  facebook="https://facebook.com/company"
  linkedin="https://linkedin.com/company/company"
/>

github

GitHub link.

---



/**
 * @component Contact.Social
 *
 * @description
 * 带社交媒体链接的Contact组件示例。
 */
import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="联系我们"
  email="contact@company.com"
  phone="+1 (555) 123-4567"
  website="https://www.company.com"
  github="https://github.com/company"
  twitter="https://twitter.com/company"
  facebook="https://facebook.com/company"
  linkedin="https://linkedin.com/company/company"
/>

linkedin

LinkedIn link.

---



/**
 * @component Contact.Social
 *
 * @description
 * 带社交媒体链接的Contact组件示例。
 */
import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="联系我们"
  email="contact@company.com"
  phone="+1 (555) 123-4567"
  website="https://www.company.com"
  github="https://github.com/company"
  twitter="https://twitter.com/company"
  facebook="https://facebook.com/company"
  linkedin="https://linkedin.com/company/company"
/>

phone

Phone number.

---



import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="联系我们"
  description="欢迎随时与我们联系"
  email="contact@example.com"
  phone="+1 (555) 123-4567"
  website="https://example.com"
/>

---



import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="联系我们"
  description="欢迎随时与我们联系"
  email="contact@example.com"
  website="https://example.com"
/>

title

Contact information title.

---



/**
 * @component Contact.WithTitle
 *
 * @description
 * 带标题和描述的Contact组件示例。
 */
import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="联系我们"
  description="欢迎随时与我们取得联系，我们将尽快回复您"
  email="contact@company.com"
  phone="+1 (555) 123-4567"
  address="123 Business St, City, State 12345"
/>

twitter

Twitter link.

---



/**
 * @component Contact.Social
 *
 * @description
 * 带社交媒体链接的Contact组件示例。
 */
import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="联系我们"
  email="contact@company.com"
  phone="+1 (555) 123-4567"
  website="https://www.company.com"
  github="https://github.com/company"
  twitter="https://twitter.com/company"
  facebook="https://facebook.com/company"
  linkedin="https://linkedin.com/company/company"
/>

website

Website link.

---



import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="联系我们"
  description="欢迎随时与我们联系"
  email="contact@example.com"
  phone="+1 (555) 123-4567"
  website="https://example.com"
/>

---



import { Contact } from "@coffic/cosy-ui";
---

<Contact
  title="联系我们"
  description="欢迎随时与我们联系"
  email="contact@example.com"
  phone="+1 (555) 123-4567"
/>

wechatQR

WeChat QR code image source, supports local images or remote URLs. Shows QR code on hover.

---



import { Contact } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---

<Contact
  title="联系我们"
  description="欢迎随时与我们取得联系"
  email="contact@company.com"
  phone="+1 (555) 123-4567"
  wechatQR={qrCodeImage}
/>

---



import { Contact } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---

<Contact
  title="联系我们"
  description="欢迎随时与我们取得联系"
  email="contact@company.com"
  phone="+1 (555) 123-4567"
  whatsappQR={qrCodeImage}
/>

---



import { Contact } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---

<Contact
  title="联系我们"
  description="欢迎随时与我们取得联系"
  email="contact@company.com"
  phone="+1 (555) 123-4567"
  wechatQR={qrCodeImage}
  whatsappQR={qrCodeImage}
/>

whatsappQR

WhatsApp QR code image source, supports local images or remote URLs. Shows QR code on hover.

---



import { Contact } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---

<Contact
  title="联系我们"
  description="欢迎随时与我们取得联系"
  email="contact@company.com"
  phone="+1 (555) 123-4567"
  wechatQR={qrCodeImage}
/>

---



import { Contact } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---

<Contact
  title="联系我们"
  description="欢迎随时与我们取得联系"
  email="contact@company.com"
  phone="+1 (555) 123-4567"
  whatsappQR={qrCodeImage}
/>

---



import { Contact } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---

<Contact
  title="联系我们"
  description="欢迎随时与我们取得联系"
  email="contact@company.com"
  phone="+1 (555) 123-4567"
  wechatQR={qrCodeImage}
  whatsappQR={qrCodeImage}
/>

搜索