Framework Component Library

News Meta 

<!-- News Meta -->
<div class="news-meta" id="news-meta-1">
    <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__detail--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__detail--author">
                            <span class="news-meta__detail-hint">
                                - by&nbsp;
                            </span>
                            <span class="news-meta__detail-label">Phasellus accumsan cursus velit</span>
                        </div>
                    </div>
                    <div class="news-meta__categories-block">
                        <span class="news-meta__categories-icon" aria-hidden="true">
                            <svg class="icon icon--label">
                                <use href="/images/icons.svg?1.0.0#label" />
                            </svg>
                        </span>
                        <span class="news-meta__categories-hint" id="news-meta-1__categories-hint">
                            Categories:&nbsp;
                        </span>
                        <ul class="news-meta__categories" aria-labelledby="news-meta-1__categories-hint">
                            <li class="news-meta__category">

                                <a class="news-meta__category-link
 				" href="#">
                                    <span class="news-meta__category-link-inner"> <span class="news-meta__category-link-label">Aenean</span>
                                    </span>
                                </a>
                            </li>
                            <li class="news-meta__category">

                                <a class="news-meta__category-link
 				" href="#">
                                    <span class="news-meta__category-link-inner"> <span class="news-meta__category-link-label">Donec vitae</span>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="news-meta__share">

                    <div class="share-tools share-tools--left" id="share-tools-2" data-js-share-tools>
                        <div class="share-tools__header">
                            <h2 class="share-tools__title" id="share-tools-2__title">
                                Share Options
                            </h2>
                            <div class="share-tools__button">

                                <button class="button-filled
 		 			button-filled--large
 				" data-js-share-tools-toggle="" data-swap-target="#share-tools-2">
                                    <span class="button-filled__inner"> <span class="button-filled__label">Share This</span>
                                    </span>
                                </button>
                            </div>
                        </div>
                        <ul class="share-tools__list" data-js-share-tools-list aria-labelledby="share-tools-2__title">
                            <li class="share-tools__item" data-js-share-tools-item>

                                <a class="share-tools__link
 				" data-js-share-tool="x" target="_blank" rel="noopener" title="opens in a new window" href="#">
                                    <span class="share-tools__link-inner"> <span class="share-tools__link-label">Share to X</span>
                                        <span class="share-tools__link-icon" aria-hidden="true">
                                            <svg class="icon icon--x">
                                                <use href="/images/icons.svg?1.0.0#x" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </li>
                            <li class="share-tools__item" data-js-share-tools-item>

                                <a class="share-tools__link
 				" data-js-share-tool="facebook" target="_blank" rel="noopener" title="opens in a new window" href="#">
                                    <span class="share-tools__link-inner"> <span class="share-tools__link-label">Share to Facebook</span>
                                        <span class="share-tools__link-icon" aria-hidden="true">
                                            <svg class="icon icon--facebook">
                                                <use href="/images/icons.svg?1.0.0#facebook" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </li>
                            <li class="share-tools__item" data-js-share-tools-item>

                                <a class="share-tools__link
 				" data-js-share-tool="linkedin" target="_blank" rel="noopener" title="opens in a new window" href="#">
                                    <span class="share-tools__link-inner"> <span class="share-tools__link-label">Share to Linkedin</span>
                                        <span class="share-tools__link-icon" aria-hidden="true">
                                            <svg class="icon icon--linkedin">
                                                <use href="/images/icons.svg?1.0.0#linkedin" />
                                            </svg>
                                        </span>
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: News Meta -->
 
{#
	{% include '@component-news-meta' with {
		item: {
			categories: [
				{
					title: 'Category',
					url: '#'
				}
			],
			date: '2019-01-01 17:00:00',
			author: 'Author'
		}
	} %}
#}

{% set id = uniqid('news-meta') %}

<!-- News Meta -->
<div class="news-meta" id="{{ id }}">
	<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__detail--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>
						{% if item.author %}
							<div class="news-meta__detail news-meta__detail--author">
								<span class="news-meta__detail-hint">
									- by&nbsp;
								</span>
								<span class="news-meta__detail-label">
									{{- item.author -}}
								</span>
							</div>
						{% endif %}
					</div>
					{% if item.categories %}
						<div class="news-meta__categories-block">
							<span class="news-meta__categories-icon" aria-hidden="true">
								{{ icon('label') }}
							</span>
							<span class="news-meta__categories-hint" id="{{ id ~ '__categories-hint' }}">
								Categories:&nbsp;
							</span>
							<ul class="news-meta__categories" aria-labelledby="{{ id ~ '__categories-hint' }}">
								{% for category in item.categories %}
									<li class="news-meta__category">
										{% include '@partial-link' with {
											classes: {
												base: 'news-meta__category-link',
											},
											title: category.title,
											url: category.url
										} only %}
									</li>
								{% endfor %}
							</ul>
						</div>
					{% endif %}
				</div>
				<div class="news-meta__share">
					{% include '@partial-share' with {
						title: 'Share This',
						direction: 'left',
						icon: '',
						items: ['X', 'Facebook', 'Linkedin']
					} %}
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: News Meta -->

No notes defined.