React Web Components - DO NOT DELETE

What is a Web Component?

A web component is a reusable, encapsulated piece of functionality or UI that can be rendered inside a web page. In our context, web components allow React components to be embedded in areas of a website that normally accept static HTML content, such as custom HTML containers or static pages.

Instead of manually coding interactive elements every time, web components provide a modular approach: developers create the component once, and content editors or the support team can use it anywhere on the site simply by inserting its HTML tag with configuration.

Purpose / Use Cases

Enable interactive pages without touching backend code.
Allow content editors or support teams to add sliders, galleries, modals, video popups, or forms directly into static pages.
Reusable across multiple pages for consistency and efficiency.
Supports nested HTML and JSON safely using encodings like &rq; and &rqs;.

Who Uses Web Components?

Customer Support / Content Team: Can add or modify interactive elements without programming knowledge.
Developers / Dev Team: Build and maintain components, ensuring proper integration, parsing, validation, and advanced configuration options.

Benefits

Efficiency: Quick content updates without redeploying code.
Consistency: Single component can be reused across multiple pages.
Flexibility: Supports nested HTML, JSON configurations, and custom styling.
Safety: Encapsulated behavior reduces the risk of conflicts with page content.

Examples

Box Locations Component

Confluence Documentation

Usage

<webc-box-locations
				data="[
				{
				'link': '/sales/anchorage-ak-usa',
				'image': '/my folder/local guide/anchorage.jpg',
				'name': 'Anchorage'
				},
				{
				'link': '/sales/ann-arbor-mi-usa',
				'image': '/my folder/aaa/1_alocal/ann arbor.jpg',
				'name': 'Ann Arbor'
				},
				{
				'link': '/sales/arlington-va-usa',
				'image': '/my folder/lg1/pexels-mark-stebnicki-13727937.jpg',
				'name': 'Arlington'
				},
				{
				'link': '/sales/asheville-nc-usa',
				'image': '/my folder/aaa/1_alocal/asheville.jpg',
				'name': 'Asheville'
				},
				{
				'link': '/sales/atlanta-ga-usa',
				'image': '/my folder/a.city/atlanta-first-frame.jpg',
				'name': 'Atlanta'
				},
				{
				'link': '/sales/aurora-co-usa',
				'image': '/my folder/lg1/cassie-gallegos-tjoxkiodoce-unsplash.jpg',
				'name': 'Aurora'
				},
				{
				'link': '/sales/austin-tx-usa',
				'image': '/my folder/austin-first-frame.jpg',
				'name': 'Austin'
				},
				{
				'link': '/sales/baltimore-md-usa',
				'image': '/my folder/local guide/baltimore.jpg',
				'name': 'Baltimore'
				},
				{
				'link': '/sales/bangor-me-usa',
				'image': '/my folder/aaa/1_alocal/bangor.jpg',
				'name': 'Bangor'
				},
				{
				'link': '/sales/baton-rouge-la-usa',
				'image': '/my folder/local guide/baton rouge.jpg',
				'name': 'Baton Rouge'
				}]"
				rotate="true"
				maxnolocations="8"
				></webc-box-locations>

DEMO

FAQ Accordion Component

Confluence Documentation

Usage

<webc-faq-accordion data="[
				{ 'question': 'Is Turtleback open to the public?', 'answer': 'Yes, the golf course is open to the public.' },
				{ 'question': 'Does Turtleback have an HOA?', 'answer': 'Yes, the HOA maintains community standards and events.' }
				]" />

DEMO

