Expressive Timeline

WIP

HTML
View
Info
Notes


        
        <div class="js-expressive-carousel expressive_timeline">
    <div class="expressive_timeline_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="expressive_timeline_header_inner">
                    <div class="expressive_timeline_nav" aria-labelledby="expressive-timeline-title_1">
                        <h2 id="expressive-timeline-title_1" class="expressive_timeline_title">Our Progress</h2>
                        <nav id="expressive-timelime-dots_1" class="expressive_timeline_dots" aria-controls="expressive-timelime-carousel_1">
                            <div class="expressive_timeline_dots_item">
                                <button aria-label="Navigate to the Apr 3, 2025 slide" type="button" class="expressive_timeline_dots_btn" data-js-expressive-timeline-dot>
                                    <div class="expressive_timeline_dots_tooltip" role="tooltip" id="expressive-timelime-dots_1_tooltip_1">
                                        Apr 3, 2025
                                    </div>
                                    <span class="expressive_timeline_dots_btn_label">Apr 3, 2025</span>
                                    <span class="expressive_timeline_dots_btn_dot"></span>
                                </button>
                            </div>
                            <div class="expressive_timeline_dots_item">
                                <button aria-label="Navigate to the Apr 3, 2025 slide" type="button" class="expressive_timeline_dots_btn" data-js-expressive-timeline-dot>
                                    <div class="expressive_timeline_dots_tooltip" role="tooltip" id="expressive-timelime-dots_1_tooltip_2">
                                        Apr 3, 2025
                                    </div>
                                    <span class="expressive_timeline_dots_btn_label">Apr 3, 2025</span>
                                    <span class="expressive_timeline_dots_btn_dot"></span>
                                </button>
                            </div>
                            <div class="expressive_timeline_dots_item">
                                <button aria-label="Navigate to the Apr 3, 2025 slide" type="button" class="expressive_timeline_dots_btn" data-js-expressive-timeline-dot>
                                    <div class="expressive_timeline_dots_tooltip" role="tooltip" id="expressive-timelime-dots_1_tooltip_3">
                                        Apr 3, 2025
                                    </div>
                                    <span class="expressive_timeline_dots_btn_label">Apr 3, 2025</span>
                                    <span class="expressive_timeline_dots_btn_dot"></span>
                                </button>
                            </div>
                            <div class="expressive_timeline_dots_item">
                                <button aria-label="Navigate to the Apr 3, 2025 slide" type="button" class="expressive_timeline_dots_btn" data-js-expressive-timeline-dot>
                                    <div class="expressive_timeline_dots_tooltip" role="tooltip" id="expressive-timelime-dots_1_tooltip_4">
                                        Apr 3, 2025
                                    </div>
                                    <span class="expressive_timeline_dots_btn_label">Apr 3, 2025</span>
                                    <span class="expressive_timeline_dots_btn_dot"></span>
                                </button>
                            </div>
                            <div class="expressive_timeline_dots_item">
                                <button aria-label="Navigate to the Apr 3, 2025 slide" type="button" class="expressive_timeline_dots_btn" data-js-expressive-timeline-dot>
                                    <div class="expressive_timeline_dots_tooltip" role="tooltip" id="expressive-timelime-dots_1_tooltip_5">
                                        Apr 3, 2025
                                    </div>
                                    <span class="expressive_timeline_dots_btn_label">Apr 3, 2025</span>
                                    <span class="expressive_timeline_dots_btn_dot"></span>
                                </button>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="expressive_timeline_carousel">
        <div id="expressive-timelime-carousel_1" class="expressive_timeline_carousel_row" data-slick='{"regionLabel":"Our Progress","centerMode":true,"dots":false,"arrows":false,"infinite":false,"variableWidth":true,"slidesToShow":1,"slidesToScroll":1,"cssEase":"linear(0, 0.008 1%, 0.031 2%, 0.119 4.2%, 0.646 12.9%, 0.849 17%, 0.927 19.1%, 0.987 21.2%, 1.032 23.4%, 1.062 25.7%, 1.082 28.8%, 1.082 32.3%, 1.014 47.1%, 0.995 56.3%, 1)","speed":1000}' data-js-expressive-timeline-carousel>
            <div class="expressive_timeline_carousel_card">

                <svg class="expressive_timeline_connector" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 434 72">
                    <path stroke="url(#expressive-timeline-stroke_1)" stroke-width="6" d="M-53 3h252.914c74.167 0 109.704 66 173.585 66H434" />
                    <defs>
                        <linearGradient id="expressive-timeline-stroke_1" x1="87.11" x2="232.738" y1="-62" y2="-62" gradientUnits="userSpaceOnUse">
                            <stop stop-color="var(--stroke-color-one)" />
                            <stop offset="1" stop-color="var(--stroke-color-two)" />
                        </linearGradient>
                    </defs>
                </svg>

                <!-- Topic Card -->
                <div class="card card_expressive_wide_text card_type_default theme_green_gem">
                    <div class="card_inner card_expressive_wide_inner">
                        <div class="card_expressive_wide_grid">
                            <div class="card_expressive_wide_media">
                                <figure class="card_expressive_wide_figure">

                                    <img class="card_expressive_wide_image" srcset="https://images.fastspot.com/jhusoe/1220x814/4 1220w, https://images.fastspot.com/jhusoe/980x654/4 980w, https://images.fastspot.com/jhusoe/740x494/4 740w, https://images.fastspot.com/jhusoe/500x334/4 500w, https://images.fastspot.com/jhusoe/300x200/4 300w" sizes="(min-width: 1394px) 648px, (min-width: 1220px) 568px, (min-width: 980px) 454px, (min-width: 740px) 640px, 90vw" src="https://images.fastspot.com/jhusoe/300x200/4" alt="" loading="lazy" width="300" height="200">
                                </figure>
                                <div class="card_expressive_wide_body">
                                    <div class="card_expressive_wide_body_desc">
                                        <div class="typography">
                                            <h3>Building renovations valit amet occaecat</h3>
                                            <p>Mollit amet culpa quis. Ea mollit fugiat aute aliquip aliqua. Eiusmod ad excepteur nisi aliqua exercitation ad cillum veniam qui consequat amet deserunt fugiat. Do veniam eiusmod do consectetur aliqua tempor consequat commodo ullamco. Sit voluptate cupidatat et do sunt.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END: Topic Card -->
            </div>
            <div class="expressive_timeline_carousel_card">

                <svg class="expressive_timeline_connector" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 434 72">
                    <path stroke="url(#expressive-timeline-stroke_2)" stroke-width="6" d="M-53 3h252.914c74.167 0 109.704 66 173.585 66H434" />
                    <defs>
                        <linearGradient id="expressive-timeline-stroke_2" x1="87.11" x2="232.738" y1="-62" y2="-62" gradientUnits="userSpaceOnUse">
                            <stop stop-color="var(--stroke-color-one)" />
                            <stop offset="1" stop-color="var(--stroke-color-two)" />
                        </linearGradient>
                    </defs>
                </svg>

                <!-- Topic Card -->
                <div class="card card_expressive_descriptive card_type_default theme_blue_gem">
                    <div class="card_inner card_expressive_descriptive_inner">
                        <div class="card_expressive_descriptive_grid">
                            <div class="card_expressive_descriptive_media">
                                <figure class="card_expressive_descriptive_figure">

                                    <img class="card_expressive_descriptive_image" srcset="https://images.fastspot.com/jhusoe/980x654/5 980w, https://images.fastspot.com/jhusoe/740x494/5 740w, https://images.fastspot.com/jhusoe/500x334/5 500w, https://images.fastspot.com/jhusoe/300x200/5 300w" sizes="(min-width: 1394px) 290px, (min-width: 1220px) 265px, (min-width: 980px) 250px, (min-width: 600px) 332px, 90vw" src="https://images.fastspot.com/jhusoe/300x200/5" alt="" loading="lazy" width="300" height="200">
                                </figure>
                                <div class="card_expressive_descriptive_body">
                                    <span class="card_expressive_descriptive_caption">Photo Credit Jane Doe</span>
                                    <p class="card_expressive_descriptive_description">Description of the new facilities dolor sit amet consectetur. Netus interdum sed tincidunt pharetra odio a purus.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END: Topic Card -->
            </div>
            <div class="expressive_timeline_carousel_card">

                <svg class="expressive_timeline_connector" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 434 72">
                    <path stroke="url(#expressive-timeline-stroke_3)" stroke-width="6" d="M-53 3h252.914c74.167 0 109.704 66 173.585 66H434" />
                    <defs>
                        <linearGradient id="expressive-timeline-stroke_3" x1="87.11" x2="232.738" y1="-62" y2="-62" gradientUnits="userSpaceOnUse">
                            <stop stop-color="var(--stroke-color-one)" />
                            <stop offset="1" stop-color="var(--stroke-color-two)" />
                        </linearGradient>
                    </defs>
                </svg>

                <!-- Topic Card -->
                <div class="card card_expressive_wide card_type_default theme_purple_gem">
                    <div class="card_inner card_expressive_wide_inner">
                        <div class="card_expressive_wide_grid">
                            <div class="card_expressive_wide_media">
                                <figure class="card_expressive_wide_figure">

                                    <img class="card_expressive_wide_image" srcset="https://images.fastspot.com/jhusoe/1220x814/6 1220w, https://images.fastspot.com/jhusoe/980x654/6 980w, https://images.fastspot.com/jhusoe/740x494/6 740w, https://images.fastspot.com/jhusoe/500x334/6 500w, https://images.fastspot.com/jhusoe/300x200/6 300w" sizes="(min-width: 1394px) 648px, (min-width: 1220px) 568px, (min-width: 980px) 454px, (min-width: 740px) 640px, 90vw" src="https://images.fastspot.com/jhusoe/300x200/6" alt="" loading="lazy" width="300" height="200">
                                </figure>
                                <div class="card_expressive_wide_body">
                                    <p class="card_expressive_wide_caption">Henderson-Hopkins’ Safe Center for Online Learning was a vital resource for kids whose parents could not work remotely.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END: Topic Card -->
            </div>
            <div class="expressive_timeline_carousel_card">

                <svg class="expressive_timeline_connector" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 434 72">
                    <path stroke="url(#expressive-timeline-stroke_4)" stroke-width="6" d="M-53 3h252.914c74.167 0 109.704 66 173.585 66H434" />
                    <defs>
                        <linearGradient id="expressive-timeline-stroke_4" x1="87.11" x2="232.738" y1="-62" y2="-62" gradientUnits="userSpaceOnUse">
                            <stop stop-color="var(--stroke-color-one)" />
                            <stop offset="1" stop-color="var(--stroke-color-two)" />
                        </linearGradient>
                    </defs>
                </svg>

                <!-- Topic Card -->
                <div class="card card_expressive_descriptive card_type_default theme_orange_gem">
                    <div class="card_inner card_expressive_descriptive_inner">
                        <div class="card_expressive_descriptive_grid">
                            <div class="card_expressive_descriptive_media">
                                <figure class="card_expressive_descriptive_figure">

                                    <img class="card_expressive_descriptive_image" srcset="https://images.fastspot.com/jhusoe/980x654/8 980w, https://images.fastspot.com/jhusoe/740x494/8 740w, https://images.fastspot.com/jhusoe/500x334/8 500w, https://images.fastspot.com/jhusoe/300x200/8 300w" sizes="(min-width: 1394px) 290px, (min-width: 1220px) 265px, (min-width: 980px) 250px, (min-width: 600px) 332px, 90vw" src="https://images.fastspot.com/jhusoe/300x200/8" alt="" loading="lazy" width="300" height="200">
                                </figure>
                                <div class="card_expressive_descriptive_body">
                                    <span class="card_expressive_descriptive_caption"></span>
                                    <p class="card_expressive_descriptive_description">Description of the new facilities dolor sit amet consectetur. Netus interdum sed tincidunt pharetra odio a purus.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END: Topic Card -->
            </div>
            <div class="expressive_timeline_carousel_card">

                <!-- Expressive Image Card -->
                <div class="card card_expressive_image card_type_default theme_">
                    <div class="card_inner card_expressive_image_inner">
                        <div class="card_expressive_image_grid">
                            <div class="card_expressive_image_media">
                                <figure class="card_expressive_image_figure">

                                    <img class="card_expressive_image_image" srcset="https://images.fastspot.com/jhusoe/735x980/9 735w, https://images.fastspot.com/jhusoe/555x740/9 555w, https://images.fastspot.com/jhusoe/375x500/9 375w, https://images.fastspot.com/jhusoe/225x300/9 225w" sizes="(min-width: 1394px) 404px, (min-width: 1220px) 252px, (min-width: 980px) 282px, (min-width: 740px) 212px, 90vw" src="https://images.fastspot.com/jhusoe/225x300/9" alt="" loading="lazy" width="225" height="300">
                                </figure>
                                <div class="card_expressive_image_body">
                                    <p class="card_expressive_image_caption">Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END: Topic Card -->
            </div>
        </div>
    </div>
