Flex Timeline

WIP

HTML
View
Info
Notes


        
        <div class="flex_timeline js-flex-timeline">
    <div class="flex_timeline_inner">
        <div class="flex_timeline_mobile_head">
            <h2 class="flex_timeline_title">
                Sustainability At Hopkins
            </h2>

            <div class="flex_timeline_title_items js-carousel" data-carousel-controller-for=".js-flex-timeline-carousel-1" data-carousel-options='{"show":{"0px":3,"740px":5},"fill":true,"controls":false,"pagination":false,"maxWidth":"979px"}'>
                <div class="flex_timeline_title_item">
                    <h3 class="flex_timeline_item_title">
                        Learn
                    </h3>

                    <div class="flex_timeline_item_title_icon">

                        <svg class="icon icon_arrow_down_line">
                            <use href="/images/icons.svg#arrow_down_line" />
                        </svg>

                    </div>
                </div>
                <div class="flex_timeline_title_item">
                    <h3 class="flex_timeline_item_title">
                        Research
                    </h3>

                    <div class="flex_timeline_item_title_icon">

                        <svg class="icon icon_arrow_down_line">
                            <use href="/images/icons.svg#arrow_down_line" />
                        </svg>

                    </div>
                </div>
                <div class="flex_timeline_title_item">
                    <h3 class="flex_timeline_item_title">
                        Engage
                    </h3>

                    <div class="flex_timeline_item_title_icon">

                        <svg class="icon icon_arrow_down_line">
                            <use href="/images/icons.svg#arrow_down_line" />
                        </svg>

                    </div>
                </div>
            </div>
        </div>

        <div class="flex_timeline_grid">
            <div class="flex_timeline_grid_item is_media">
                <div class="flex_timeline_media_items">
                    <div class="flex_timeline_media_item" data-anim="media-item">
                        <div>

                            <img class="flex_timeline_media_image" srcset="https://images.fastspot.com/jhu-sustainability/1080x1440/1 1080w, https://images.fastspot.com/jhu-sustainability/915x1220/1 915w, https://images.fastspot.com/jhu-sustainability/735x980/1 735w, https://images.fastspot.com/jhu-sustainability/555x740/1 555w, https://images.fastspot.com/jhu-sustainability/375x500/1 375w, https://images.fastspot.com/jhu-sustainability/225x300/1 225w" src="https://images.fastspot.com/jhu-sustainability/225x300/1" alt="" loading="lazy" width="225" height="300">
                        </div>
                    </div>
                    <div class="flex_timeline_media_item" data-anim="media-item">
                        <div>

                            <img class="flex_timeline_media_image" srcset="https://images.fastspot.com/jhu-sustainability/1080x1440/3 1080w, https://images.fastspot.com/jhu-sustainability/915x1220/3 915w, https://images.fastspot.com/jhu-sustainability/735x980/3 735w, https://images.fastspot.com/jhu-sustainability/555x740/3 555w, https://images.fastspot.com/jhu-sustainability/375x500/3 375w, https://images.fastspot.com/jhu-sustainability/225x300/3 225w" src="https://images.fastspot.com/jhu-sustainability/225x300/3" alt="" loading="lazy" width="225" height="300">
                        </div>
                    </div>
                    <div class="flex_timeline_media_item" data-anim="media-item">
                        <div>

                            <img class="flex_timeline_media_image" srcset="https://images.fastspot.com/jhu-sustainability/1080x1440/6 1080w, https://images.fastspot.com/jhu-sustainability/915x1220/6 915w, https://images.fastspot.com/jhu-sustainability/735x980/6 735w, https://images.fastspot.com/jhu-sustainability/555x740/6 555w, https://images.fastspot.com/jhu-sustainability/375x500/6 375w, https://images.fastspot.com/jhu-sustainability/225x300/6 225w" src="https://images.fastspot.com/jhu-sustainability/225x300/6" alt="" loading="lazy" width="225" height="300">
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex_timeline_grid_item is_content">
                <h2 class="flex_timeline_title is_desktop">
                    Sustainability At Hopkins
                </h2>

                <div class="flex_timline_items js-flex-timeline-carousel-1 js-carousel" data-carousel-options='{"show":{"0px":1,"740px":2},"controls":false,"pagination":false,"maxWidth":"979px"}'>
                    <div class="flex_timeline_item" data-anim="timeline-item">
                        <div data-anim="timeline-item-observer-target"></div>
                        <div class="flex_timeline_item_inner">
                            <div class="flex_timeline_item_inner_item is_icon">
                                <div class="flex_timeline_item_icon" data-anim="arrow-line">
                                    <div class="flex_timeline_item_icon_dot">

                                        <svg class="icon icon_dot">
                                            <use href="/images/icons.svg#dot" />
                                        </svg>

                                    </div>

                                    <div class="flex_timeline_item_icon_arrow">

                                        <svg class="icon icon_arrow_right_line">
                                            <use href="/images/icons.svg#arrow_right_line" />
                                        </svg>

                                    </div>
                                </div>
                            </div>

                            <div class="flex_timeline_item_inner_item is_content">
                                <h3 class="flex_timeline_item_title is_desktop">
                                    <span data-anim="timeline-item-title">
                                        Learn
                                    </span>
                                </h3>

                                <div class="flex_timeline_item_image_wrap">

                                    <img class="flex_timeline_image" srcset="https://images.fastspot.com/jhu-sustainability/980x980/1 980w, https://images.fastspot.com/jhu-sustainability/740x740/1 740w, https://images.fastspot.com/jhu-sustainability/500x500/1 500w, https://images.fastspot.com/jhu-sustainability/300x300/1 300w" src="https://images.fastspot.com/jhu-sustainability/300x300/1" alt="" loading="lazy" width="300" height="300">
                                </div>

                                <div class="flex_timeline_item_desc">
                                    <div class="typography">
                                        <p>Sustainability draws on disciplines the sciences and arts to inform responsible and ethical research. See what Hopkins has to offer to advance your knowledge and understanding of solving sustainability issues.</p>
                                    </div>
                                </div>

                                <div class="flex_timeline_item_link_items">
                                    <div class="flex_timeline_item_link_item">

                                        <a href="#" class="basic_link ">
                                            <span class="basic_link_inner">
                                                <span class="basic_link_label">Explore Academic Programs</span>
                                            </span>
                                        </a>
                                    </div>
                                    <div class="flex_timeline_item_link_item">

                                        <a href="#" class="basic_link ">
                                            <span class="basic_link_inner">
                                                <span class="basic_link_label">Find A Course</span>
                                            </span>
                                        </a>
                                    </div>
                                    <div class="flex_timeline_item_link_item">

                                        <a href="#" class="basic_link ">
                                            <span class="basic_link_inner">
                                                <span class="basic_link_label">Sustainability At Hopkins</span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex_timeline_item" data-anim="timeline-item">
                        <div data-anim="timeline-item-observer-target"></div>
                        <div class="flex_timeline_item_inner">
                            <div class="flex_timeline_item_inner_item is_icon">
                                <div class="flex_timeline_item_icon" data-anim="arrow-line">
                                    <div class="flex_timeline_item_icon_dot">

                                        <svg class="icon icon_dot">
                                            <use href="/images/icons.svg#dot" />
                                        </svg>

                                    </div>

                                    <div class="flex_timeline_item_icon_arrow">

                                        <svg class="icon icon_arrow_right_line">
                                            <use href="/images/icons.svg#arrow_right_line" />
                                        </svg>

                                    </div>
                                </div>
                            </div>

                            <div class="flex_timeline_item_inner_item is_content">
                                <h3 class="flex_timeline_item_title is_desktop">
                                    <span data-anim="timeline-item-title">
                                        Research
                                    </span>
                                </h3>

                                <div class="flex_timeline_item_image_wrap">

                                    <img class="flex_timeline_image" srcset="https://images.fastspot.com/jhu-sustainability/980x980/3 980w, https://images.fastspot.com/jhu-sustainability/740x740/3 740w, https://images.fastspot.com/jhu-sustainability/500x500/3 500w, https://images.fastspot.com/jhu-sustainability/300x300/3 300w" src="https://images.fastspot.com/jhu-sustainability/300x300/3" alt="" loading="lazy" width="300" height="300">
                                </div>

                                <div class="flex_timeline_item_desc">
                                    <div class="typography">
                                        <p>Sustainability draws on disciplines the sciences and arts to inform responsible and ethical research.</p>
                                    </div>
                                </div>

                                <div class="flex_timeline_item_link_items">
                                    <div class="flex_timeline_item_link_item">

                                        <a href="#" class="basic_link ">
                                            <span class="basic_link_inner">
                                                <span class="basic_link_label">Explore Academic Programs</span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex_timeline_item" data-anim="timeline-item">
                        <div data-anim="timeline-item-observer-target"></div>
                        <div class="flex_timeline_item_inner">
                            <div class="flex_timeline_item_inner_item is_icon">
                                <div class="flex_timeline_item_icon" data-anim="arrow-line">
                                    <div class="flex_timeline_item_icon_dot">

                                        <svg class="icon icon_dot">
                                            <use href="/images/icons.svg#dot" />
                                        </svg>

                                    </div>

                                    <div class="flex_timeline_item_icon_arrow">

                                        <svg class="icon icon_arrow_right_line">
                                            <use href="/images/icons.svg#arrow_right_line" />
                                        </svg>

                                    </div>
                                </div>
                            </div>

                            <div class="flex_timeline_item_inner_item is_content">
                                <h3 class="flex_timeline_item_title is_desktop">
                                    <span data-anim="timeline-item-title">
                                        Engage
                                    </span>
                                </h3>

                                <div class="flex_timeline_item_image_wrap">

                                    <img class="flex_timeline_image" srcset="https://images.fastspot.com/jhu-sustainability/980x980/6 980w, https://images.fastspot.com/jhu-sustainability/740x740/6 740w, https://images.fastspot.com/jhu-sustainability/500x500/6 500w, https://images.fastspot.com/jhu-sustainability/300x300/6 300w" src="https://images.fastspot.com/jhu-sustainability/300x300/6" alt="" loading="lazy" width="300" height="300">
                                </div>

                                <div class="flex_timeline_item_desc">
                                    <div class="typography">
                                        <p>Sustainability draws on disciplines the sciences and arts to inform responsible and ethical research. See what Hopkins has to offer to advance your knowledge and understanding of solving sustainability issues.</p>
                                    </div>
                                </div>

                                <div class="flex_timeline_item_link_items">
                                    <div class="flex_timeline_item_link_item">

                                        <a href="#" class="basic_link ">
                                            <span class="basic_link_inner">
                                                <span class="basic_link_label">Explore Academic Programs</span>
                                            </span>
                                        </a>
                                    </div>
                                    <div class="flex_timeline_item_link_item">

                                        <a href="#" class="basic_link ">
                                            <span class="basic_link_inner">
                                                <span class="basic_link_label">Find A Course</span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


        {% set uuid = uniqid('flex-timeline-carousel') %}

