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

All information is from sources deemed reliable but is subject to errors, omissions, changes in price, prior sale or withdrawal without notice. No representation is made as to the accuracy of any descriptions, measurements, square footages or acreage and should not be relied upon as such. All information herein should be confirmed by the customer. All rights to all content, including but not limited to photographs, videos and other graphics, are reserved to exclusively to the Broker who supplied such listing content. All advertising on this site is subject to the Federal Fair Housing Act.

units of measure

Currency

Language

React Web Components - DO NOT DELETE

What is a Web Component?

Purpose / Use Cases

Who Uses Web Components?

Benefits

Examples