</div>


        {% set title_uniqid = uniqid("expressive-timeline-title") %}
{% set dots_uniqid = uniqid("expressive-timelime-dots") %}
{% set carousel_uniqid = uniqid("expressive-timelime-carousel") %}
{% set carousel_json = {
	regionLabel: group_title,
	centerMode: true,
	dots: false,
	arrows: false,
	infinite: false,
	variableWidth: true,
	slidesToShow: 1,
	slidesToScroll: 1,
	cssEase: 'linear(0, 0.008 1%, 0.031 2%, 0.119 4.2%, 0.646 12.9%, 0.849 17%, 0.927 19.1%, 0.987 21.2%, 1.032 23.4%, 1.062 25.7%, 1.082 28.8%, 1.082 32.3%, 1.014 47.1%, 0.995 56.3%, 1)',
	speed: 1000
}|json_encode() %}

<div class="js-expressive-carousel expressive_timeline">
	<div class="expressive_timeline_header">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="expressive_timeline_header_inner">
					<div class="expressive_timeline_nav" aria-labelledby="{{ title_uniqid }}">
						<h2 id="{{ title_uniqid }}" class="expressive_timeline_title">{{ group_title }}</h2>
						<nav id="{{ dots_uniqid }}" class="expressive_timeline_dots" aria-controls="{{ carousel_uniqid }}">
							{% for card in cards %}
								<div class="expressive_timeline_dots_item">
									<button aria-label="Navigate to the {{ card.item.label }} slide" type="button" class="expressive_timeline_dots_btn" data-js-expressive-timeline-dot>
										<div class="expressive_timeline_dots_tooltip" role="tooltip" id="{{ dots_uniqid }}_tooltip_{{ loop.index }}">
											{{ card.item.label }}
										</div>
										<span class="expressive_timeline_dots_btn_label">{{ card.item.label }}</span>
										<span class="expressive_timeline_dots_btn_dot"></span>
									</button>
								</div>
							{% endfor %}
						</nav>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="expressive_timeline_carousel">
		<div
			id="{{ carousel_uniqid }}"
			class="expressive_timeline_carousel_row"
			data-slick='{{ carousel_json }}'
			data-js-expressive-timeline-carousel
		>
			{% for card in cards %}
				<div class="expressive_timeline_carousel_card">
					{% if not loop.last %}
						{% set stroke_uniqid = uniqid("expressive-timeline-stroke") %}

						<svg class="expressive_timeline_connector" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 434 72">
							<path stroke="url(#{{ stroke_uniqid }})" stroke-width="6" d="M-53 3h252.914c74.167 0 109.704 66 173.585 66H434"/>
							<defs>
								<linearGradient id="{{ stroke_uniqid }}" x1="87.11" x2="232.738" y1="-62" y2="-62" gradientUnits="userSpaceOnUse">
								<stop stop-color="var(--stroke-color-one)"/>
								<stop offset="1" stop-color="var(--stroke-color-two)"/>
								</linearGradient>
							</defs>
						</svg>
					{% endif %}
					
					{% include '@partial-' ~ card.card_type ~ '-card' with {
						item: card.item
					} %}
				</div>
			{% endfor %}
		</div>
	</div>
</div>

Handle: @component-expressive-timeline
Preview:
- With layout
- Component only
Filesystem Path: src/twig/components/expressive-timeline/expressive-timeline.twig
Referenced by (1): @template-strategic-plan

No notes defined.