CGCC Component Library

Home Feature 

<div class="home_feat js-home-feat" data-themes='["blue","orange","purple","red","green"]' data-interval="5000" data-current-theme="blue">
    <div class="home_feat_img_wrap">

        <picture class="home_feat_picture">
            <source media="(min-width: 1220px)" srcset="https://images.fastspot.com/columbia-gorge-community-college/1440x960/4">
            <source media="(min-width: 980px)" srcset="https://images.fastspot.com/columbia-gorge-community-college/1220x814/4">
            <source media="(min-width: 740px)" srcset="https://images.fastspot.com/columbia-gorge-community-college/980x654/4">
            <img class="home_feat_image" src="//images.fastspot.com/columbia-gorge-community-college/915x1220/4" alt="" loading="eager" width="915px" height="1220px">
        </picture>

        <div class="home_feat_mobile_logo">
            <a href="#" aria-label="CGCC Logo">

                <svg class="icon icon_logo_monotone">
                    <use href="/images/icons.svg#logo_monotone" />
                </svg>

            </a>
        </div>
    </div>

    <div class="home_feat_content_wrap">
        <div class="home_feat_border" data-anim="border" style="--anim-delay: 1500ms;"></div>

        <div class="fs-row">
            <div class="fs-cell fs-lg-7 fs-xl-5">
                <div class="home_feat_content_wrap_items js-content">
                    <div class="home_feat_content_bg" data-anim="bg" style="--anim-duration: 2000ms;"></div>

                    <div class="home_feat_content_wrap_item is_top">
                        <div class="home_feat_desktop_logo">
                            <a href="#" aria-label="CGCC Logo">

                                <svg class="icon icon_logo_monotone">
                                    <use href="/images/icons.svg#logo_monotone" />
                                </svg>

                            </a>
                        </div>
                    </div>

                    <div class="home_feat_content_wrap_item is_middle">
                        <h2 class="home_feat_title" data-anim="content-item" style="--anim-delay: 1000ms;">
                            We are the heart of higher education in the Columbia River Gorge.
                        </h2>

                        <div class="home_feat_desc_wrap" data-anim="content-item" style="--anim-delay: 1250ms;">
                            <div class="typography">
                                CGCC offers a flexible schedule of credit and non-credit courses taught by faculty members who have studied, taught, researched and volunteered around the globe.
                            </div>
                        </div>

                        <div class="home_feat_ctas_wrap" data-anim="content-item" style="--anim-delay: 1500ms;">
                            <div class="home_feat_ctas">
                                <div class="home_feat_cta">
                                    <a href="#" class="button theme_light">
                                        <div class="button_inner">
                                            <span class="button_text">Apply Today</span>

                                            <span class="button_icon">

                                                <svg class="icon icon_arrow_right">
                                                    <use href="/images/icons.svg#arrow_right" />
                                                </svg>

                                            </span>
                                        </div>
                                    </a>
                                </div>
                                <div class="home_feat_cta">
                                    <a href="#" class="button theme_light">
                                        <div class="button_inner">
                                            <span class="button_text">Explore Programs</span>

                                            <span class="button_icon">

                                                <svg class="icon icon_arrow_right">
                                                    <use href="/images/icons.svg#arrow_right" />
                                                </svg>

                                            </span>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="home_feat_content_wrap_item is_bottom">
                        <div class="home_feat_content_wrap_item is_links" data-anim="content-item" style="--anim-delay: 1750ms;">

                            <nav class="js-nav js-home-feat-links nav home_feat_links" aria-labelledby="home_feat_links_title">
                                <div class="nav_header home_feat_links_header">
                                    <h2 class="nav_title home_feat_links_title" id="home_feat_links_title">Ways to Study</h2>
                                </div>
                                <ul class="js-nav-list js-home-feat-links-list nav_list home_feat_links_list" aria-labelledby="home_feat_links_title">
                                    <li class="js-nav-item js-home-feat-links-item js-home-feat-links-item-1 nav_item home_feat_links_item">
                                        <div class="nav_item_inner home_feat_links_item_inner">
                                            <a class="js-nav-link js-home-feat-links-link nav_link home_feat_links_link" href="#">
                                                <div class="nav_link_inner home_feat_links_link_inner">

                                                    <span class="nav_link_icon home_feat_links_link_icon" aria-hidden="true">
                                                        <svg class="icon icon_arrow_right">
                                                            <use href="/images/icons.svg#arrow_right" />
                                                        </svg>
                                                    </span>
                                                    <span class="nav_link_label home_feat_links_link_label">Transfer Program</span>
                                                </div>
                                            </a>
                                        </div>
                                    </li>
                                    <li class="js-nav-item js-home-feat-links-item js-home-feat-links-item-2 nav_item home_feat_links_item">
                                        <div class="nav_item_inner home_feat_links_item_inner">
                                            <a class="js-nav-link js-home-feat-links-link nav_link home_feat_links_link" href="#">
                                                <div class="nav_link_inner home_feat_links_link_inner">

                                                    <span class="nav_link_icon home_feat_links_link_icon" aria-hidden="true">
                                                        <svg class="icon icon_arrow_right">
                                                            <use href="/images/icons.svg#arrow_right" />
                                                        </svg>
                                                    </span>
                                                    <span class="nav_link_label home_feat_links_link_label">Community Education</span>
                                                </div>
                                            </a>
                                        </div>
                                    </li>
                                    <li class="js-nav-item js-home-feat-links-item js-home-feat-links-item-3 nav_item home_feat_links_item">
                                        <div class="nav_item_inner home_feat_links_item_inner">
                                            <a class="js-nav-link js-home-feat-links-link nav_link home_feat_links_link" href="#">
                                                <div class="nav_link_inner home_feat_links_link_inner">

                                                    <span class="nav_link_icon home_feat_links_link_icon" aria-hidden="true">
                                                        <svg class="icon icon_arrow_right">
                                                            <use href="/images/icons.svg#arrow_right" />
                                                        </svg>
                                                    </span>
                                                    <span class="nav_link_label home_feat_links_link_label">Career & Technical Education</span>
                                                </div>
                                            </a>
                                        </div>
                                    </li>
                                    <li class="js-nav-item js-home-feat-links-item js-home-feat-links-item-4 nav_item home_feat_links_item">
                                        <div class="nav_item_inner home_feat_links_item_inner">
                                            <a class="js-nav-link js-home-feat-links-link nav_link home_feat_links_link" href="#">
                                                <div class="nav_link_inner home_feat_links_link_inner">

                                                    <span class="nav_link_icon home_feat_links_link_icon" aria-hidden="true">
                                                        <svg class="icon icon_arrow_right">
                                                            <use href="/images/icons.svg#arrow_right" />
                                                        </svg>
                                                    </span>
                                                    <span class="nav_link_label home_feat_links_link_label">Pre-College (ESOL, GED)<sup>&reg;</sup></span>
                                                </div>
                                            </a>
                                        </div>
                                    </li>
                                    <li class="js-nav-item js-home-feat-links-item js-home-feat-links-item-5 nav_item home_feat_links_item">
                                        <div class="nav_item_inner home_feat_links_item_inner">
                                            <a class="js-nav-link js-home-feat-links-link nav_link home_feat_links_link" href="#">
                                                <div class="nav_link_inner home_feat_links_link_inner">

                                                    <span class="nav_link_icon home_feat_links_link_icon" aria-hidden="true">
                                                        <svg class="icon icon_arrow_right">
                                                            <use href="/images/icons.svg#arrow_right" />
                                                        </svg>
                                                    </span>
                                                    <span class="nav_link_label home_feat_links_link_label">Dual Enrollment</span>
                                                </div>
                                            </a>
                                        </div>
                                    </li>
                                    <li class="js-nav-item js-home-feat-links-item js-home-feat-links-item-6 nav_item home_feat_links_item">
                                        <div class="nav_item_inner home_feat_links_item_inner">
                                            <a class="js-nav-link js-home-feat-links-link nav_link home_feat_links_link" href="#">
                                                <div class="nav_link_inner home_feat_links_link_inner">

                                                    <span class="nav_link_icon home_feat_links_link_icon" aria-hidden="true">
                                                        <svg class="icon icon_arrow_right">
                                                            <use href="/images/icons.svg#arrow_right" />
                                                        </svg>
                                                    </span>
                                                    <span class="nav_link_label home_feat_links_link_label">Catalog</span>
                                                </div>
                                            </a>
                                        </div>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="home_feat_gradient" data-anim="gradient" data-anim-last-elem style="--anim-delay: 2500ms;"></div>
    </div>