Usage - With Custom Styles

					<style>
				.faq-accordion-2 .my-custom-faq-accordion-container {
				background-color: red;
				}

				.faq-accordion-2 .my-custom-faq-accordion-item {
				border-bottom: 1px solid #000;
				}

				.faq-accordion-2 .my-custom-faq-accordion-question {
				background-color: #000;
				color: #fff;
				padding: 1rem;
				cursor: pointer;
				display: flex;
				justify-content: space-between;
				align-items: center;
				}

				.faq-accordion-2 .my-custom-faq-accordion-question-text {
				font-size: 18px;
				font-weight: bold;
				}

				.faq-accordion-2 .my-custom-faq-accordion-icon {
				font-size: 24px;
				transition: transform 0.3s ease;
				}

				.faq-accordion-2 .my-custom-faq-accordion-icon.open {
				transform: rotate(45deg);
				}

				.faq-accordion-2 .my-custom-faq-accordion-answer {
				padding: 1rem;
				background-color: #f9f9f9;
				display: none;
				}

				.faq-accordion-2 .my-custom-faq-accordion-answer.webc-faq-accordion-hidden {
				display: none;
				}


				.faq-accordion-2 .my-custom-faq-accordion-answer.webc-faq-accordion-visible {
				display: block;
				}
				</style>
				<webc-faq-accordion
				data="[
				{ 'question': 'Where is Turtleback Mountain Golf & Resort located?', 'answer': 'Turtleback Mountain Golf & Resort is in Elephant Butte, New Mexico...' },
				{ 'question': 'How far is Turtleback from other major cities and airports?', 'answer': 'Turtleback is approximately 1 hour from Las Cruces, 1.5 hours from Albuquerque...' }
				]"
				classnames="{
				'container': 'faq-accordion-container my-custom-faq-accordion-container',
				'item': 'faq-accordion-item my-custom-faq-accordion-item',
				'question': 'faq-accordion-question my-custom-faq-accordion-question',
				'questionText': 'faq-accordion-question-text my-custom-faq-accordion-question-text',
				'answer': 'faq-accordion-answer my-custom-faq-accordion-answer',
				'icon': 'faq-accordion-icon my-custom-faq-accordion-icon'
				}"

				elements="{
				'question': 'h3',
				'answer': 'p'
				}"
				defaultstyles="true"
				/>

DEMO

Gallery Component

Confluence Documentation

Usage

					<webc-gallery data="[
				{
				'image': '/my folder/local guide/anchorage.jpg',
				'alt': 'Anchorage',
				'caption': 'Beautiful view of Anchorage'
				},
				{
				'image': '/my folder/aaa/1_alocal/ann arbor.jpg',
				'alt': 'Ann Arbor',
				'caption': 'Scenic downtown Ann Arbor'
				},
				{
				'image': '/my folder/lg1/pexels-mark-stebnicki-13727937.jpg',
				'alt': 'Arlington',
				'caption': 'Historic Arlington landmarks'
				},
				{
				'image': '/my folder/aaa/1_alocal/asheville.jpg',
				'alt': 'Asheville',
				'caption': 'Mountain views in Asheville'
				},
				{
				'image': '/my folder/a.city/atlanta-first-frame.jpg',
				'alt': 'Atlanta',
				'caption': 'Skyline of Atlanta at dusk'
				},
				{
				'image': '/my folder/lg1/cassie-gallegos-tjoxkiodoce-unsplash.jpg',
				'alt': 'Aurora',
				'caption': 'Sunset over Aurora cityscape'
				}
				]" />

DEMO

Image Carousel Component

Confluence Documentation

Usage

					<webc-image-carousel data="[
				{
				'src': '/images/home1.jpg',
				'alt': 'Home 1',
				'content': '<h3>Beautiful House</h3><p>Modern design with large windows</p>'
				},
				{
				'src': '/images/home2.jpg',
				'alt': 'Home 2',
				'content': '<h3>Luxury Villa</h3><p>Private pool and garden</p>'
				},
				{
				'src': '/images/home3.jpg',
				'alt': 'Home 3'
				}
				]" settings="{
				'slidesToShow': 3,
				'centerMode': true,
				'autoplay': true,
				'speed': 500,
				'infinite': true
				}" classNames="{
				'container': 'custom-carousel',
				'slidecontent': 'custom-slide-content'
				}" />

DEMO

所有信息均來自被認為可靠的來源，但可能會出現錯誤、遺漏、價格變化、事先銷售或撤回，恕不另行通知。對於任何描述、測量、平方英尺或面積的準確性，我們不做任何陳述，因此不應被依賴。此處的所有信息均應由客戶確認。所有內容的所有權利，包括但不限於照片、視頻和其他圖形，僅保留給提供此類列表內容的經紀人。本網站上的所有廣告均受《聯邦公平住房法》的約束。

度量單位

貨幣

語言

React Web Components - DO NOT DELETE

What is a Web Component?

Purpose / Use Cases

Who Uses Web Components?

Benefits

Examples