<div class="flex_timeline js-flex-timeline">
	<div class="flex_timeline_inner">
		<div class="flex_timeline_mobile_head">
			<h2 class="flex_timeline_title">
				{{ title }}
			</h2>

			<div class="flex_timeline_title_items js-carousel" data-carousel-controller-for=".js-{{ uuid }}" data-carousel-options='{{ carousel_options_secondary|json_encode }}'>
				{% for item in items %}
					<div class="flex_timeline_title_item">
						<h3 class="flex_timeline_item_title">
							{{ item.title }}
						</h3>

						<div class="flex_timeline_item_title_icon">
							{{ icon("arrow_down_line" )}}
						</div>
					</div>
				{% endfor %}
			</div>
		</div>

		<div class="flex_timeline_grid">
			<div class="flex_timeline_grid_item is_media">
				<div class="flex_timeline_media_items">
					{% for item in items %}
						<div class="flex_timeline_media_item" data-anim="media-item">
							<div>
								{% include '@partial-image' with {
									class: 'flex_timeline_media',
									alt: '',
									image: item.image,
									loading: 'lazy',
									sources: [
										img.portraitFull.xlrg,
										img.portraitFull.lrg,
										img.portraitFull.med,
										img.portraitFull.sml,
										img.portraitFull.xsml,
										img.portraitFull.xxsml
									]
								} %}
							</div>
						</div>
					{% endfor %}
				</div>
			</div>

			<div class="flex_timeline_grid_item is_content">
				<h2 class="flex_timeline_title is_desktop">
					{{ title }}
				</h2>

				<div class="flex_timline_items js-{{ uuid }} js-carousel" data-carousel-options='{{ carousel_options_primary|json_encode }}'>
					{% for item in items %}
						<div class="flex_timeline_item" data-anim="timeline-item">
							<div data-anim="timeline-item-observer-target"></div>
							<div class="flex_timeline_item_inner">
								<div class="flex_timeline_item_inner_item is_icon">
									<div class="flex_timeline_item_icon" data-anim="arrow-line">
										<div class="flex_timeline_item_icon_dot">
											{{ icon("dot") }}
										</div>

										<div class="flex_timeline_item_icon_arrow">
											{{ icon("arrow_right_line") }}
										</div>
									</div>
								</div>

								<div class="flex_timeline_item_inner_item is_content">
									<h3 class="flex_timeline_item_title is_desktop">
										<span data-anim="timeline-item-title">
											{{ item.title }}
										</span>
									</h3>

									<div class="flex_timeline_item_image_wrap">
										{% include '@partial-image' with {
											class: 'flex_timeline',
											alt: '',
											image: item.image,
											loading: 'lazy',
											sources: [
												img.square.med,
												img.square.sml,
												img.square.xsml,
												img.square.xxsml
											]
										} %}
									</div>

									<div class="flex_timeline_item_desc">
										<div class="typography">
											<p>{{ item.description }}</p>
										</div>
									</div>

									{% if item.links|length %}
										<div class="flex_timeline_item_link_items">
											{% for link in item.links %}
												<div class="flex_timeline_item_link_item">
													{% include "@partial-link" with {
														class: 'basic',
														title: link.title,
														url: link.href
													} %}
												</div>
											{% endfor %}
										</div>
									{% endif %}
								</div>
							</div>
						</div>
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
</div>

Handle: @component-flex-timeline
Preview:
- With layout
- Component only
Filesystem Path: src/twig/components/flex-timeline/flex-timeline.twig
References (2): @partial-image, @partial-link
Referenced by (1): @template-home

No notes defined.