VCUarts Component Library

Related News 

<!-- Related News -->
<div class="news_related">
    <div class="news_related_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="news_related_header_inner">
                    <div class="news_related_title">
                        <h2 class="news_related_title_primary">Nullam dictum felis eu pede mollis pretium</h2>
                        <p class="news_related_title_secondary">Ipsum Consectetur Pharetra Purus</p>
                    </div>
                    <div class="news_related_description">
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="news_related_body">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="news_related_body_inner">
                    <ul class="news_related_items" aria-label="Nullam dictum felis eu pede mollis pretium">
                        <li class="news_related_item">
                            <div class="news_related_item_media">
                                <figure class="news_related_item_figure">
                                    <a class="news_related_item_figure_link" href="#" aria-label="Read more about CoStar Group announces $18M commitment to VCU for the construction of the CoStar Center for Arts and Innovation" tabindex="-1">

                                        <img class="news_item_image" srcset="https://images.fastspot.com/vcuarts/980x654/8 980w, https://images.fastspot.com/vcuarts/740x494/8 740w, https://images.fastspot.com/vcuarts/500x334/8 500w, https://images.fastspot.com/vcuarts/300x200/8 300w" sizes="(min-width: 980px) 20vw, 25vw" src="https://images.fastspot.com/vcuarts/300x200/8" alt="" loading="lazy" width="300" height="200">
                                    </a>
                                </figure>
                            </div>
                            <div class="news_related_item_wrapper">
                                <div class="news_related_item_header">
                                    <h2 class="news_related_item_title">

                                        <a href="#" class="news_related_item_title_link">
                                            <span class="news_related_item_title_link_inner">
                                                <span class="news_related_item_title_link_label">CoStar Group announces $18M commitment to VCU for the construction of the CoStar Center for Arts and Innovation</span>
                                            </span>
                                        </a>
                                    </h2>
                                    <div class="news_related_item_meta">
                                        <div class="news_related_item_categories">
                                            <ul class="news_related_item_categories_list" aria-label="Categories">
                                                <li class="news_related_item_categories_item">
                                                    <a class="news_related_item_categories_link" href="#">News Category One</a>,
                                                </li>
                                                <li class="news_related_item_categories_item">
                                                    <a class="news_related_item_categories_link" href="#">News Category Two</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="news_related_item_separator"></div>
                                        <div class="news_related_item_departments">
                                            <ul class="news_related_item_departments_list" aria-label="Departments">
                                                <li class="news_related_item_departments_item">
                                                    <a class="news_related_item_departments_link" href="#">Department</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="news_related_item_body">
                                    <div class="news_related_item_publish">
                                        <span class="news_related_item_publish_label">01/23/2023</span>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="news_related_item">
                            <div class="news_related_item_media">
                                <figure class="news_related_item_figure">
                                    <a class="news_related_item_figure_link" href="#" aria-label="Read more about Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." tabindex="-1">

                                        <img class="news_item_image" srcset="https://images.fastspot.com/vcuarts/980x654/6 980w, https://images.fastspot.com/vcuarts/740x494/6 740w, https://images.fastspot.com/vcuarts/500x334/6 500w, https://images.fastspot.com/vcuarts/300x200/6 300w" sizes="(min-width: 980px) 20vw, 25vw" src="https://images.fastspot.com/vcuarts/300x200/6" alt="" loading="lazy" width="300" height="200">
                                    </a>
                                </figure>
                            </div>
                            <div class="news_related_item_wrapper">
                                <div class="news_related_item_header">
                                    <h2 class="news_related_item_title">

                                        <a href="#" class="news_related_item_title_link">
                                            <span class="news_related_item_title_link_inner">
                                                <span class="news_related_item_title_link_label">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span>
                                            </span>
                                        </a>
                                    </h2>
                                    <div class="news_related_item_meta">
                                        <div class="news_related_item_categories">
                                            <ul class="news_related_item_categories_list" aria-label="Categories">
                                                <li class="news_related_item_categories_item">
                                                    <a class="news_related_item_categories_link" href="#">News Category One</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="news_related_item_separator"></div>
                                        <div class="news_related_item_departments">
                                            <ul class="news_related_item_departments_list" aria-label="Departments">
                                                <li class="news_related_item_departments_item">
                                                    <a class="news_related_item_departments_link" href="#">Department</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="news_related_item_body">
                                    <div class="news_related_item_publish">
                                        <span class="news_related_item_publish_label">01/23/2023</span>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="news_related_item">
                            <div class="news_related_item_media">
                                <figure class="news_related_item_figure">
                                    <a class="news_related_item_figure_link" href="#" aria-label="Read more about CoStar Group announces $18M commitment to VCU for the construction of the CoStar Center for Arts and Innovation" tabindex="-1">

                                        <img class="news_item_image" srcset="https://images.fastspot.com/vcuarts/980x654/2 980w, https://images.fastspot.com/vcuarts/740x494/2 740w, https://images.fastspot.com/vcuarts/500x334/2 500w, https://images.fastspot.com/vcuarts/300x200/2 300w" sizes="(min-width: 980px) 20vw, 25vw" src="https://images.fastspot.com/vcuarts/300x200/2" alt="" loading="lazy" width="300" height="200">
                                    </a>
                                </figure>
                            </div>
                            <div class="news_related_item_wrapper">
                                <div class="news_related_item_header">
                                    <h2 class="news_related_item_title">

                                        <a href="#" class="news_related_item_title_link">
                                            <span class="news_related_item_title_link_inner">
                                                <span class="news_related_item_title_link_label">CoStar Group announces $18M commitment to VCU for the construction of the CoStar Center for Arts and Innovation</span>
                                            </span>
                                        </a>
                                    </h2>
                                    <div class="news_related_item_meta">
                                        <div class="news_related_item_categories">
                                            <ul class="news_related_item_categories_list" aria-label="Categories">
                                                <li class="news_related_item_categories_item">
                                                    <a class="news_related_item_categories_link" href="#">News Category One</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="news_related_item_separator"></div>
                                        <div class="news_related_item_departments">
                                            <ul class="news_related_item_departments_list" aria-label="Departments">
                                                <li class="news_related_item_departments_item">
                                                    <a class="news_related_item_departments_link" href="#">Department</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="news_related_item_body">
                                    <div class="news_related_item_publish">
                                        <span class="news_related_item_publish_label">01/23/2023</span>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="news_related_footer">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="news_related_footer_inner">
                    <div class="news_related_action">

                        <a href="#" class="news_related_link">
                            <span class="news_related_link_inner">
                                <span class="news_related_link_label">View All News</span><span class="icon_nowrap news_related_link_icon" aria-hidden="true">&#xfeff;
                                    <svg class="icon icon_arrow_right">
                                        <use href="/images/icons.svg#arrow_right" />
                                    </svg>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Related News -->
 
