BTE Technologies, LLC Component Library

Product Selector 

<div class="product_selector js-product-selector">
    <div class="product_selector_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="product_selector_header_inner">
                    <h2 class="product_selector_title">BTE Products</h2>
                    <span class="product_selector_description">With BTE products, you can provide higher precision evaluation, rehabilitation, and conditioning by delivering objective measurement and documentation of assessment, treatment, and outcomes.</span>
                </div>
            </div>
        </div>
    </div>
    <div class="product_selector_filter">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="product_selector_filter_inner">
                    <select name="products" id="products" class="product_selector_mobile_select js-product-selector-filter-select">
                        <option value="all" class="product_selector_mobile_option">All <br />Products</option>
                        <option value="ortho-recovery" class="product_selector_mobile_option">Orthopedic <br />Recovery</option>
                        <option value="task-analysis" class="product_selector_mobile_option">Task <br />Analysis</option>
                        <option value="hands-upper-ext" class="product_selector_mobile_option">Hands/Upper <br />Extremities</option>
                        <option value="employment-testing" class="product_selector_mobile_option">Employment <br />Testing</option>
                        <option value="sports-medicine" class="product_selector_mobile_option">Sports <br />Medicine</option>
                        <option value="portable-eval" class="product_selector_mobile_option">Portable <br />Evaluation</option>
                    </select>
                    <ul class="product_selector_filter_list">
                        <li class="product_selector_filter_item">
                            <button type="button" class="product_selector_filter_item_button js-product-selector-filter-button js-swap" data-category="all" data-swap-target="[data-all=true]" data-swap-group="product_selector" data-swap-options='{"collapse": false}' data-swap-active="true">All <br />Products</button>
                        </li>
                        <li class="product_selector_filter_item">
                            <button type="button" class="product_selector_filter_item_button js-product-selector-filter-button js-swap" data-category="ortho-recovery" data-swap-target="[data-ortho-recovery=true]" data-swap-group="product_selector" data-swap-options='{"collapse": false}'>Orthopedic <br />Recovery</button>
                        </li>
                        <li class="product_selector_filter_item">
                            <button type="button" class="product_selector_filter_item_button js-product-selector-filter-button js-swap" data-category="task-analysis" data-swap-target="[data-task-analysis=true]" data-swap-group="product_selector" data-swap-options='{"collapse": false}'>Task <br />Analysis</button>
                        </li>
                        <li class="product_selector_filter_item">
                            <button type="button" class="product_selector_filter_item_button js-product-selector-filter-button js-swap" data-category="hands-upper-ext" data-swap-target="[data-hands-upper-ext=true]" data-swap-group="product_selector" data-swap-options='{"collapse": false}'>Hands/Upper <br />Extremities</button>
                        </li>
                        <li class="product_selector_filter_item">
                            <button type="button" class="product_selector_filter_item_button js-product-selector-filter-button js-swap" data-category="employment-testing" data-swap-target="[data-employment-testing=true]" data-swap-group="product_selector" data-swap-options='{"collapse": false}'>Employment <br />Testing</button>
                        </li>
                        <li class="product_selector_filter_item">
                            <button type="button" class="product_selector_filter_item_button js-product-selector-filter-button js-swap" data-category="sports-medicine" data-swap-target="[data-sports-medicine=true]" data-swap-group="product_selector" data-swap-options='{"collapse": false}'>Sports <br />Medicine</button>
                        </li>
                        <li class="product_selector_filter_item">
                            <button type="button" class="product_selector_filter_item_button js-product-selector-filter-button js-swap" data-category="portable-eval" data-swap-target="[data-portable-eval=true]" data-swap-group="product_selector" data-swap-options='{"collapse": false}'>Portable <br />Evaluation</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="product_selector_body">
        <div class="fs-row product_selector_body_row">
            <div class="fs-cell product_selector_body_cell">
                <div class="product_selector_body_inner">
                    <div class="product_selector_cards js-carousel" data-carousel-options='{"contained": false, "matchWidth": false}'>
                        <div class="product_selector_card js-product-selector-card theme_blue" data-all="true" data-ortho-recovery="true" data-hands-upper-ext="true" data-employment-testing="true" data-sports-medicine="true">
                            <figure class="product_selector_card_figure">

                                <img class="product_selector_card_image" srcset="https://images.fastspot.com/framework/500x500/1 500w, https://images.fastspot.com/framework/300x300/1 300w" src="https://images.fastspot.com/framework/300x300/1" alt="" loading="lazy" width="300" height="300">
                            </figure>
                            <div class="product_selector_card_wrapper">
                                <h3 class="product_selector_card_title">PrimusRS</h3>
                                <span class="product_selector_card_description">The pinnacle of physically rehabilitating patients – functionally.</span>
                                <a href="#" class="product_selector_card_link">Product Info</a>
                            </div>
                        </div>
                        <div class="product_selector_card js-product-selector-card theme_blue" data-all="true" data-sports-medicine="true">
                            <figure class="product_selector_card_figure">

                                <img class="product_selector_card_image" srcset="https://images.fastspot.com/framework/500x500/2 500w, https://images.fastspot.com/framework/300x300/2 300w" src="https://images.fastspot.com/framework/300x300/2" alt="" loading="lazy" width="300" height="300">
                            </figure>
                            <div class="product_selector_card_wrapper">
                                <h3 class="product_selector_card_title">MCU, Multiple Cervical Unit</h3>
                                <span class="product_selector_card_description">Objectively evaluate, strengthen, and restore the ailing neck and cervical spine.</span>
                                <a href="#" class="product_selector_card_link">Product Info</a>
                            </div>
                        </div>
                        <div class="product_selector_card js-product-selector-card theme_blue" data-all="true" data-task-analysis="true" data-hands-upper-ext="true" data-employment-testing="true" data-sports-medicine="true">
                            <figure class="product_selector_card_figure">

                                <img class="product_selector_card_image" srcset="https://images.fastspot.com/framework/500x500/3 500w, https://images.fastspot.com/framework/300x300/3 300w" src="https://images.fastspot.com/framework/300x300/3" alt="" loading="lazy" width="300" height="300">
                            </figure>
                            <div class="product_selector_card_wrapper">
                                <h3 class="product_selector_card_title">Eccentron</h3>
                                <span class="product_selector_card_description">Eccentric resistance strength trainer with objective measures and results tracking.</span>
                                <a href="#" class="product_selector_card_link">Product Info</a>
                            </div>
                        </div>
                        <div class="product_selector_card js-product-selector-card theme_blue" data-all="true" data-ortho-recovery="true" data-hands-upper-ext="true" data-employment-testing="true" data-sports-medicine="true">
                            <figure class="product_selector_card_figure">

                                <img class="product_selector_card_image" srcset="https://images.fastspot.com/framework/500x500/4 500w, https://images.fastspot.com/framework/300x300/4 300w" src="https://images.fastspot.com/framework/300x300/4" alt="" loading="lazy" width="300" height="300">
                            </figure>
                            <div class="product_selector_card_wrapper">
                                <h3 class="product_selector_card_title">Simulator II</h3>
                                <span class="product_selector_card_description">Replicates hundreds of real world job and daily living functions.</span>
                                <a href="#" class="product_selector_card_link">Product Info</a>
                            </div>
                        </div>
                        <div class="product_selector_card js-product-selector-card theme_purple" data-all="true" data-ortho-recovery="true" data-task-analysis="true" data-hands-upper-ext="true" data-employment-testing="true">
                            <figure class="product_selector_card_figure">

                                <img class="product_selector_card_image" srcset="https://images.fastspot.com/framework/500x500/1 500w, https://images.fastspot.com/framework/300x300/1 300w" src="https://images.fastspot.com/framework/300x300/1" alt="" loading="lazy" width="300" height="300">
                            </figure>
                            <div class="product_selector_card_wrapper">
                                <h3 class="product_selector_card_title">Evaltech</h3>
                                <span class="product_selector_card_description">Provide the most peer-reviewed and legally defensible evals with automated reports.</span>
                                <a href="#" class="product_selector_card_link">Product Info</a>
                            </div>
                        </div>
                        <div class="product_selector_card js-product-selector-card theme_purple" data-all="true" data-hands-upper-ext="true" data-portable-eval="true">
                            <figure class="product_selector_card_figure">

                                <img class="product_selector_card_image" srcset="https://images.fastspot.com/framework/500x500/2 500w, https://images.fastspot.com/framework/300x300/2 300w" src="https://images.fastspot.com/framework/300x300/2" alt="" loading="lazy" width="300" height="300">
                            </figure>
                            <div class="product_selector_card_wrapper">
                                <h3 class="product_selector_card_title">EVJ</h3>
                                <span class="product_selector_card_description">Mobile objective strength and range of motion testing, quickly and easily.</span>
                                <a href="#" class="product_selector_card_link">Product Info</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="product_selector js-product-selector">
	<div class="product_selector_header">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="product_selector_header_inner">
					<h2 class="product_selector_title">{{ title }}</h2>
					<span class="product_selector_description">{{ description }}</span>
				</div>
			</div>
		</div>
	</div>
	<div class="product_selector_filter">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="product_selector_filter_inner">
					<select name="products" id="products" class="product_selector_mobile_select js-product-selector-filter-select">
						{% for category in categories %}
						<option value="{{ category.value }}" class="product_selector_mobile_option">{{ category.label }}</option>
						{% endfor %}
					</select>
					<ul class="product_selector_filter_list">
						{% for category in categories %}
						<li class="product_selector_filter_item">
							<button type="button" class="product_selector_filter_item_button js-product-selector-filter-button js-swap" data-category="{{ category.value }}" data-swap-target="[data-{{ category.value }}=true]" data-swap-group="product_selector" data-swap-options='{"collapse": false}'{% if category.value == 'all' %} data-swap-active="true"{% endif %}>{{ category.label }}</button>
						</li>
						{% endfor %}
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="product_selector_body">
		<div class="fs-row product_selector_body_row">
			<div class="fs-cell product_selector_body_cell">
				<div class="product_selector_body_inner">
					<div class="product_selector_cards js-carousel" data-carousel-options='{"contained": false, "matchWidth": false}'>
						{% for product in products %}
						<div class="product_selector_card js-product-selector-card{% if product.theme %} theme_{{ product.theme }}{% endif %}" {% for category in product.categories %} data-{{category}}="true"{% endfor %}>
							<figure class="product_selector_card_figure">
								{% include '@partial-image' with {
									class: 'product_selector_card',
									alt: '',
									image: product.image,
									loading: 'lazy',
									sources: [
										img.square.xsml,
										img.square.xxsml
									]
								} %}
							</figure>
							<div class="product_selector_card_wrapper">
								<h3 class="product_selector_card_title">{{ product.title }}</h3>
								<span class="product_selector_card_description">{{ product.description }}</span>
								<a href="{{ product.link.url }}" class="product_selector_card_link">{{ product.link.label }}</a>
							</div>
						</div>
						{% endfor %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.