CGCC Component Library

Campus Teaser 

<div class="campus_teaser">
    <div class="campus_teaser_inner">
        <div class="campus_teaser_inner_item is_media">

            <img class="campus_teaser_image" srcset="https://images.fastspot.com/columbia-gorge-community-college/500x282/1 500w, https://images.fastspot.com/columbia-gorge-community-college/300x169/1 300w" src="https://images.fastspot.com/columbia-gorge-community-college/300x169/1" alt="" loading="lazy" width="300" height="169">
        </div>

        <div class="campus_teaser_inner_item is_content">
            <div class="campus_teaser_content">
                <h3 class="campus_teaser_name">
                    The Dalles Campus
                </h3>

                <address class="campus_teaser_address">
                    <a href="#">
                        400 East Scenic Drive<br>The Dalles, OR 97058
                    </a>
                </address>

                <div class="campus_teaser_phone_wrap">
                    <a class="campus_teaser_phone" href="tel: (541) 506-6000">
                        (541) 506-6000
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
 
{# {% include "@partial-campus-teaser" with {
	image: '1',
	name: 'The Dalles Campus',
	address: '400 East Scenic Drive<br>The Dalles, OR 97058',
	phone_number: '(541) 506-6000'
} %} #}

<div class="campus_teaser">
	<div class="campus_teaser_inner">
		<div class="campus_teaser_inner_item is_media">
			{% include '@partial-image' with {
				class: 'campus_teaser',
				alt: '',
				image: image,
				loading: 'lazy',
				sources: [
					img.wide.xsml,
					img.wide.xxsml
				]
			} %}
		</div>

		<div class="campus_teaser_inner_item is_content">
			<div class="campus_teaser_content">
				<h3 class="campus_teaser_name">
					{{ name }}
				</h3>

				<address class="campus_teaser_address">
					<a href="#">
						{{ address }}
					</a>
				</address>

				{% if phone_number %}
					<div class="campus_teaser_phone_wrap">
						<a class="campus_teaser_phone" href="tel: {{ phone_number }}">
							{{ phone_number }}
						</a>
					</div>
				{% endif %}
			</div>
		</div>
	</div>
</div>

No notes defined.