CGCC Component Library

Scroll Feature 

<div class="scroll_feat js-scroll-feat">
    <div class="js-marker"></div>

    <div class="scroll_feat_picture_wrap">

        <picture class="scroll_feat_picture">
            <source media="(min-width: 1220px)" srcset="https://images.fastspot.com/columbia-gorge-community-college/1440x810/1">
            <source media="(min-width: 980px)" srcset="https://images.fastspot.com/columbia-gorge-community-college/1220x686/1">
            <source media="(min-width: 740px)" srcset="https://images.fastspot.com/columbia-gorge-community-college/980x552/1">
            <img class="scroll_feat_image" src="//images.fastspot.com/columbia-gorge-community-college/654x980/1" alt="" loading="lazy" width="654px" height="980px">
        </picture>
    </div>

    <div class="scroll_feat_content_wrap js-wrap">
        <div class="fs-row">
            <div class="fs-cell">
                <header class="scroll_feat_head">
                    <h2 class="scroll_feat_title">
                        Why CGCC
                    </h2>
                </header>

                <div class="scroll_feat_items">
                    <div class="scroll_feat_item js-item">
                        <h3 class="scroll_feat_item_title">
                            Our unmatched location
                        </h3>
                    </div>
                    <div class="scroll_feat_item js-item">
                        <h3 class="scroll_feat_item_title">
                            We make higher education accessible
                        </h3>
                    </div>
                    <div class="scroll_feat_item js-item">
                        <h3 class="scroll_feat_item_title">
                            A caring, collaborative community
                        </h3>
                    </div>
                    <div class="scroll_feat_item js-item">
                        <h3 class="scroll_feat_item_title">
                            Imperdiet parturient orci suscipit eget
                        </h3>
                    </div>
                    <div class="scroll_feat_item js-item">
                        <h3 class="scroll_feat_item_title">
                            Senectus hendrerit massa nec himenaeos
                        </h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="scroll_feat js-scroll-feat">
	<div class="js-marker"></div>

	<div class="scroll_feat_picture_wrap">
		{% include '@partial-picture' with {
			class: 'scroll_feat',
			image: bg_image,
			alt: '',
			loading: 'lazy',
			default: img.portraitClassic.med,
			sources: {
				'1220px': img.wide.xlrg,
				'980px': img.wide.lrg,
				'740px': img.wide.med
			}
		} %}
	</div>

	<div class="scroll_feat_content_wrap js-wrap">
		<div class="fs-row">
			<div class="fs-cell">
				<header class="scroll_feat_head">
					<h2 class="scroll_feat_title">
						{{ title }}
					</h2>
				</header>

				<div class="scroll_feat_items">
					{% for item in items %}
						<div class="scroll_feat_item js-item">
							<h3 class="scroll_feat_item_title">
								{{ item.title }}
							</h3>
						</div>
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.