</div>
 
{# {% include "@component-home-feature" with {
	themes: ['blue', 'orange', 'purple', 'red', 'green'],
	bg_image: 4,
	title: 'We are the heart of higher education in the Columbia River Gorge.',
	description:
		'CGCC offers a flexible schedule of credit and non-credit courses taught by faculty members who have studied, taught, researched and volunteered around the globe.',
	ctas: [
		{
			title: 'Apply Today',
			url: '#'
		},
		{
			title: 'Explore Programs',
			url: '#'
		}
	],
	links: {
		title: 'Ways to Study',
		items: [
			{
				title: 'Transfer Program',
				url: '#'
			},
			{
				title: 'Community Education',
				url: '#'
			},
			{
				title: 'Career & Technical Education',
				url: '#'
			},
			{
				title: 'Pre-College (ESOL, GED)<sup>&reg;</sup>',
				url: '#'
			},
			{
				title: 'Dual Enrollment',
				url: '#'
			},
			{
				title: 'Catalog',
				url: '#'
			}
		]
	}
} %} #}

<div class="home_feat js-home-feat" data-themes='{{ themes|json_encode }}' data-interval="5000" data-current-theme="{{ themes[0] }}">
	<div class="home_feat_img_wrap">
		{% include '@partial-picture' with {
			class: 'home_feat',
			image: bg_image,
			alt: '',
			loading: 'eager',
			default: img.portraitFull.lrg,
			sources: {
				'1220px': img.classic.xlrg,
				'980px': img.classic.lrg,
				'740px': img.classic.med,
			}
		} %}

		<div class="home_feat_mobile_logo">
			<a href="#" aria-label="CGCC Logo">
				{{ icon("logo_monotone") }}
			</a>
		</div>
	</div>

	<div class="home_feat_content_wrap">
		<div class="home_feat_border" data-anim="border" style="--anim-delay: 1500ms;"></div>

		<div class="fs-row">
			<div class="fs-cell fs-lg-7 fs-xl-5">
				<div class="home_feat_content_wrap_items js-content">
					<div class="home_feat_content_bg" data-anim="bg" style="--anim-duration: 2000ms;"></div>
					
					<div class="home_feat_content_wrap_item is_top">
						<div class="home_feat_desktop_logo">
							<a href="#" aria-label="CGCC Logo">
								{{ icon("logo_monotone") }}
							</a>
						</div>
					</div>

					<div class="home_feat_content_wrap_item is_middle">
						<h2 class="home_feat_title" data-anim="content-item" style="--anim-delay: 1000ms;">
							{{ title }}
						</h2>

						<div class="home_feat_desc_wrap" data-anim="content-item" style="--anim-delay: 1250ms;">
							<div class="typography">
								{{ description }}
							</div>
						</div>

						<div class="home_feat_ctas_wrap" data-anim="content-item" style="--anim-delay: 1500ms;">
							<div class="home_feat_ctas">
								{% for cta in ctas %}
									<div class="home_feat_cta">
										{% include "@partial-button" with {
											theme: "light",
											text: cta.title,
											icon: "arrow_right"
										} %}
									</div>
								{% endfor %}
							</div>
						</div>
					</div>

					{% if links.items|length %}
						<div class="home_feat_content_wrap_item is_bottom">
							<div class="home_feat_content_wrap_item is_links" data-anim="content-item" style="--anim-delay: 1750ms;">
								{% include '@navigation-basic' with {
									class: 'home_feat_links',
									icon: 'arrow_right',
									modifier: '',
									title: links.title,
									toggle_icon: '',
									active_index: '',
									links: links.items
								} %}
							</div>
						</div>
					{% endif %}
				</div>
			</div>
		</div>

		<div class="home_feat_gradient" data-anim="gradient" data-anim-last-elem style="--anim-delay: 2500ms;"></div>
	</div>
</div>

No notes defined.