logo
English
导航

Contact

Introduction

The Contact component is used to display enterprise or personal contact information, supporting multiple contact methods (email, phone, address) and social media links. The component features a clean and professional design, perfect for use in 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 for different layout requirements
  • Supports custom titles and descriptions
  • Beautiful icon design, clear and recognizable

Basic Usage

The simplest contact information display:

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

Contact with Title

Add title and description using title and description properties:

联系我们

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

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

Add social media links to show complete contact information:

              ---
/**
 * @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"
/>

Compact Mode

Use the compact property to create a more compact layout:

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

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

Custom Styles

Customize contact card styles using the class property:

联系我们

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

contact@company.com
+1 (555) 123-4567
123 Business St, City, State 12345 
              ---
/**
 * @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="cosy:bg-gradient-to-br cosy:from-blue-50 cosy:to-purple-50 cosy:border-2 cosy:border-blue-200 cosy:shadow-2xl"
/>