Hilbert Component Library

Menu Cta Nav 

<div class="menu_cta_nav">
    <div class="menu_cta_nav_grid">
        <div class="menu_cta_nav_grid_item">
            <div class="menu_cta_nav_item">

                <picture class="menu_cta_nav_item_picture">
                    <source media="(min-width: 980px)" srcset="https://images.fastspot.com/hilbert/980x735/1" width="980" height="735" />
                    <source media="(min-width: 740px)" srcset="https://images.fastspot.com/hilbert/980x420/1" width="980" height="420" />

                    <img class="menu_cta_nav_item_image" src="https://images.fastspot.com/hilbert/740x317/1" alt="" loading="lazy" width="740" height="317" />
                </picture>

                <a href="#" class="menu_cta_nav_item_link">
                    <span class="menu_cta_nav_item_link_inner">
                        <span class="menu_cta_nav_item_link_label">Why Hilbert</span><span class="icon_nowrap menu_cta_nav_item_link_icon" aria-hidden="true">&#xfeff;<svg class="icon icon_arrow_right">
                                <use href="/images/icons.svg#arrow_right" />
                            </svg></span>
                    </span>
                </a>
            </div>
        </div>
        <div class="menu_cta_nav_grid_item">
            <div class="menu_cta_nav_item">

                <picture class="menu_cta_nav_item_picture">
                    <source media="(min-width: 980px)" srcset="https://images.fastspot.com/hilbert/980x735/2" width="980" height="735" />
                    <source media="(min-width: 740px)" srcset="https://images.fastspot.com/hilbert/980x420/2" width="980" height="420" />

                    <img class="menu_cta_nav_item_image" src="https://images.fastspot.com/hilbert/740x317/2" alt="" loading="lazy" width="740" height="317" />
                </picture>

                <a href="#" class="menu_cta_nav_item_link">
                    <span class="menu_cta_nav_item_link_inner">
                        <span class="menu_cta_nav_item_link_label">Hilbert Athletics</span><span class="icon_nowrap menu_cta_nav_item_link_icon" aria-hidden="true">&#xfeff;<svg class="icon icon_external">
                                <use href="/images/icons.svg#external" />
                            </svg></span>
                    </span>
                </a>
            </div>
        </div>
    </div>
</div>
 
<div class="menu_cta_nav">
	<div class="menu_cta_nav_grid">
		{% for item in items %}
			<div class="menu_cta_nav_grid_item">
				<div class="menu_cta_nav_item">
					{% include '@partial-picture' with {
						class: 'menu_cta_nav_item',
						image: item.image,
						alt: '',
						loading: 'lazy',
						default: img.ultrawide.sml,
						sources: {
							'980px': img.full.med,
							'740px': img.ultrawide.med
						}
					} %}

					{% include '@partial-link' with {
						title: item.link.title,
						url: item.link.href,
						target: '',
						class: 'menu_cta_nav_item',
						js: false,
						icon: item.link.icon,
						aria: '',
						nowrap: true
					} %}
				</div>
			</div>
		{% endfor %}
	</div>
</div>

No notes defined.