{#
	{% include '@component-related-news' with {
		page_nav_id: '',
		title: 'Title Primary',
		secondary_title: 'Title Secondary',
		description: 'Description',
		link: {
			url: '#',
			label: 'Link Label',
			aria: 'Link Aria'
		},
		items: [
			{
				image: '1',
				title: 'Item Title',
				description: 'Item Description'
			}
		]
	} %}
#}

<!-- Related News -->
<div class="{% if page_nav_id %}js-page-nav-component {% endif %}news_related"{% if page_nav_id %} id="{{ page_nav_id }}"{% endif %}>
	<div class="news_related_header">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="news_related_header_inner">
					<div class="news_related_title">
						<h2 class="news_related_title_primary">{{ title }}</h2>
						{% if secondary_title %}
							<p class="news_related_title_secondary">{{ secondary_title }}</p>
						{% endif %}
					</div>
					{% if description %}
						<div class="news_related_description">
							{{ description }}
						</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
	<div class="news_related_body">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="news_related_body_inner">
					<ul class="news_related_items" aria-label="{{ title }}">
						{% for item in items %}
							<li class="news_related_item">
								{% if item.image %}
									<div class="news_related_item_media">
										<figure class="news_related_item_figure">
											<a class="news_related_item_figure_link" href="{{ item.url }}" aria-label="Read more about {{ item.title }}" tabindex="-1">
												{% include '@partial-image' with {
													class: 'news_item',
													alt: '',
													image: item.image,
													loading: 'lazy',
													sources: [
														img.classic.med,
														img.classic.sml,
														img.classic.xsml,
														img.classic.xxsml
													],
													sizes: [
														"(min-width: 980px) 20vw",
														"25vw"
													]
												} %}
											</a>
										</figure>
									</div>
								{% endif %}
								<div class="news_related_item_wrapper">
									<div class="news_related_item_header">
										<h2 class="news_related_item_title">
											{% include '@partial-link' with {
												class: 'news_related_item_title',
												title: item.title,
												url: item.url
											} %}
										</h2>
										<div class="news_related_item_meta">
											<div class="news_related_item_categories">
												<ul class="news_related_item_categories_list" aria-label="Categories">
													{% for category in item.categories %}
														<li class="news_related_item_categories_item">
															<a class="news_related_item_categories_link" href="{{ category.url }}">{{ category.label }}</a>{% if not loop.last %}, {% endif %}
														</li>
													{% endfor %}
												</ul>
											</div>
											<div class="news_related_item_separator"></div>
											<div class="news_related_item_departments">
												<ul class="news_related_item_departments_list" aria-label="Departments">
													{% for department in item.departments %}
														<li class="news_related_item_departments_item">
															<a class="news_related_item_departments_link" href="{{ department.url }}">{{ department.label }}</a>{% if not loop.last %}, {% endif %}
														</li>
													{% endfor %}
												</ul>
											</div>
										</div>
									</div>
									<div class="news_related_item_body">
										<div class="news_related_item_publish">
											<span class="news_related_item_publish_label">{{ item.publish|date('m/d/Y') }}</span>
										</div>
									</div>
								</div>
							</li>
						{% endfor %}
					</ul>
				</div>
			</div>
		</div>
	</div>
	{% if link %}
		<div class="news_related_footer">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="news_related_footer_inner">
						<div class="news_related_action">
							{% include '@partial-link' with {
								class: 'news_related',
								title: link.label,
								url: link.url,
								icon: 'arrow_right',
								aria: link.aria,
								nowrap: true
							} %}
						</div>
					</div>
				</div>
			</div>
		</div>
	{% endif %}
</div>
<!-- END: Related News -->

No notes defined.