New College of Florida Component Library

News Item 

<!-- News Item -->
<div class="news_item">
    <div class="news_item_wrapper has_image">
        <figure class="news_item_figure">
            <span class="lazy_image_wrapper news_item_group_image_wrapper">
                <img class="js-lazy js-lazyload news_item_group_image" data-sizes="auto" src="//images.fastspot.com/new-college-of-florida/300x200/1" data-src="//images.fastspot.com/new-college-of-florida/980x654/1" data-srcset="//images.fastspot.com/new-college-of-florida/980x654/1 980w, //images.fastspot.com/new-college-of-florida/740x494/1 740w, //images.fastspot.com/new-college-of-florida/500x334/1 500w, //images.fastspot.com/new-college-of-florida/300x200/1 300w" alt="">
            </span>
            <noscript>
                <img class="news_item_group_image" src="https://images.fastspot.com/new-college-of-florida/300x200/1" srcset="https://images.fastspot.com/new-college-of-florida/300x200/1 300w, https://images.fastspot.com/new-college-of-florida/500x334/1 500w, https://images.fastspot.com/new-college-of-florida/740x494/1 740w, https://images.fastspot.com/new-college-of-florida/980x654/1 980w" sizes="100vw" alt="">
            </noscript>
        </figure>
        <div class="news_item_group">
            <div class="news_item_header">
                <h2 class="news_item_title">

                    <a href="#" class="news_item_title_link">
                        <span class="news_item_title_link_inner">
                            <span class="news_item_title_link_label">Title</span>
                            <span class="news_item_title_link_icon" aria-hidden="true">
                                <span class="news_item_title_link_icon_inner">
                                    <svg class="icon icon_arrow_right">
                                        <use xlink:href="/images/icons.svg#arrow_right"></use>
                                    </svg>
                                </span>
                            </span>
                        </span>
                    </a>
                </h2>
                <div class="news_item_categories">
                    <div class="news_item_category_hint">Categories</div>
                    <ul class="news_item_category_list" aria-label="Categories">
                        <li class="news_item_category">
                            <a class="news_item_category_link" href="page-news-category.html">Category</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="news_item_body">
                <div class="news_item_details">
                    <div class="news_item_detail news_item_date">
                        <span class="news_item_detail_hint">Posted </span>
                        <time class="news_item_detail_label" datetime="2019-01-01 17:00:00">January 1, 2019</time>
                    </div>
                    <div class="news_item_detail news_item_author">
                        <span class="news_item_detail_hint"><span>- </span>by&nbsp;</span>
                        <span class="news_item_detail_label">Author</span>
                    </div>
                </div>
                <div class="news_item_description">
                    <p>Description</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: News Item -->
 
<!-- News Item -->
<div class="news_item{% if feature %} news_item_feature{% endif %}">
	{% if feature %}
		{% if group_title %}
			<h2 class="news_feature_mobile_group_title">{{ group_title }}</h2>
		{% endif %}
		<div class="news_item_feature_image_wrapper">
			<figure class="news_item_figure">
				{% if item.url %}
					<a class="news_item_figure_link" href="{{ item.url }}" aria-label="Read more about {{ item.title }}" tabindex="-1">
				{% endif %}
					{% include "@partial-image" with {
						class: "news_item",
						alt: "",
						image: item.image,
						sources: [
							img.classic.med,
							img.classic.sml,
							img.classic.xsml,
							img.classic.xxsml
						]
					} %}
				{% if item.url %}
					</a>
				{% endif %}
			</figure>
		</div>
	{% endif %}
	<div class="news_item_wrapper{% if item.image %} has_image{% endif %}">
		{% if group_title %}
			<h2 class="news_feature_group_title">{{ group_title }}</h2>
		{% endif %}
		{% if item.image %}
			<figure class="news_item_figure">
				{% include "@partial-image" with {
					class: "news_item_group",
					alt: "",
					image: item.image,
					sources: [
						img.classic.med,
						img.classic.sml,
						img.classic.xsml,
						img.classic.xxsml
					]
				} %}
			</figure>
		{% endif %}
		<div class="news_item_group">
			<div class="news_item_header">
				{% if group_title %}
					<h3 class="news_item_title">
				{% else %}
					<h2 class="news_item_title">
				{% endif %}
					{% if item.url %}
						{% include "@partial-link" with {
							class: "news_item_title",
							title: item.title,
							url: item.url,
							icon: 'arrow_right'
						} %}
					{% else %}
						{{ item.title }}
					{% endif %}
				{% if group_title %}
					</h3>
				{% else %}
					</h2>
				{% endif %}
				{% if item.categories %}
					<div class="news_item_categories">
						<div class="news_item_category_hint">Categories</div>
						<ul class="news_item_category_list" aria-label="Categories">
							{% for category in item.categories %}
								<li class="news_item_category">
									<a class="news_item_category_link" href="{{ item.category_url }}">{{ category }}</a>
								</li>
							{% endfor %}
						</ul>
					</div>
				{% endif %}
			</div>
			<div class="news_item_body">
				{% if item.date or item.author %}
					{% render "@partial-news-details" with {
						item: item
					} %}
				{% endif %}
				{% if item.description %}
					<div class="news_item_description">
						<p>{{ item.description }}</p>
					</div>
				{% endif %}
			</div>
		</div>
	</div>
</div>
<!-- END: News Item -->

No notes defined.