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
  • 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

address

Address information.

<Contact address="123 Business St, City, State 12345" />

class

Custom CSS class for overriding default styles.

联系我们

自定义样式的联系信息卡片

123 Business St, City, State 12345
contact@company.com
GitHub
+1 (555) 123-4567
Twitter 
---
/**
 * @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.

联系我们

欢迎随时与我们取得联系，我们将尽快回复您

123 Business St, City, State 12345
contact@company.com
+1 (555) 123-4567 
---
/**
 * @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.

123 Business St, City, State 12345
contact@company.com
+1 (555) 123-4567 
---
/**
 * @component Contact.Basic
 *
 * @description
 * 基础Contact组件示例，展示最简单的联系信息用法。
 */
import { Contact } from '@coffic/cosy-ui';
---

<Contact
  email="contact@company.com"
  phone="+1 (555) 123-4567"
  address="123 Business St, City, State 12345"
/>

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.

123 Business St, City, State 12345
contact@company.com
+1 (555) 123-4567 
---
/**
 * @component Contact.Basic
 *
 * @description
 * 基础Contact组件示例，展示最简单的联系信息用法。
 */
import { Contact } from '@coffic/cosy-ui';
---

<Contact
  email="contact@company.com"
  phone="+1 (555) 123-4567"
  address="123 Business St, City, State 12345"
/>

title

Contact information title.

联系我们

欢迎随时与我们取得联系，我们将尽快回复您

123 Business St, City, State 12345
contact@company.com
+1 (555) 123-4567 
---
/**
 * @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.

<Contact website="https://example.com" />

搜索