Paul Smith's College Component Library

Spotlight News 

<!-- Spotlight News -->
<div class="news_spotlight component_theme_white component_spacing_margin">
    <div class="news_spotlight_header has_description">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="news_spotlight_header_inner">
                    <div class="news_spotlight_header_intro">
                        <h2 class="news_spotlight_title">Support Paul Smith's College</h2>
                        <p class="news_spotlight_label">Inspire a Lasting Future</p>
                    </div>
                    <div class="news_spotlight_header_group">
                        <div class="news_spotlight_description">
                            <p>Paul Smith's is powered by the support of our alumni, families of students, and local communities. Whether by giving your time, expertise, or a donation, your generosity shapes the future of our campus and student experience.</p>
                        </div>
                        <div class="news_spotlight_action">

                            <a href="#" class="base_link">
                                <span class="base_link_inner">
                                    <span class="base_link_label">Discover Ways to Give</span><span class="icon_nowrap base_link_icon" aria-hidden="true">&#xfeff;
                                        <svg class="icon icon_chevron_right">
                                            <use href="/images/icons.svg#chevron_right" />
                                        </svg>
                                    </span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="news_spotlight_body">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="news_spotlight_body_inner">
                    <div class="news_spotlight_featured">
                        <h3 class="news_spotlight_category featured">Giving News</h3>
                        <div class="news_spotlight_featured_item">
                            <figure class="news_spotlight_featured_figure">
                                <a class="news_spotlight_featured_figure_link" href="#" aria-label="Read more about Paul Smith's College receives $1 million award from Northern Border Regional Commission's Forest Economy Program" tabindex="-1">

                                    <img class="news_spotlight_featured_image" srcset="https://images.fastspot.com/paul-smiths-college/980x980/12 980w, https://images.fastspot.com/paul-smiths-college/740x740/12 740w, https://images.fastspot.com/paul-smiths-college/500x500/12 500w, https://images.fastspot.com/paul-smiths-college/300x300/12 300w, https://images.fastspot.com/paul-smiths-college/100x100/12 100w" sizes="(min-width: 1440px) 775px, (min-width: 1220px) 662px, (min-width: 980px) 525px, 98vw" src="https://images.fastspot.com/paul-smiths-college/100x100/12" alt="" loading="lazy" width="100" height="100">
                                </a>
                            </figure>
                            <div class="news_spotlight_featured_wrapper">
                                <div class="news_spotlight_featured_header">
                                    <h4 class="news_spotlight_featured_title">

                                        <a href="#" class="news_spotlight_featured_title_link">
                                            <span class="news_spotlight_featured_title_link_inner">
                                                <span class="news_spotlight_featured_title_link_label">Paul Smith's College receives $1 million award from Northern Border Regional Commission's Forest Economy Program</span>
                                            </span>
                                        </a>
                                    </h4>
                                </div>
                                <div class="news_spotlight_featured_body">
                                    <div class="news_spotlight_featured_details">
                                        <div class="news_spotlight_featured_detail news_spotlight_featured_date">
                                            <span class="news_spotlight_featured_detail_hint">Published:&nbsp;</span>
                                            <time class="news_spotlight_featured_detail_label" datetime="2024-02-04 17:00:00">Feb 4, 2024</time>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="news_spotlight_related">
                        <h3 class="news_spotlight_category related">Giving News</h3>
                        <ul class="news_spotlight_items" aria-label="Giving News">
                            <li class="news_spotlight_item">
                                <div class="news_spotlight_item_wrapper">
                                    <div class="news_spotlight_item_header">
                                        <h4 class="news_spotlight_item_title">

                                            <a href="#" class="news_spotlight_item_title_link">
                                                <span class="news_spotlight_item_title_link_inner">
                                                    <span class="news_spotlight_item_title_link_label">Paul Smith's College Collaborates with Landowners to Safeguard Local Waterways</span>
                                                </span>
                                            </a>
                                        </h4>
                                    </div>
                                    <div class="news_spotlight_item_body">
                                        <div class="news_spotlight_item_details">
                                            <div class="news_spotlight_item_detail news_spotlight_item_date">
                                                <span class="news_spotlight_item_detail_hint">Published:&nbsp;</span>
                                                <time class="news_spotlight_item_detail_label" datetime="2023-08-23 17:00:00">Aug 23, 2023</time>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="news_spotlight_item">
                                <div class="news_spotlight_item_wrapper">
                                    <div class="news_spotlight_item_header">
                                        <h4 class="news_spotlight_item_title">

                                            <a href="#" class="news_spotlight_item_title_link">
                                                <span class="news_spotlight_item_title_link_inner">
                                                    <span class="news_spotlight_item_title_link_label">Paul Smith's College VIC Announces its Third Annual Lecture Series</span>
                                                </span>
                                            </a>
                                        </h4>
                                    </div>
                                    <div class="news_spotlight_item_body">
                                        <div class="news_spotlight_item_details">
                                            <div class="news_spotlight_item_detail news_spotlight_item_date">
                                                <span class="news_spotlight_item_detail_hint">Published:&nbsp;</span>
                                                <time class="news_spotlight_item_detail_label" datetime="2023-10-12 17:00:00">Oct 12, 2023</time>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="news_spotlight_item">
                                <div class="news_spotlight_item_wrapper">
                                    <div class="news_spotlight_item_header">
                                        <h4 class="news_spotlight_item_title">

                                            <a href="#" class="news_spotlight_item_title_link">
                                                <span class="news_spotlight_item_title_link_inner">
                                                    <span class="news_spotlight_item_title_link_label">Paul Smith's College Collaborates with Landowners to Safeguard Local Waterways</span>
                                                </span>
                                            </a>
                                        </h4>
                                    </div>
                                    <div class="news_spotlight_item_body">
                                        <div class="news_spotlight_item_details">
                                            <div class="news_spotlight_item_detail news_spotlight_item_date">
                                                <span class="news_spotlight_item_detail_hint">Published:&nbsp;</span>
                                                <time class="news_spotlight_item_detail_label" datetime="2024-02-01 17:00:00">Feb 1, 2024</time>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Spotlight News -->
 
