<div class="library_box js-library-box">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="library_box_inner">
                <div class="library_box_tabs">
                    <button type="button" class="library_box_tab js-swap" data-swap-target=".js-library-box-panel-1" data-swap-group="library-box" data-swap-active="true" data-swap-options='{ "collapse": false }'>
                        Books, CDs, DVDs
                    </button>
                    <button type="button" class="library_box_tab js-swap" data-swap-target=".js-library-box-panel-2" data-swap-group="library-box" data-swap-options='{ "collapse": false }'>
                        Articles
                    </button>
                    <button type="button" class="library_box_tab js-swap" data-swap-target=".js-library-box-panel-3" data-swap-group="library-box" data-swap-options='{ "collapse": false }'>
                        eBooks
                    </button>
                    <button type="button" class="library_box_tab js-swap" data-swap-target=".js-library-box-panel-4" data-swap-group="library-box" data-swap-options='{ "collapse": false }'>
                        Reference
                    </button>
                </div>

                <div class="library_box_content">
                    <div class="library_box_panels">
                        <div class="library_box_panel js-library-box-panel-1">
                            <header class="library_box_panel_head">
                                <div class="fs-row">
                                    <div class="fs-cell fs-lg-10 fs-lg-push-1">
                                        <h2 class="library_box_panel_subtitle">
                                            Find books, CDs, and DVDs
                                        </h2>
                                    </div>
                                </div>
                            </header>

                            <div class="library_box_grid fs-row">
                                <div class="library_box_grid_item fs-cell fs-lg-7 fs-lg-push-1">
                                    <form action="#" class="library_box_form js-form" data-type="books-cds-dvds">
                                        <div class="library_box_form_row">
                                            <div class="library_box_search_wrap">
                                                <input class="library_box_search_input" type="text" name="refkeyword" placeholder="Search by keyword...">
                                                <button class="library_box_submit_input button" type="submit">
                                                    <span class="button_inner">
                                                        <span class="button_text">Search</span>
                                                        <span class="button_icon">

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

                                                        </span>
                                                    </span>
                                                </button>
                                            </div>
                                        </div>

                                        <div class="library_box_form_row">
                                            <div class="library_box_radios_wrap">
                                                <label class="library_box_radio">
                                                    <input type="radio" class="library_box_radio_input" name="search_type" value="cgcc" checked="checked">
                                                    <span class="library_box_radio_label">
                                                        CGCC Library - Our library's collection
                                                    </span>
                                                </label>
                                                <label class="library_box_radio">
                                                    <input type="radio" class="library_box_radio_input" name="search_type" value="sage">
                                                    <span class="library_box_radio_label">
                                                        Sage Libraries - 70+ libraries in our system
                                                    </span>
                                                </label>
                                                <label class="library_box_radio">
                                                    <input type="radio" class="library_box_radio_input" name="search_type" value="worldcat">
                                                    <span class="library_box_radio_label">
                                                        WorldCat - 72,000 libraries nationwide
                                                    </span>
                                                </label>
                                            </div>
                                        </div>
                                    </form>

                                </div>

                                <div class="library_box_grid_item fs-cell fs-lg-3">
                                    <figure class="library_box_fig">

                                        <img class="library_box_image" srcset="https://images.fastspot.com/columbia-gorge-community-college/740x494/1 740w, https://images.fastspot.com/columbia-gorge-community-college/500x334/1 500w, https://images.fastspot.com/columbia-gorge-community-college/300x200/1 300w" src="https://images.fastspot.com/columbia-gorge-community-college/300x200/1" alt="CGCC Photo/Michelle Bose" loading="lazy" width="300" height="200">

                                        <figcaption>
                                            CGCC Photo/Michelle Bose
                                        </figcaption>
                                    </figure>
                                </div>
                            </div>
                        </div>
                        <div class="library_box_panel js-library-box-panel-2">
                            <header class="library_box_panel_head">
                                <div class="fs-row">
                                    <div class="fs-cell fs-lg-10 fs-lg-push-1">
                                        <h2 class="library_box_panel_subtitle">
                                            Find magazine and journal articles
                                        </h2>
                                    </div>
                                </div>
                            </header>

                            <div class="library_box_grid fs-row">
                                <div class="library_box_grid_item fs-cell fs-lg-7 fs-lg-push-1">
                                    <form action="#" class="library_box_form js-form" data-type="articles">
                                        <div class="library_box_form_row">
                                            <div class="library_box_search_wrap">
                                                <input class="library_box_search_input" type="text" name="refkeyword" placeholder="Search by keyword...">
                                                <button class="library_box_submit_input button" type="submit">
                                                    <span class="button_inner">
                                                        <span class="button_text">Search</span>
                                                        <span class="button_icon">

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

                                                        </span>
                                                    </span>
                                                </button>
                                            </div>
                                        </div>

                                        <div class="library_box_form_row">
                                            <div class="library_box_radios_wrap">
                                                <label class="library_box_radio">
                                                    <input type="radio" class="library_box_radio_input" name="search_type" value="ebsco" checked="checked">
                                                    <span class="library_box_radio_label">
                                                        Academic Search Complete
                                                    </span>
                                                </label>
                                                <label class="library_box_radio">
                                                    <input type="radio" class="library_box_radio_input" name="search_type" value="cinahl">
                                                    <span class="library_box_radio_label">
                                                        CINAHL - Nursing and medical articles
                                                    </span>
                                                </label>
                                                <label class="library_box_radio">
                                                    <input type="radio" class="library_box_radio_input" name="search_type" value="gale">
                                                    <span class="library_box_radio_label">
                                                        Gale PowerSearch - Broad range of subjects
                                                    </span>
                                                </label>
                                                <label class="library_box_radio">
                                                    <input type="radio" class="library_box_radio_input" name="search_type" value="infotrac">
                                                    <span class="library_box_radio_label">
                                                        Infotrac Newsstand - Articles from national and international newspapers
                                                    </span>
                                                </label>
                                            </div>
                                        </div>
                                    </form>

                                    <div class="library_box_cta_wrap">
                                        <a href="https://www.cgcc.edu/library/databases" class="library_box_cta">
                                            More Article Databases
                                        </a>
                                    </div>
                                </div>

                                <div class="library_box_grid_item fs-cell fs-lg-3">
                                    <figure class="library_box_fig">

                                        <img class="library_box_image" srcset="https://images.fastspot.com/columbia-gorge-community-college/740x494/2 740w, https://images.fastspot.com/columbia-gorge-community-college/500x334/2 500w, https://images.fastspot.com/columbia-gorge-community-college/300x200/2 300w" src="https://images.fastspot.com/columbia-gorge-community-college/300x200/2" alt="CGCC Photo/Michelle Bose" loading="lazy" width="300" height="200">

                                        <figcaption>
                                            CGCC Photo/Michelle Bose
                                        </figcaption>
                                    </figure>
                                </div>
                            </div>
                        </div>
                        <div class="library_box_panel js-library-box-panel-3">
                            <header class="library_box_panel_head">
                                <div class="fs-row">
                                    <div class="fs-cell fs-lg-10 fs-lg-push-1">
                                        <h2 class="library_box_panel_subtitle">
                                            Find online books (ebooks)
                                        </h2>
                                    </div>
                                </div>
                            </header>

                            <div class="library_box_grid fs-row">
                                <div class="library_box_grid_item fs-cell fs-lg-7 fs-lg-push-1">
                                    <form action="#" class="library_box_form js-form" data-type="ebooks">
                                        <div class="library_box_form_row">
                                            <div class="library_box_search_wrap">
                                                <input class="library_box_search_input" type="text" name="refkeyword" placeholder="Search by keyword...">
                                                <button class="library_box_submit_input button" type="submit">
                                                    <span class="button_inner">
                                                        <span class="button_text">Search</span>
                                                        <span class="button_icon">

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

                                                        </span>
                                                    </span>
                                                </button>
                                            </div>
                                        </div>

                                        <div class="library_box_form_row">
                                            <div class="library_box_radios_wrap">
                                                <label class="library_box_radio">
                                                    <input type="radio" class="library_box_radio_input" name="search_type" value="ebl" checked="checked">
                                                    <span class="library_box_radio_label">
                                                        Ebook Central - Read entire books
                                                    </span>
                                                </label>
                                            </div>
                                        </div>
                                    </form>

                                    <div class="library_box_cta_wrap">
                                        <a href="https://search.ebscohost.com/login.aspx?profile=ehost&defaultdb=nlebk&authtype=ip,cpid&custid=s5032734" class="library_box_cta">
                                            EBSCO - Academic ebooks collection
                                        </a>
                                    </div>
                                </div>

                                <div class="library_box_grid_item fs-cell fs-lg-3">
                                    <figure class="library_box_fig">

                                        <img class="library_box_image" srcset="https://images.fastspot.com/columbia-gorge-community-college/740x494/3 740w, https://images.fastspot.com/columbia-gorge-community-college/500x334/3 500w, https://images.fastspot.com/columbia-gorge-community-college/300x200/3 300w" src="https://images.fastspot.com/columbia-gorge-community-college/300x200/3" alt="CGCC Photo/Michelle Bose" loading="lazy" width="300" height="200">

                                        <figcaption>
                                            CGCC Photo/Michelle Bose
                                        </figcaption>
                                    </figure>
                                </div>
                            </div>
                        </div>
                        <div class="library_box_panel js-library-box-panel-4">
                            <header class="library_box_panel_head">
                                <div class="fs-row">
                                    <div class="fs-cell fs-lg-10 fs-lg-push-1">
                                        <h2 class="library_box_panel_subtitle">
                                            Search dictionaries and encyclopedias
                                        </h2>
                                    </div>
                                </div>
                            </header>

                            <div class="library_box_grid fs-row">
                                <div class="library_box_grid_item fs-cell fs-lg-7 fs-lg-push-1">
                                    <form action="#" class="library_box_form js-form" data-type="reference">
                                        <div class="library_box_form_row">
                                            <div class="library_box_search_wrap">
                                                <input class="library_box_search_input" type="text" name="refkeyword" placeholder="Search by keyword...">
                                                <button class="library_box_submit_input button" type="submit">
                                                    <span class="button_inner">
                                                        <span class="button_text">Search</span>
                                                        <span class="button_icon">

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

                                                        </span>
                                                    </span>
                                                </button>
                                            </div>
                                        </div>

                                        <div class="library_box_form_row">
                                            <div class="library_box_radios_wrap">
                                                <label class="library_box_radio">
                                                    <input type="radio" class="library_box_radio_input" name="search_type" value="galeref" checked="checked">
                                                    <span class="library_box_radio_label">
                                                        Gale Virtual Reference - Reference sources, biographies and chronologies
                                                    </span>
                                                </label>
                                            </div>
                                        </div>
                                    </form>

                                </div>

                                <div class="library_box_grid_item fs-cell fs-lg-3">
                                    <figure class="library_box_fig">

                                        <img class="library_box_image" srcset="https://images.fastspot.com/columbia-gorge-community-college/740x494/4 740w, https://images.fastspot.com/columbia-gorge-community-college/500x334/4 500w, https://images.fastspot.com/columbia-gorge-community-college/300x200/4 300w" src="https://images.fastspot.com/columbia-gorge-community-college/300x200/4" alt="CGCC Photo/Michelle Bose" loading="lazy" width="300" height="200">

                                        <figcaption>
                                            CGCC Photo/Michelle Bose
                                        </figcaption>
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="library_box js-library-box">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="library_box_inner">
				<div class="library_box_tabs">
					{% for item in items %}
						<button type="button" class="library_box_tab js-swap" data-swap-target=".js-library-box-panel-{{ loop.index }}" data-swap-group="library-box" {% if loop.first %}data-swap-active="true" {% endif %} data-swap-options='{ "collapse": false }'>
							{{ item.title }}
						</button>
					{% endfor %}
				</div>

				<div class="library_box_content">
					<div class="library_box_panels">
						{% for item in items %}
							<div class="library_box_panel js-library-box-panel-{{ loop.index }}">
								<header class="library_box_panel_head">
									<div class="fs-row">
										<div class="fs-cell fs-lg-10 fs-lg-push-1">
											<h2 class="library_box_panel_subtitle">
												{{ item.subtitle }}
											</h2>
										</div>
									</div>
								</header>

								<div class="library_box_grid fs-row">
									<div class="library_box_grid_item fs-cell fs-lg-7 fs-lg-push-1">
										<form action="#" class="library_box_form js-form" data-type="{{ item.id }}">
											<div class="library_box_form_row">
												<div class="library_box_search_wrap">
													<input class="library_box_search_input" type="text" name="refkeyword" placeholder="Search by keyword...">
													<button class="library_box_submit_input button" type="submit">
														<span class="button_inner">
															<span class="button_text">Search</span>
															<span class="button_icon">
																{{ icon("arrow_right") }}
															</span>
														</span>
													</button>
												</div>
											</div>

											<div class="library_box_form_row">
												<div class="library_box_radios_wrap">
													{% for option in item.options.values %}
														<label class="library_box_radio">
															<input type="radio" class="library_box_radio_input" name="{{ item.options.key }}" value="{{ option.value }}" {% if loop.first %}checked="checked"{% endif %}>
															<span class="library_box_radio_label">
																{{ option.label }}
															</span>
														</label>
													{% endfor %}
												</div>
											</div>
										</form>

										{% if item.cta %}
											<div class="library_box_cta_wrap">
												<a href="{{ item.cta.url }}" class="library_box_cta">
													{{ item.cta.title }}
												</a>
											</div>
										{% endif %}
									</div>

									<div class="library_box_grid_item fs-cell fs-lg-3">
										<figure class="library_box_fig">
											{% include '@partial-image' with {
												class: 'library_box',
												alt: item.image_caption,
												image: item.image,
												loading: 'lazy',
												sources: [
													img.classic.sml,
													img.classic.xsml,
													img.classic.xxsml
												],
											} %}

											{% if item.image_caption %}
												<figcaption>
													{{ item.image_caption }}
												</figcaption>
											{% endif %}
										</figure>
									</div>
								</div>
							</div>
						{% endfor %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.