Timeline

Ready

HTML
View
Info
Notes


        
        <div class="timeline js-timeline">
    <div class="timeline_inner">
        <div class="timeline_header">
            <div class="fs-row">
                <div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">
                    <h2 class="timeline_title">Timeline Component</h2>
                    <span class="timeline_description">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus.</span>
                </div>
            </div>
        </div>

        <div class="timeline_list_body">
            <div class="fs-row">
                <div class="fs-cell">
                    <div class="timeline_list_body_inner">
                        <div class="timeline_list_wrapper js-timeline-list-wrapper ">
                            <div class="timeline_list js-carousel" data-carousel-options='{"minWidth": "979px", "contained": false, "pagination": false, "matchWidth": false}'>
                                <div class="timeline_list_item">
                                    <h3 class="timeline_list_item_title js-timeline-item-title"><span>August 1986</span> <span class="title">A Shorter Title</span></h3>
                                    <figure class="timeline_list_item_figure">

                                        <img class="timeline_list_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/1 740w, https://images.fastspot.com/washington-national-cathedral/500x334/1 500w, https://images.fastspot.com/washington-national-cathedral/300x200/1 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/1" alt="" loading="lazy" width="300" height="200">
                                        <figcaption class="timeline_list_item_caption"><a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Donec sed odio.</figcaption>
                                    </figure>
                                </div>
                                <div class="timeline_list_item">
                                    <h3 class="timeline_list_item_title js-timeline-item-title"><span>August 1986</span> <span class="title">A Window is Added to the Great Choir</span></h3>
                                    <figure class="timeline_list_item_figure">

                                        <img class="timeline_list_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/1 740w, https://images.fastspot.com/washington-national-cathedral/500x334/1 500w, https://images.fastspot.com/washington-national-cathedral/300x200/1 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/1" alt="" loading="lazy" width="300" height="200">
                                        <figcaption class="timeline_list_item_caption"><a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Donec sed odio.</figcaption>
                                    </figure>
                                </div>
                                <div class="timeline_list_item">
                                    <h3 class="timeline_list_item_title js-timeline-item-title"><span>August 1986</span> <span class="title">A Window is Added to the Great Choir</span></h3>
                                    <figure class="timeline_list_item_figure">

                                        <img class="timeline_list_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/1 740w, https://images.fastspot.com/washington-national-cathedral/500x334/1 500w, https://images.fastspot.com/washington-national-cathedral/300x200/1 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/1" alt="" loading="lazy" width="300" height="200">
                                        <figcaption class="timeline_list_item_caption"><a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Donec sed odio.</figcaption>
                                    </figure>
                                </div>
                                <div class="timeline_list_item">
                                    <h3 class="timeline_list_item_title js-timeline-item-title"><span>August 1986</span> <span class="title">A Window is Added to the Great Choir</span></h3>
                                    <figure class="timeline_list_item_figure">

                                        <img class="timeline_list_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/1 740w, https://images.fastspot.com/washington-national-cathedral/500x334/1 500w, https://images.fastspot.com/washington-national-cathedral/300x200/1 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/1" alt="" loading="lazy" width="300" height="200">
                                        <figcaption class="timeline_list_item_caption"><a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Donec sed odio.</figcaption>
                                    </figure>
                                </div>
                                <div class="timeline_list_item">
                                    <h3 class="timeline_list_item_title js-timeline-item-title"><span>August 1986</span> <span class="title">A Window is Added to the Great Choir</span></h3>
                                    <figure class="timeline_list_item_figure">

                                        <img class="timeline_list_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/1 740w, https://images.fastspot.com/washington-national-cathedral/500x334/1 500w, https://images.fastspot.com/washington-national-cathedral/300x200/1 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/1" alt="" loading="lazy" width="300" height="200">
                                        <figcaption class="timeline_list_item_caption"><a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Donec sed odio.</figcaption>
                                    </figure>
                                </div>
                                <div class="timeline_list_item">
                                    <h3 class="timeline_list_item_title js-timeline-item-title"><span>August 1986</span> <span class="title">A Window is Added to the Great Choir</span></h3>
                                    <figure class="timeline_list_item_figure">

                                        <img class="timeline_list_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/1 740w, https://images.fastspot.com/washington-national-cathedral/500x334/1 500w, https://images.fastspot.com/washington-national-cathedral/300x200/1 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/1" alt="" loading="lazy" width="300" height="200">
                                        <figcaption class="timeline_list_item_caption"><a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Donec sed odio.</figcaption>
                                    </figure>
                                </div>
                                <div class="timeline_list_item">
                                    <h3 class="timeline_list_item_title js-timeline-item-title"><span>August 1986</span> <span class="title">A Window is Added to the Great Choir</span></h3>
                                    <figure class="timeline_list_item_figure">

                                        <img class="timeline_list_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/1 740w, https://images.fastspot.com/washington-national-cathedral/500x334/1 500w, https://images.fastspot.com/washington-national-cathedral/300x200/1 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/1" alt="" loading="lazy" width="300" height="200">
                                        <figcaption class="timeline_list_item_caption"><a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Donec sed odio.</figcaption>
                                    </figure>
                                </div>
                                <div class="timeline_list_item">
                                    <h3 class="timeline_list_item_title js-timeline-item-title"><span>August 1986</span> <span class="title">A Window is Added to the Great Choir</span></h3>
                                    <figure class="timeline_list_item_figure">

                                        <img class="timeline_list_item_image" srcset="https://images.fastspot.com/washington-national-cathedral/740x494/1 740w, https://images.fastspot.com/washington-national-cathedral/500x334/1 500w, https://images.fastspot.com/washington-national-cathedral/300x200/1 300w" src="https://images.fastspot.com/washington-national-cathedral/300x200/1" alt="" loading="lazy" width="300" height="200">
                                        <figcaption class="timeline_list_item_caption"><a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Donec sed odio.</figcaption>
                                    </figure>
                                </div>
                            </div>
                        </div>
                        <div class="timeline_mobile_action_wrapper">
                            <button class="timeline_show_all_button js-timeline-mobile-reveal" type="button">Expand</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


        <div class="timeline js-timeline">
	<div class="timeline_inner">
		{% if title or description %}
		<div class="timeline_header">
			<div class="fs-row">
				<div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">
					{% if title %}
						<h2 class="timeline_title">{{ title }}</h2>
					{% endif %}
					{% if description %}
						<span class="timeline_description">{{ description }}</span>
					{% endif %}
				</div>
			</div>
		</div>
		{% endif %}
		
		<div class="timeline_list_body">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="timeline_list_body_inner">
						<div class="timeline_list_wrapper js-timeline-list-wrapper {% if not title and not description %} no_header{% endif %}">
							<div class="timeline_list js-carousel" data-carousel-options='{"minWidth": "979px", "contained": false, "pagination": false, "matchWidth": false}'>
								{% for item in items %}
									<div class="timeline_list_item">
										<h3 class="timeline_list_item_title js-timeline-item-title"><span>{{ item.date }}</span> <span class="title">{{ item.title }}</span></h3>
										<figure class="timeline_list_item_figure">
											{% include '@partial-image' with {
												class: 'timeline_list_item',
												alt: '',
												image: item.image,
												loading: 'lazy',
												sources: [
													img.classic.sml,
													img.classic.xsml,
													img.classic.xxsml
												]
											} %}
											{% if item.caption %}
												<figcaption class="timeline_list_item_caption">{{ item.caption }}</figcaption>
											{% endif %}
										</figure>
									</div>
								{% endfor %}
							</div>
						</div>
						<div class="timeline_mobile_action_wrapper">
							<button class="timeline_show_all_button js-timeline-mobile-reveal" type="button">Expand</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Handle: @component-timeline
Preview:
- With layout
- Component only
Filesystem Path: src/twig/components/timeline/timeline.twig
References (1): @partial-image

No notes defined.