Children and Screens Component Library

Speakers Feature 

<div class="speakers_feature js-speakers-polygon" data-speakers-polygon='{"color_pattern":["yellow","salmon","light_green","pink","light_blue","dark_green"]}'>
    <div class="speakers_feature_icon_wrap js-icon-wrap">
        <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
            <circle cx="250" cy="250" r="249" stroke="#F3D159" stroke-width="2" />
        </svg>

        <div class="speakers_feature_title_wrap">
            <h3 class="speakers_feature_title">
                Speakers
            </h3>
        </div>
    </div>

    <div class="speakers_feature_items">

        <div id="speakers_feature-2_1_item" class="speakers_feature_item theme_yellow js-item">
            <div id="speakers_feature-2_1_tooltip" role="tooltip" class="speakers_feature_tooltip js-tooltip">
                <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                <h4 id="speakers_feature-2_1_title" class="speakers_feature_tooltip_title">
                    Caley Arzamarski, PhD, NCSP
                </h4>

                <div class="speakers_feature_tooltip_desc">
                    <p>Psychologist, Clinical Assistant Professor, Child & Adolescent Psychiatry, Warren Alpert Medical School of Brown University</p>
                </div>
            </div>

            <button type="button" class="speakers_feature_item_btn js-btn js-swap" data-swap-target="#speakers_feature-2_1_item" data-swap-group="speakers_feature-2" aria-controls="speakers_feature-2_1_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                <div class="speakers_feature_item_magnetize js-magnetize">
                    <div class="speakers_feature_item_magnetize_target js-magnetize-target"></div>
                    <figure class="speakers_feature_item_figure">

                        <img class="speakers_feature_item_image" srcset="https://images.fastspot.com/framework/300x300/1 300w, https://images.fastspot.com/framework/100x100/1 100w" sizes="136px" src="https://images.fastspot.com/framework/100x100/1" alt="" loading="lazy" width="100" height="100">
                    </figure>
                </div>
            </button>
        </div>

        <div id="speakers_feature-2_2_item" class="speakers_feature_item theme_salmon js-item">
            <div id="speakers_feature-2_2_tooltip" role="tooltip" class="speakers_feature_tooltip js-tooltip">
                <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                <h4 id="speakers_feature-2_2_title" class="speakers_feature_tooltip_title">
                    Caley Arzamarski, PhD, NCSP
                </h4>

                <div class="speakers_feature_tooltip_desc">
                    <p>Psychologist, Clinical Assistant Professor, Child & Adolescent Psychiatry, Warren Alpert Medical School of Brown University</p>
                </div>
            </div>

            <button type="button" class="speakers_feature_item_btn js-btn js-swap" data-swap-target="#speakers_feature-2_2_item" data-swap-group="speakers_feature-2" aria-controls="speakers_feature-2_2_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                <div class="speakers_feature_item_magnetize js-magnetize">
                    <div class="speakers_feature_item_magnetize_target js-magnetize-target"></div>
                    <figure class="speakers_feature_item_figure">

                        <img class="speakers_feature_item_image" srcset="https://images.fastspot.com/framework/300x300/2 300w, https://images.fastspot.com/framework/100x100/2 100w" sizes="136px" src="https://images.fastspot.com/framework/100x100/2" alt="" loading="lazy" width="100" height="100">
                    </figure>
                </div>
            </button>
        </div>

        <div id="speakers_feature-2_3_item" class="speakers_feature_item theme_light_green js-item">
            <div id="speakers_feature-2_3_tooltip" role="tooltip" class="speakers_feature_tooltip js-tooltip">
                <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                <h4 id="speakers_feature-2_3_title" class="speakers_feature_tooltip_title">
                    Caley Arzamarski, PhD, NCSP
                </h4>

                <div class="speakers_feature_tooltip_desc">
                    <p>Psychologist, Clinical Assistant Professor, Child & Adolescent Psychiatry, Warren Alpert Medical School of Brown University</p>
                </div>
            </div>

            <button type="button" class="speakers_feature_item_btn js-btn js-swap" data-swap-target="#speakers_feature-2_3_item" data-swap-group="speakers_feature-2" aria-controls="speakers_feature-2_3_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                <div class="speakers_feature_item_magnetize js-magnetize">
                    <div class="speakers_feature_item_magnetize_target js-magnetize-target"></div>
                    <figure class="speakers_feature_item_figure">

                        <img class="speakers_feature_item_image" srcset="https://images.fastspot.com/framework/300x300/3 300w, https://images.fastspot.com/framework/100x100/3 100w" sizes="136px" src="https://images.fastspot.com/framework/100x100/3" alt="" loading="lazy" width="100" height="100">
                    </figure>
                </div>
            </button>
        </div>

        <div id="speakers_feature-2_4_item" class="speakers_feature_item theme_pink js-item">
            <div id="speakers_feature-2_4_tooltip" role="tooltip" class="speakers_feature_tooltip js-tooltip">
                <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                <h4 id="speakers_feature-2_4_title" class="speakers_feature_tooltip_title">
                    Caley Arzamarski, PhD, NCSP
                </h4>

                <div class="speakers_feature_tooltip_desc">
                    <p>Psychologist, Clinical Assistant Professor, Child & Adolescent Psychiatry, Warren Alpert Medical School of Brown University</p>
                </div>
            </div>

            <button type="button" class="speakers_feature_item_btn js-btn js-swap" data-swap-target="#speakers_feature-2_4_item" data-swap-group="speakers_feature-2" aria-controls="speakers_feature-2_4_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                <div class="speakers_feature_item_magnetize js-magnetize">
                    <div class="speakers_feature_item_magnetize_target js-magnetize-target"></div>
                    <figure class="speakers_feature_item_figure">

                        <img class="speakers_feature_item_image" srcset="https://images.fastspot.com/framework/300x300/4 300w, https://images.fastspot.com/framework/100x100/4 100w" sizes="136px" src="https://images.fastspot.com/framework/100x100/4" alt="" loading="lazy" width="100" height="100">
                    </figure>
                </div>
            </button>
        </div>

        <div id="speakers_feature-2_5_item" class="speakers_feature_item theme_light_blue js-item">
            <div id="speakers_feature-2_5_tooltip" role="tooltip" class="speakers_feature_tooltip js-tooltip">
                <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                <h4 id="speakers_feature-2_5_title" class="speakers_feature_tooltip_title">
                    Caley Arzamarski, PhD, NCSP
                </h4>

                <div class="speakers_feature_tooltip_desc">
                    <p>Psychologist, Clinical Assistant Professor, Child & Adolescent Psychiatry, Warren Alpert Medical School of Brown University</p>
                </div>
            </div>

            <button type="button" class="speakers_feature_item_btn js-btn js-swap" data-swap-target="#speakers_feature-2_5_item" data-swap-group="speakers_feature-2" aria-controls="speakers_feature-2_5_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                <div class="speakers_feature_item_magnetize js-magnetize">
                    <div class="speakers_feature_item_magnetize_target js-magnetize-target"></div>
                    <figure class="speakers_feature_item_figure">

                        <img class="speakers_feature_item_image" srcset="https://images.fastspot.com/framework/300x300/1 300w, https://images.fastspot.com/framework/100x100/1 100w" sizes="136px" src="https://images.fastspot.com/framework/100x100/1" alt="" loading="lazy" width="100" height="100">
                    </figure>
                </div>
            </button>
        </div>
    </div>
