JTCC Component Library

Featured News 

<div class="featured_news theme_default">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="featured_news_inner">
                <div class="featured_news_header">
                    <h1 class="featured_news_title">Happening Here</h1>

                    <a href="#" class="featured_news_link">
                        <span class="featured_news_link_inner">
                            <span class="featured_news_link_label">View all News & Stories</span>
                            <span class="featured_news_link_icon" aria-hidden="true">
                                <span class="featured_news_link_icon_inner">
                                    <span class="featured_news_link_icon_space">&#xfeff;</span>

                                    <svg class="icon icon_caret_right">
                                        <use href="/images/icons.svg#caret_right" />
                                    </svg>

                                </span>
                            </span>
                        </span>
                    </a>
                </div>
                <div class="featured_news_body">
                    <div class="featured_news_spotlight">
                        <div class="story theme_blush">
                            <figure class="story_figure has_classic_image">
                                <a class="story_figure_link" href="" aria-label="Read more about Getting Ready for a Successful Spring Semester" tabindex="-1">
                                    <span class="lazy_image_wrapper story_image_wrapper">
                                        <img class="js-lazy js-lazyload story_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/jtcc/740x494/6" data-srcset="//images.fastspot.com/jtcc/740x494/6 740w, //images.fastspot.com/jtcc/980x654/6 980w" alt="">
                                    </span>
                                    <noscript>
                                        <img class="story_image" src="https://images.fastspot.com/jtcc/980x654/6" srcset="//images.fastspot.com/jtcc/980x654/6 980w, //images.fastspot.com/jtcc/740x494/6 740w" sizes="100vw" alt="">
                                    </noscript>
                                </a>
                            </figure>
                            <div class="story_wrapper">
                                <div class="story_label">Featured News</div>
                                <h2 class="story_title">

                                    <a href="#" class="story_title_link">
                                        <span class="story_title_link_inner">
                                            <span class="story_title_link_label">Getting Ready for a Successful Spring Semester</span>
                                        </span>
                                    </a>
                                </h2>
                                <div class="story_description">
                                    <p>It’s a new year, and a new semester is about to begin. While this is an exciting time, it can also be a hectic time for students. Here are a few tips to help you get ready for spring.</p>
                                </div>

                                <a href="#" class="story_discovery_link">
                                    <span class="story_discovery_link_inner">
                                        <span class="story_discovery_link_label">Read The Story</span>
                                        <span class="story_discovery_link_icon" aria-hidden="true">
                                            <span class="story_discovery_link_icon_inner">
                                                <span class="story_discovery_link_icon_space">&#xfeff;</span>

                                                <svg class="icon icon_caret_right">
                                                    <use href="/images/icons.svg#caret_right" />
                                                </svg>

                                            </span>
                                        </span>
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="featured_news_content">
                        <h3 class="featured_news_content_title">The Latest News</h3>
                        <div class="featured_news_articles" data-carousel-options='{
							"maxWidth": "739px"
						}'>
                            <div class="featured_news_article">
                                <time class="featured_news_article_date" datetime="April 21, 2020">April 21, 2020</time>
                                <h3 class="featured_news_article_title">

                                    <a href="#" class="featured_news_article_title_link">
                                        <span class="featured_news_article_title_link_inner">
                                            <span class="featured_news_article_title_link_label">State Board for Community Colleges to Consider 2020-21 Fees at May Meeting</span>
                                            <span class="featured_news_article_title_link_icon" aria-hidden="true">
                                                <span class="featured_news_article_title_link_icon_inner">
                                                    <span class="featured_news_article_title_link_icon_space">&#xfeff;</span>

                                                    <svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg>

                                                </span>
                                            </span>
                                        </span>
                                    </a>
                                </h3>
                            </div>
                            <div class="featured_news_article">
                                <time class="featured_news_article_date" datetime="April 15, 2020">April 15, 2020</time>
                                <h3 class="featured_news_article_title">

                                    <a href="#" class="featured_news_article_title_link">
                                        <span class="featured_news_article_title_link_inner">
                                            <span class="featured_news_article_title_link_label">JTCC adds new Maymester Session to Meet the Needs of Students Impacted by the Stay at Home Order</span>
                                            <span class="featured_news_article_title_link_icon" aria-hidden="true">
                                                <span class="featured_news_article_title_link_icon_inner">
                                                    <span class="featured_news_article_title_link_icon_space">&#xfeff;</span>

                                                    <svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg>

                                                </span>
                                            </span>
                                        </span>
                                    </a>
                                </h3>
                            </div>
                            <div class="featured_news_article">
                                <time class="featured_news_article_date" datetime="March 09, 2020">March 09, 2020</time>
                                <h3 class="featured_news_article_title">

                                    <a href="#" class="featured_news_article_title_link">
                                        <span class="featured_news_article_title_link_inner">
                                            <span class="featured_news_article_title_link_label">Workshops and Activities Designed to Help you Succeed</span>
                                            <span class="featured_news_article_title_link_icon" aria-hidden="true">
                                                <span class="featured_news_article_title_link_icon_inner">
                                                    <span class="featured_news_article_title_link_icon_space">&#xfeff;</span>

                                                    <svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg>

                                                </span>
                                            </span>
                                        </span>
                                    </a>
                                </h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="featured_news theme_{% if theme %}{{ theme }}{% else %}default{% endif %}{% if articles is empty %} layout_standalone{% endif %}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="featured_news_inner">
				{% if theme == "featured" %}
				<div class="featured_news_breadcrumbs">
					{% render '@navigation-breadcrumb' %}
				</div>
				{% endif %}
				<div class="featured_news_header">
					<h1 class="featured_news_title">{{ title }}</h1>
					{% if theme != "featured" %}
					{% render '@partial-link' with {
						title: "View all News & Stories",
						url: "#",
						class: "featured_news",
						icon: "caret_right"
					} %}
					{% endif %}
				</div>
				<div class="featured_news_body">
					<div class="featured_news_spotlight">
						{% if articles is empty %}
						{% render "@component-story--standalone" %}
						{% elseif theme == "featured" %}
						{% render "@component-story--turquoise" %}
						{% else %}
						{% render "@component-story" with {
							item: {
								label: 'Featured News',
								title: 'Getting Ready for a Successful Spring Semester',
								description: 'It’s a new year, and a new semester is about to begin. While this is an exciting time, it can also be a hectic time for students. Here are a few tips to help you get ready for spring.',
								link: 'Read The Story'
							}
						} %}
						{% endif %}
					</div>
					{% if articles %}
					<div class="featured_news_content">
						{% if theme != "featured" %}
						<h3 class="featured_news_content_title">The Latest News</h3>
						{% endif %}
						<div class="{% if theme == "featured" %}js-carousel {% endif %}featured_news_articles" data-carousel-options='{
							"maxWidth": "739px"
						}'>
							{% for article in articles %}
							<div class="featured_news_article">
								<time class="featured_news_article_date" datetime="{{ article.date }}">{{ article.date }}</time>
								<h3 class="featured_news_article_title">
									{% render '@partial-link' with {
										title: article.title,
										url: "#",
										class: "featured_news_article_title",
										icon: "caret_right"
									} %}
								</h3>
							</div>
							{% endfor %}
						</div>
						{% if theme == "featured" %}
						<div class="featured_news_hint">
							<span class="featured_news_hint_icon">{{ icon("arrow_down") }}</span>
							<span class="featured_news_hint_label">Scroll for more stories</span>
						</div>
						{% endif %}
					</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.