Children and Screens Component Library

Speakers List 

<div class="speakers_list ">
    <div class="speakers_list_title">
        Speakers
    </div>

    <div class="speakers_list_grid_items">

        <div class="speakers_list_grid_item theme_yellow">
            <div id="speakers_list_item-17_1_item" class="speakers_list_item js-speaker-tooltip">
                <div id="speakers_list_item-17_1_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                    <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                    <h4 id="speakers_list_item-17_1_title" class="speakers_list_item_title">
                        Caley Arzamarski, PhD, NCSP
                    </h4>

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

                <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-17_1_item" data-swap-group="speakers_list_item-17" aria-controls="speakers_list_item-17_1_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                    <figure class="speakers_list_item_figure">

                        <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/1" alt="" loading="lazy" width="100" height="100">
                    </figure>
                </button>
            </div>
        </div>

        <div class="speakers_list_grid_item theme_salmon">
            <div id="speakers_list_item-17_2_item" class="speakers_list_item js-speaker-tooltip">
                <div id="speakers_list_item-17_2_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                    <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                    <h4 id="speakers_list_item-17_2_title" class="speakers_list_item_title">
                        Caley Arzamarski, PhD, NCSP
                    </h4>

                    <div class="speakers_list_item_desc">
                        <p>Est duis proident cillum excepteur ex sint aliquip amet.</p>
                    </div>
                </div>

                <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-17_2_item" data-swap-group="speakers_list_item-17" aria-controls="speakers_list_item-17_2_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                    <figure class="speakers_list_item_figure">

                        <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/2" alt="" loading="lazy" width="100" height="100">
                    </figure>
                </button>
            </div>
        </div>

        <div class="speakers_list_grid_item theme_light_green">
            <div id="speakers_list_item-17_3_item" class="speakers_list_item js-speaker-tooltip">
                <div id="speakers_list_item-17_3_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                    <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                    <h4 id="speakers_list_item-17_3_title" class="speakers_list_item_title">
                        Caley Arzamarski, PhD, NCSP
                    </h4>

                    <div class="speakers_list_item_desc">
                        <p>Consequat consectetur velit tempor consequat est reprehenderit duis nostrud labore in nisi dolor cillum ad.</p>
                    </div>
                </div>

                <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-17_3_item" data-swap-group="speakers_list_item-17" aria-controls="speakers_list_item-17_3_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                    <figure class="speakers_list_item_figure">

                        <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/3" alt="" loading="lazy" width="100" height="100">
                    </figure>
                </button>
            </div>
        </div>

        <div class="speakers_list_grid_item theme_pink">
            <div id="speakers_list_item-17_4_item" class="speakers_list_item js-speaker-tooltip">
                <div id="speakers_list_item-17_4_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                    <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                    <h4 id="speakers_list_item-17_4_title" class="speakers_list_item_title">
                        Caley Arzamarski, PhD, NCSP
                    </h4>

                    <div class="speakers_list_item_desc">
                        <p>Quis velit adipisicing esse officia ea.</p>
                    </div>
                </div>

                <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-17_4_item" data-swap-group="speakers_list_item-17" aria-controls="speakers_list_item-17_4_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                    <figure class="speakers_list_item_figure">

                        <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/4" alt="" loading="lazy" width="100" height="100">
                    </figure>
                </button>
            </div>
        </div>

        <div class="speakers_list_grid_item theme_light_blue">
            <div id="speakers_list_item-17_5_item" class="speakers_list_item js-speaker-tooltip">
                <div id="speakers_list_item-17_5_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
                    <button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

                    <h4 id="speakers_list_item-17_5_title" class="speakers_list_item_title">
                        Caley Arzamarski, PhD, NCSP
                    </h4>

                    <div class="speakers_list_item_desc">
                        <p>Ipsum aute ullamco velit ut culpa do voluptate.</p>
                    </div>
                </div>

                <button type="button" class="speakers_list_item_btn js-btn js-swap" data-swap-target="#speakers_list_item-17_5_item" data-swap-group="speakers_list_item-17" aria-controls="speakers_list_item-17_5_tooltip" aria-label="Open tooltip for speaker Caley&#x20;Arzamarski,&#x20;PhD,&#x20;NCSP">
                    <figure class="speakers_list_item_figure">

                        <img class="speakers_list_item_image" sizes="76px" src="https://images.fastspot.com/framework/100x100/1" alt="" loading="lazy" width="100" height="100">
                    </figure>
                </button>
            </div>
        </div>
    </div>

</div>
 
{% set unique_base_class = uniqid("speakers_list_item") %}

<div class="speakers_list {% if items|length >= 6 %}show_count{% endif %}">
	<div class="speakers_list_title">
		{{ title }}
	</div>

	{% if items|length <= 6 %}

	
	<div class="speakers_list_grid_items">
		{% for item in items %}
			{% set id = unique_base_class ~ "_" ~ loop.index %}
			{% set theme = get_theme_key(color_patterns.primary, loop.index0) %}

			<div class="speakers_list_grid_item theme_{{ theme }}">
				<div id="{{ id }}_item" class="speakers_list_item js-speaker-tooltip">
					<div id="{{ id }}_tooltip" role="tooltip" class="speakers_list_item_tooltip js-tooltip">
						<button type="button" class="js-btn-tooltip-close visually_hide">Close tooltip</button>

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

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

					<button type="button" class="speakers_list_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') }}">
						<figure class="speakers_list_item_figure">
							{% include '@partial-image' with {
								class: 'speakers_list_item',
								alt: '',
								image: item.image,
								loading: 'lazy',
								sources: [
									img.square.thumb,
								],
								sizes: [
									'76px'
								]
							} %}
						</figure>
					</button>
				</div>
			</div>
		{% endfor %}
	</div>
	
	{% else %}
		<div class="speakers_list_count">
			<span class="speakers_list_count_label">{{ items|length }} Speakers</span>
		</div>
	{% endif %}
	
</div>

No notes defined.