{#
	{% include '@component-spotlight-news' with {
		title: 'Title',
		label: 'Label',
		description: 'Description',
		link: {
			label: 'Link Title',
			url: '#'
		},
		featured: {
			image: '1',
			alt: '',
			title: 'Link Title',
			url: '#',
			date: '2019-01-01 17:00:00'
		},
		items: [
			{
				title: 'Item Title',
				url: '#',
				date: '2019-01-01 17:00:00'
			}
		]
	} %}
#}


{#
	I can see this component being more general and reused elsewhere.
	Pulling out possible configs.
#}

{% set theme = 'white' %}
{% set category = 'Giving News' %}

{% set component_spacing = 'padding' %}
{% if theme == 'white' %}
	{% set component_spacing = 'margin' %}
{% endif %}

<!-- Spotlight News -->
<div class="news_spotlight component_theme_{{ theme }} component_spacing_{{ component_spacing }}">
	<div class="news_spotlight_header has_description">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="news_spotlight_header_inner">
					<div class="news_spotlight_header_intro">
						<h2 class="news_spotlight_title">{{ title }}</h2>
						<p class="news_spotlight_label">{{ label }}</p>
					</div>
					<div class="news_spotlight_header_group">
						<div class="news_spotlight_description">
							<p>{{ description }}</p>
						</div>
						{% if link %}
							<div class="news_spotlight_action">
								{% include '@partial-link' with {
									class: 'base',
									title: link.label,
									url: link.url,
									icon: 'chevron_right',
									nowrap: true
								} %}
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="news_spotlight_body">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="news_spotlight_body_inner">
					<div class="news_spotlight_featured">
						<h3 class="news_spotlight_category featured">{{ category }}</h3>
						<div class="news_spotlight_featured_item">
							<figure class="news_spotlight_featured_figure">
								<a class="news_spotlight_featured_figure_link" href="{{ featured.url }}" aria-label="Read more about {{ featured.title }}" tabindex="-1">
									{% include '@partial-image' with {
										class: 'news_spotlight_featured',
										alt: featured.alt,
										image: featured.image,
										loading: 'lazy',
										sources: [
											img.square.med,
											img.square.sml,
											img.square.xsml,
											img.square.xxsml,
											img.square.thumb
										],
										sizes: [
											"(min-width: 1440px) 775px",
											"(min-width: 1220px) 662px",
											"(min-width: 980px) 525px",
											"98vw"
										]
									} %}
								</a>
							</figure>
							<div class="news_spotlight_featured_wrapper">
								<div class="news_spotlight_featured_header">
									<h4 class="news_spotlight_featured_title">
										{% include '@partial-link' with {
											class: 'news_spotlight_featured_title',
											title: featured.title,
											url: featured.url,
											icon: ''
										} %}
									</h4>
								</div>
								<div class="news_spotlight_featured_body">
									<div class="news_spotlight_featured_details">
										<div class="news_spotlight_featured_detail news_spotlight_featured_date">
											<span class="news_spotlight_featured_detail_hint">Published:&nbsp;</span>
											<time class="news_spotlight_featured_detail_label" datetime="{{ featured.date }}">{{ featured.date|date('M j, Y') }}</time>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="news_spotlight_related">
						<h3 class="news_spotlight_category related">{{ category }}</h3>
						<ul class="news_spotlight_items" aria-label="{{ category }}">
							{% for item in items %}
								<li class="news_spotlight_item">
									<div class="news_spotlight_item_wrapper">
										<div class="news_spotlight_item_header">
											<h4 class="news_spotlight_item_title">
												{% include '@partial-link' with {
													class: 'news_spotlight_item_title',
													title: item.title,
													url: item.url,
													icon: ''
												} %}
											</h4>
										</div>
										<div class="news_spotlight_item_body">
											<div class="news_spotlight_item_details">
												<div class="news_spotlight_item_detail news_spotlight_item_date">
													<span class="news_spotlight_item_detail_hint">Published:&nbsp;</span>
													<time class="news_spotlight_item_detail_label" datetime="{{ item.date }}">{{ item.date|date('M j, Y') }}</time>
												</div>
											</div>
										</div>
									</div>
								</li>
							{% endfor %}
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Spotlight News -->

No notes defined.