BTE Technologies, LLC Component Library

Product 

<div class="product_nav js-product-nav">
    <div class="product_nav_inner">
        <div class="product_nav_group">
            <h2 class="product_nav_group_title">Functional <br />Rehabilitation</h2>
            <div class="product_nav_group_body">
                <div class="product_nav_group_section">
                    <h3 class="product_nav_group_section_title">Upper & Lower Extremities</h3>
                    <ul class="product_nav_section_list">
                        <li class="product_nav_section_list_item">
                            <a href="#" class="product_nav_section_list_item_link js-product-nav-link active" data-image="https://images.fastspot.com/framework/500x500/1" data-desc="Vestibulum id ligula porta felis euismod semper.">PrimusRS</a>
                        </li>
                        <li class="product_nav_section_list_item">
                            <a href="#" class="product_nav_section_list_item_link js-product-nav-link" data-image="https://images.fastspot.com/framework/500x500/2" data-desc="Nullam id dolor id nibh ultricies vehicula ut id elit.">Simulator II</a>
                        </li>
                    </ul>
                </div>
                <div class="product_nav_group_section">
                    <h3 class="product_nav_group_section_title">Specialized</h3>
                    <ul class="product_nav_section_list">
                        <li class="product_nav_section_list_item">
                            <a href="#" class="product_nav_section_list_item_link js-product-nav-link" data-image="https://images.fastspot.com/framework/500x500/3" data-desc="Maecenas faucibus mollis interdum.">Eccentron</a>
                        </li>
                        <li class="product_nav_section_list_item">
                            <a href="#" class="product_nav_section_list_item_link js-product-nav-link" data-image="https://images.fastspot.com/framework/500x500/4" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">MCU</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="product_nav_group">
            <h2 class="product_nav_group_title">Evaluation & <br />Testing</h2>
            <div class="product_nav_group_body">
                <div class="product_nav_group_section">
                    <h3 class="product_nav_group_section_title">In Clinic</h3>
                    <ul class="product_nav_section_list">
                        <li class="product_nav_section_list_item">
                            <a href="#" class="product_nav_section_list_item_link js-product-nav-link" data-image="https://images.fastspot.com/framework/500x500/1" data-desc="Nullam quis risus eget urna mollis ornare vel eu leo.">EvalTech</a>
                        </li>
                        <li class="product_nav_section_list_item">
                            <a href="#" class="product_nav_section_list_item_link js-product-nav-link" data-image="https://images.fastspot.com/framework/500x500/2" data-desc="Sed posuere consectetur est at lobortis.">PTK</a>
                        </li>
                    </ul>
                </div>
                <div class="product_nav_group_section">
                    <h3 class="product_nav_group_section_title">Portable</h3>
                    <ul class="product_nav_section_list">
                        <li class="product_nav_section_list_item">
                            <a href="#" class="product_nav_section_list_item_link js-product-nav-link" data-image="https://images.fastspot.com/framework/500x500/3" data-desc="Etiam porta sem malesuada magna mollis euismod.">Evaluator</a>
                        </li>
                        <li class="product_nav_section_list_item">
                            <a href="#" class="product_nav_section_list_item_link js-product-nav-link" data-image="https://images.fastspot.com/framework/500x500/4" data-desc="Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.">EVJ</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="product_nav_image_wrapper">
        <figure class="product_nav_image_figure js-product-nav-figure">

            <img class="product_nav_image" src="https://images.fastspot.com/framework/500x500/1" alt="" loading="lazy" width="500" height="500">
            <figcaption class="product_nav_description js-product-nav-description">Vestibulum id ligula porta felis euismod semper.</figcaption>
        </figure>
    </div>
</div>
 
{#
	{% include '@navigation-product' %}
#}
<div class="product_nav js-product-nav">
	<div class="product_nav_inner">
		{% for link in navigation.product %}
		<div class="product_nav_group">
			<h2 class="product_nav_group_title">{{ link.title }}</h2>
			<div class="product_nav_group_body">
				{% for section in link.sections %}
				<div class="product_nav_group_section">
					<h3 class="product_nav_group_section_title">{{ section.title }}</h3>
					<ul class="product_nav_section_list">
						{% for link in section.links %}
						<li class="product_nav_section_list_item">
							<a href="#" class="product_nav_section_list_item_link js-product-nav-link{% if link.label == "PrimusRS" %} active{% endif %}" data-image="https://images.fastspot.com/framework/500x500/{{ link.image }}" data-desc="{{ link.description }}">{{ link.label }}</a>
						</li>
						{% endfor %}
					</ul>
				</div>
				{% endfor %}
			</div>
		</div>
		{% endfor %}
	</div>
	<div class="product_nav_image_wrapper">
		<figure class="product_nav_image_figure js-product-nav-figure">
			{% include '@partial-image' with {
				class: 'product_nav',
				alt: '',
				image: navigation.product[0].sections[0].links[0].image,
				loading: 'lazy',
				sources: [
					img.square.xsml
				]
			} %}
			<figcaption class="product_nav_description js-product-nav-description">{{ navigation.product[0].sections[0].links[0].description }}</figcaption>
		</figure>
	</div>
</div>

No notes defined.