MSMU Component Library

News Meta 

<!-- News Meta -->
<div class="news_meta" id="meta" data-type="news" data-category="Leadership">
    <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">Date Published</span>
                            <time class="news_meta_detail_label" datetime="2019-01-01 17:00:00">January 1, 2019</time>
                        </div>
                    </div>
                    <div class="news_meta_categories_block">
                        <span class="news_meta_detail_hint">Category</span>
                        <ul class="news_meta_categories" aria-label="Categories">
                            <li class="news_meta_category">
                                <a class="news_meta_category_link" href="page-news-category.html">Leadership</a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="js-share-tools share_tools">
                    <div class="share_tools_header">
                        <h2 class="share_tools_title">Share Options</h2>
                        <button class="js-share-tools-toggle share_tools_toggle" data-swap-target=".js-share-tools">
                            <span class="share_tools_toggle_inner">
                                <span class="share_tools_toggle_label">Share This</span>
                                <span class="share_tools_toggle_icon">
                                    <svg class="icon icon_arrow_right">
                                        <use href="/images/icons.svg#arrow_right" />
                                    </svg>
                                </span>
                            </span>
                        </button>
                    </div>
                    <ul class="js-share-tools-list share_tools_list" aria-label="Share Options">
                        <li class="js-share-tool-item share_tool_item">
                            <a class="js-share-tool js-share-twitter share_tool" href="#" target="_blank" rel="noopener">
                                <span class="share_tool_icon">
                                    <svg class="icon icon_twitter">
                                        <use href="/images/icons.svg#twitter" />
                                    </svg>
                                </span>
                                <span class="share_tool_label">Share to Twitter</span>
                            </a>
                        </li>
                        <li class="js-share-tool-item share_tool_item">
                            <a class="js-share-tool js-share-facebook share_tool" href="#" target="_blank" rel="noopener">
                                <span class="share_tool_icon">
                                    <svg class="icon icon_facebook">
                                        <use href="/images/icons.svg#facebook" />
                                    </svg>
                                </span>
                                <span class="share_tool_label">Share to Facebook</span>
                            </a>
                        </li>
                        <li class="js-share-tool-item share_tool_item">
                            <a class="js-share-tool js-share-linkedin share_tool" href="#" target="_blank" rel="noopener">
                                <span class="share_tool_icon">
                                    <svg class="icon icon_linkedin">
                                        <use href="/images/icons.svg#linkedin" />
                                    </svg>
                                </span>
                                <span class="share_tool_label">Share to Linkedin</span>
                            </a>
                        </li>
                    </ul>
                </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="{% for category in item.categories %}{{ category.label }}{% if not loop.last %}, {% endif %}{% endfor %}">
	<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">Date Published</span>
									<time class="news_meta_detail_label" datetime="{{ item.date }}">{{ item.date|date('F j, Y') }}</time>
								</div>
							{% endif %}
						</div>
					{% endif %}
					{% if item.categories %}
						<div class="news_meta_categories_block">
							<span class="news_meta_detail_hint">Category</span>
							<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>
				{% render '@partial-share' with {
					icon: 'arrow_right'
				} %}
			</div>
		</div>
	</div>
</div>
{% if page.image %}
<div class="news_meta_media">
	<div class="news_meta_media_inner">
		<figure class="news_meta_figure">
			{% include '@partial-picture' with {
				class: 'news_meta',
				image: page.image,
				alt: '',
				loading: 'eager',
				default: img.square.xsml,
				sources: {
					'1394px': img.wide.xlrg,
					'1220px': img.wide.xlrg,
					'980px': img.wide.lrg,
					'740px': img.wide.med,
					'500px': img.full.sml
				}
			} %}
		</figure>
	</div>
	{% if page.image_caption %}
	<div class="news_meta_media_caption">{{ page.image_caption }}</div>
	{% endif %}
</div>
{% endif %}
<!-- END: News Meta -->

No notes defined.