JHU Sustainability Component Library

News Meta 

<!-- News Meta -->
<div class="news_meta" id="meta" data-type="news" data-category="[object Object], [object Object]">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="news_meta_inner">
                <div class="news_meta_body">
                    <div class="news_meta_details">
                        <div class="news_meta_detail news_meta_date">
                            <span class="news_meta_detail_hint">Published:&nbsp;</span>
                            <time class="news_meta_detail_label" datetime="2019-01-01 17:00:00">January 1, 2019</time>
                        </div>

                        <div class="news_meta_detail news_meta_separator">|</div>

                        <div class="news_meta_detail news_meta_author">
                            <span class="news_meta_detail_hint">by</span>
                            <span class="news_meta_detail_label">Author</span>
                        </div>

                        <div class="news_meta_detail news_meta_separator">|</div>

                        <div class="news_meta_detail news_meta_categories">
                            <ul class="news_meta_categories" aria-label="Categories">
                                <li class="news_meta_category">
                                    <a class="news_meta_category_link" href="page-news-category.html">Category 1</a>
                                </li>
                                <li class="news_meta_category">
                                    <a class="news_meta_category_link" href="page-news-category.html">Category 2</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: News Meta -->
 
{#
	{% include '@partial-news-meta' with {
		item: {
			categories: [
				{
					label: 'Category',
					url: '#'
				}
			],
			date: '2019-01-01 17:00:00',
			author: 'Author'
		}
	} %}
#}
<!-- News Meta -->
<div class="news_meta" id="meta" data-type="news" data-category="{{ item.categories|join(', ') }}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="news_meta_inner">
				<div class="news_meta_body">
					{% if item.date or item.author %}
						<div class="news_meta_details">
							{% if item.date %}
								<div class="news_meta_detail news_meta_date">
									<span class="news_meta_detail_hint">Published:&nbsp;</span>
									<time class="news_meta_detail_label" datetime="{{ item.date }}">{{ item.date|date('F j, Y') }}</time>
								</div>
							{% endif %}

							<div class="news_meta_detail news_meta_separator">|</div>

							{% if item.author %}
								<div class="news_meta_detail news_meta_author">
									<span class="news_meta_detail_hint">by</span>
									<span class="news_meta_detail_label">{{ item.author }}</span>
								</div>
							{% endif %}

							<div class="news_meta_detail news_meta_separator">|</div>

							{% if item.categories %}
								<div class="news_meta_detail news_meta_categories">
									<ul class="news_meta_categories" aria-label="Categories">
										{% for category in item.categories %}
											<li class="news_meta_category">
												<a class="news_meta_category_link" href="{{ category.url }}">{{ category.label }}</a>
											</li>
										{% endfor %}
									</ul>
								</div>
							{% endif %}
						</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: News Meta -->

No notes defined.