CGCC Component Library

Link Group Meta 

<!-- Link Group -->
<div class="link_group_meta">
    <div class="fs-row">
        <div class="fs-cell fs-lg-8 fs-lg-justify-center">
            <div class="link_group_meta_inner">
                <div class="link_group_meta_header">
                    <h2 class="link_group_meta_title">Get in Touch</h2>

                    <div class="link_group_meta_description">
                        <p>2021-2022</p>
                    </div>
                </div>
                <div class="link_group_meta_list">
                    <div class="link_group_meta_item">
                        <div class="link_group_meta_item_header">
                            <h3 class="link_group_meta_item_title">

                                <a href="#" class="link_group_meta_item_link">
                                    <span class="link_group_meta_item_link_inner">
                                        <span class="link_group_meta_item_link_label">Arts Oregon Transfer (AOT)</span><span class="link_group_meta_item_link_icon icon_nowrap" aria-hidden="true">&#xfeff;
                                            <svg class="icon icon_arrow_right">
                                                <use href="/images/icons.svg#arrow_right" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </h3>

                            <div class="link_group_meta_item_subtitle">
                                On Campus
                            </div>
                        </div>

                        <div class="link_group_meta_item_desc">
                            <p>Associate Degree</p>
                        </div>
                    </div>
                    <div class="link_group_meta_item">
                        <div class="link_group_meta_item_header">
                            <h3 class="link_group_meta_item_title">

                                <a href="#" class="link_group_meta_item_link">
                                    <span class="link_group_meta_item_link_inner">
                                        <span class="link_group_meta_item_link_label">Science Oregon Transfer-Business (ASOT-BUS)</span><span class="link_group_meta_item_link_icon icon_nowrap" aria-hidden="true">&#xfeff;
                                            <svg class="icon icon_arrow_right">
                                                <use href="/images/icons.svg#arrow_right" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </h3>

                            <div class="link_group_meta_item_subtitle">
                                On Campus
                            </div>
                        </div>

                        <div class="link_group_meta_item_desc">
                            <p>Associate Degree</p>
                        </div>
                    </div>
                    <div class="link_group_meta_item">
                        <div class="link_group_meta_item_header">
                            <h3 class="link_group_meta_item_title">

                                <a href="#" class="link_group_meta_item_link">
                                    <span class="link_group_meta_item_link_inner">
                                        <span class="link_group_meta_item_link_label">Science (AS)</span><span class="link_group_meta_item_link_icon icon_nowrap" aria-hidden="true">&#xfeff;
                                            <svg class="icon icon_arrow_right">
                                                <use href="/images/icons.svg#arrow_right" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </h3>

                            <div class="link_group_meta_item_subtitle">
                                Online
                            </div>
                        </div>

                        <div class="link_group_meta_item_desc">
                            <p>Associate Degree</p>
                        </div>
                    </div>
                    <div class="link_group_meta_item">
                        <div class="link_group_meta_item_header">
                            <h3 class="link_group_meta_item_title">

                                <a href="#" class="link_group_meta_item_link">
                                    <span class="link_group_meta_item_link_inner">
                                        <span class="link_group_meta_item_link_label">Biology</span><span class="link_group_meta_item_link_icon icon_nowrap" aria-hidden="true">&#xfeff;
                                            <svg class="icon icon_arrow_right">
                                                <use href="/images/icons.svg#arrow_right" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </h3>

                            <div class="link_group_meta_item_subtitle">
                                Hybrid
                            </div>
                        </div>

                        <div class="link_group_meta_item_desc">
                            <p>Associate Degree</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Link Group -->
 
{#
	{% include '@component-link-group-meta' with {
		title: 'Title',
		items: [
			{
				title: 'Item Title',
				url: '#',
				icon: 'caret_right'
			}
		]
	} %}
#}

<!-- Link Group -->
<div class="link_group_meta">
	<div class="fs-row">
		<div class="fs-cell {{ cell }}">
			<div class="link_group_meta_inner">
				<div class="link_group_meta_header">
					<h2 class="link_group_meta_title">{{ title }}</h2>
					
					{% if description %}
						<div class="link_group_meta_description">
							<p>{{ description }}</p>
						</div>
					{% endif %}
				</div>
				<div class="link_group_meta_list">
					{% for item in items %}
						<div class="link_group_meta_item">
							<div class="link_group_meta_item_header">
								<h3 class="link_group_meta_item_title">
									{% include '@partial-link' with {
										class: 'link_group_meta_item',
										title: item.title,
										url: item.url,
										icon: 'arrow_right',
										aria: '',
										nowrap: true
									} %}
								</h3>

								{% if item.subtitle %}
									<div class="link_group_meta_item_subtitle">
										{{ item.subtitle }}
									</div>
								{% endif %}
							</div>

							{% if item.description %}
								<div class="link_group_meta_item_desc">
									<p>{{ item.description }}</p>
								</div>
							{% endif %}
						</div>
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Link Group -->

No notes defined.