</div>
 
{% set unique_base_class = uniqid("speakers_feature") %}
{% set color_pattern = color_patterns.primary %}
{% set data_attr = {
	color_pattern: color_pattern
}|json_encode() %}

<div class="speakers_feature js-speakers-polygon" data-speakers-polygon='{{ data_attr }}'>
	<div class="speakers_feature_icon_wrap js-icon-wrap">
		{{ icon_inline("speakers_circle") }}

		<div class="speakers_feature_title_wrap">
			<h3 class="speakers_feature_title">
				{{ title }}
			</h3>
		</div>
	</div>

	<div class="speakers_feature_items">
		{% for item in items|slice(0, max_items|default(6)) %}
			{% set theme = get_theme_key(color_pattern, loop.index0) %}
			{% set id = unique_base_class ~ "_" ~ loop.index %}

			<div id="{{ id }}_item" class="speakers_feature_item theme_{{ theme }} js-item">
				<div id="{{ id }}_tooltip" role="tooltip" class="speakers_feature_tooltip js-tooltip">
					<button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

					<h4 id="{{ id }}_title" class="speakers_feature_tooltip_title">
						{{ item.title }}
					</h4>

					{% if item.description %}
						<div class="speakers_feature_tooltip_desc">
							<p>{{ item.description }}</p>
						</div>
					{% endif %}
				</div>

				<button type="button" class="speakers_feature_item_btn js-btn js-swap" data-swap-target="#{{ id }}_item" data-swap-group="{{ unique_base_class }}" aria-controls="{{ id }}_tooltip" aria-label="Open tooltip for speaker {{ item.title|e('html_attr') }}">
					<div class="speakers_feature_item_magnetize js-magnetize">
						<div class="speakers_feature_item_magnetize_target js-magnetize-target"></div>
						<figure class="speakers_feature_item_figure">
							{% include '@partial-image' with {
								class: 'speakers_feature_item',
								alt: '',
								image: item.image,
								loading: 'lazy',
								sources: [
									img.square.xxsml,
									img.square.thumb,
								],
								sizes: [
									'136px'
								]
							} %}
						</figure>
					</div>
				</button>
			</div>
		{% endfor %}
	</div>
</div>

No notes defined.