Hilbert Component Library

Hero Carousel Item 

<div class="hero_carousel_item is_type_">
    <div class="hero_carousel_item_grid">
        <div class="hero_carousel_item_grid_item is_media">
            <div class="hero_carousel_item_media_wrap">
                <picture class="hero_carousel_item_picture">
                    <div class="hero_carousel_item_image_wrap">

                        <img class="hero_carousel_item_image" srcset="https://images.fastspot.com/hilbert/300x169/undefined 300w, https://images.fastspot.com/hilbert/500x282/undefined 500w, https://images.fastspot.com/hilbert/740x416/undefined 740w, https://images.fastspot.com/hilbert/980x552/undefined 980w, https://images.fastspot.com/hilbert/1220x686/undefined 1220w, https://images.fastspot.com/hilbert/1440x810/undefined 1440w" sizes="100vw" src="https://images.fastspot.com/hilbert/1440x810/undefined" alt="" loading="eager" width="1440" height="810">
                    </div>
                </picture>

            </div>
        </div>

        <div class="hero_carousel_item_grid_item is_content">
            <div class="hero_carousel_item_content">
                <div class="fs-row">
                    <div class="fs-cell">
                        <div class="hero_carousel_item_content_inner">
                            <h2 class="hero_carousel_item_title">

                            </h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="hero_carousel_item is_type_{{ item.type }}">
	<div class="hero_carousel_item_grid">
		<div class="hero_carousel_item_grid_item is_media">
			<div class="hero_carousel_item_media_wrap">
				<picture class="hero_carousel_item_picture">
					<div class="hero_carousel_item_image_wrap">
						{% include "@partial-image" with {
							class: 'hero_carousel_item',
							alt: '',
							image: item.background_image,
							loading: 'eager',
							crop: 'wide',
							max: 'xlrg',
							sizes: [
								'100vw'
							]
						} %}
					</div>
				</picture>

				{% if item.video.id %}
					{% include "@partial-lazy-video" with {
						class: 'hero_carousel_item',
						id: item.video.id,
						type: item.video.type,
						title: item.video.title,
						display: "background",
						autoplay: false,
						load_strategy: "none",
						hide_button: true,
						playerVars: {}
					} %}
				{% endif %}
			</div>
		</div>

		<div class="hero_carousel_item_grid_item is_content">
			<div class="hero_carousel_item_content">
				<div class="fs-row">
					<div class="fs-cell">
						<div class="hero_carousel_item_content_inner">
							<h2 class="hero_carousel_item_title">
								{{ item.title }}
							</h2>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.