JTCC Component Library

Contact Header 

<div class="contact_header">
    <div class="contact_header_group">
        <h2 class="contact_header_title">Student Activities</h2>
        <p class="contact_header_caption">Chester & Midlothian Campus</p>
    </div>
    <div class="contact_header_group">
        <figure class="contact_header_figure" aria-hidden="true">
            <span class="lazy_image_wrapper contact_header_image_wrapper">
                <img class="js-lazy js-lazyload contact_header_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/jtcc/300x300/1" data-srcset="//images.fastspot.com/jtcc/300x300/1 300w, //images.fastspot.com/jtcc/500x500/1 500w, //images.fastspot.com/jtcc/740x740/1 740w" alt="">
            </span>
            <noscript>
                <img class="contact_header_image" src="https://images.fastspot.com/jtcc/740x740/1" srcset="//images.fastspot.com/jtcc/740x740/1 740w, //images.fastspot.com/jtcc/500x500/1 500w, //images.fastspot.com/jtcc/300x300/1 300w" sizes="100vw" alt="" itemprop="image">
            </noscript>
        </figure>
    </div>
</div>
 
<div class="contact_header">
	<div class="contact_header_group">
		<h2 class="contact_header_title">{{ item.title }}</h2>
		<p class="contact_header_caption">{{ item.caption }}</p>
	</div>
	<div class="contact_header_group">
		{% if item.image %}
			<figure class="contact_header_figure" aria-hidden="true">
				{% render "@partial-image" with {
					class: "contact_header",
					alt: "",
					itemprop: "image",
					image: item.image,
					sources: [
						img("square").sml,
						img("square").xsml,
						img("square").xxsml
					]
				} %}
			</figure>
		{% endif %}
	</div>
</div>

No notes defined.