Framework Component Library

Department Meta 

<script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "Place",
        "name": null,
        "telephone": "(410) 555-1234, (410) 555-1234",
        "url": "#",
        "address": "2980 Falls Road Baltimore, MD 21211"
    }
</script>

<!-- Person Meta -->
<div class="department-meta" id="department-meta-1">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="department-meta__inner">
                <div class="department-meta__details">
                    <address class="department-meta__detail department-meta__detail--contact">
                        <div class="department-meta__detail-label">
                            Contact
                        </div>
                        <div class="department-meta__detail-items">
                            <div class="department-meta__detail-item">
                                <div class="department-meta__detail-item-header">
                                    <div class="department-meta__detail-item-header-icon" aria-hidden="true">
                                        <svg class="icon icon--phone">
                                            <use href="/images/icons.svg?1.0.0#phone" />
                                        </svg>
                                    </div>
                                    <div class="department-meta__detail-item-header-label">mobile</div>
                                </div>
                                <div class="department-meta__detail-item-body">
                                    <div class="department-meta__detail-item-body-label">

                                        <a class="button-text
 				" href="tel:4105551234">
                                            <span class="button-text__inner"> <span class="button-text__label">(410) 555-1234</span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="department-meta__detail-item">
                                <div class="department-meta__detail-item-header">
                                    <div class="department-meta__detail-item-header-icon" aria-hidden="true">
                                        <svg class="icon icon--phone">
                                            <use href="/images/icons.svg?1.0.0#phone" />
                                        </svg>
                                    </div>
                                    <div class="department-meta__detail-item-header-label">office</div>
                                </div>
                                <div class="department-meta__detail-item-body">
                                    <div class="department-meta__detail-item-body-label">

                                        <a class="button-text
 				" href="tel:4105551234">
                                            <span class="button-text__inner"> <span class="button-text__label">(410) 555-1234</span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="department-meta__detail-item">
                                <div class="department-meta__detail-item-header">
                                    <div class="department-meta__detail-item-header-icon" aria-hidden="true">
                                        <svg class="icon icon--mail">
                                            <use href="/images/icons.svg?1.0.0#mail" />
                                        </svg>
                                    </div>
                                    <div class="department-meta__detail-item-header-label">
                                        Email Address
                                    </div>
                                </div>
                                <div class="department-meta__detail-item-body">
                                    <div class="department-meta__detail-item-body-label">

                                        <a class="button-text
 				" href="mailto:nascetur.ridiculus@university.edu">
                                            <span class="button-text__inner"> <span class="button-text__label">nascetur.ridiculus<wbr>@university.edu</span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </address>
                    <div class="department-meta__detail department-meta__detail--location">
                        <div class="department-meta__detail-label">
                            Location
                        </div>
                        <div class="department-meta__detail-items">
                            <div class="department-meta__detail-item">
                                <div class="department-meta__detail-item-header">
                                    <div class="department-meta__detail-item-header-icon" aria-hidden="true">
                                        <svg class="icon icon--place">
                                            <use href="/images/icons.svg?1.0.0#place" />
                                        </svg>
                                    </div>
                                </div>
                                <div class="department-meta__detail-item-body">
                                    <div class="department-meta__detail-item-body-label">Appleseed Library<br>Room 214<br>Curabitur ullamcorper ultricies</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="department-meta__detail department-meta__detail--department">
                        <div class="department-meta__detail-label">
                            Department
                        </div>
                        <div class="department-meta__detail-items">
                            <div class="department-meta__detail-item">
                                <div class="department-meta__detail-item-body">
                                    <div class="department-meta__detail-item-body-label">

                                        <a class="button-text
 				" href="#">
                                            <span class="button-text__inner"> <span class="button-text__label">Vivamus elementum semper</span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="department-meta__detail department-meta__detail--hours">
                        <div class="department-meta__detail-label">
                            Office Hours
                        </div>
                        <div class="department-meta__detail-items">
                            <div class="department-meta__detail-item">
                                <div class="department-meta__detail-item-header">
                                    <div class="department-meta__detail-item-header-icon" aria-hidden="true">
                                        <svg class="icon icon--clock">
                                            <use href="/images/icons.svg?1.0.0#clock" />
                                        </svg>
                                    </div>
                                    <div class="department-meta__detail-item-header-label">Monday</div>
                                </div>
                                <div class="department-meta__detail-item-body">
                                    <div class="department-meta__detail-item-body-label">9am - 5pm</div>
                                </div>
                            </div>
                            <div class="department-meta__detail-item">
                                <div class="department-meta__detail-item-header">
                                    <div class="department-meta__detail-item-header-icon" aria-hidden="true">
                                        <svg class="icon icon--clock">
                                            <use href="/images/icons.svg?1.0.0#clock" />
                                        </svg>
                                    </div>
                                    <div class="department-meta__detail-item-header-label">Wednesday</div>
                                </div>
                                <div class="department-meta__detail-item-body">
                                    <div class="department-meta__detail-item-body-label">11am-12pm</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="department-meta__detail department-meta__detail--social">
                        <div class="department-meta__detail-label" id="department-meta-1__detail-label-social">
                            Social
                        </div>
                        <div class="department-meta__detail-items">
                            <ul class="department-meta__socials" aria-labelledby="page-header__title department-meta-1__detail-label-social">
                                <li class="department-meta__social" id="department-meta-1__social-1">

                                    <a class="department-meta__social-link
 				" aria-labelledby="page-header__title department-meta-1__social-1" target="_blank" rel="noopener" title="opens in a new window" href="#">
                                        <span class="department-meta__social-link-inner"> <span class="department-meta__social-link-label">Linkedin</span>
                                            <span class="department-meta__social-link-icon" aria-hidden="true">
                                                <svg class="icon icon--linkedin">
                                                    <use href="/images/icons.svg?1.0.0#linkedin" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                </li>
                                <li class="department-meta__social" id="department-meta-1__social-2">

                                    <a class="department-meta__social-link
 				" aria-labelledby="page-header__title department-meta-1__social-2" target="_blank" rel="noopener" title="opens in a new window" href="#">
                                        <span class="department-meta__social-link-inner"> <span class="department-meta__social-link-label">X</span>
                                            <span class="department-meta__social-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="department-meta__social" id="department-meta-1__social-3">

                                    <a class="department-meta__social-link
 				" aria-labelledby="page-header__title department-meta-1__social-3" target="_blank" rel="noopener" title="opens in a new window" href="#">
                                        <span class="department-meta__social-link-inner"> <span class="department-meta__social-link-label">Facebook</span>
                                            <span class="department-meta__social-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="department-meta__social" id="department-meta-1__social-4">

                                    <a class="department-meta__social-link
 				" aria-labelledby="page-header__title department-meta-1__social-4" target="_blank" rel="noopener" title="opens in a new window" href="#">
                                        <span class="department-meta__social-link-inner"> <span class="department-meta__social-link-label">Instagram</span>
                                            <span class="department-meta__social-link-icon" aria-hidden="true">
                                                <svg class="icon icon--instagram">
                                                    <use href="/images/icons.svg?1.0.0#instagram" />
                                                </svg>
                                            </span>
                                        </span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Person Meta -->
 
{#
	{% include '@component-department-meta' with {
		item: {
			phone_numbers: [
				{
					title: 'Phone Label',
					type: 'Phone Type',
					number: '(410) 555-1234'
				}
			],
			departments: [
				{
					title: 'Department',
					url: '#'
				}
			],
			office_hours: [
				{
					title: 'Monday',
					hours: '9am - 5pm'
				}
			],
			email: 'email@address.com',
			location: 'Location',
			social_links: [
				{
					title: 'Linkedin',
					url: '#'
				}
			]
		}
	} %}
#}

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

<script type="application/ld+json">
	{{
		{
			'@context': 'http://schema.org',
			'@type': 'Place',
			'name': item.name,
			'telephone': item.phone_numbers|column('number')|join(', '),
			'url': '#',
			'address': config.street ~ ' ' ~ config.city ~ ', ' ~ config.state ~ ' ' ~ config.zip

		}|json_encode
	}}
</script>

<!-- Person Meta -->
<div class="department-meta" id="{{ id }}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="department-meta__inner">
				<div class="department-meta__details">
					{% if item.phone_numbers or item.email %}
						<address class="department-meta__detail department-meta__detail--contact">
							<div class="department-meta__detail-label">
								Contact
							</div>
							<div class="department-meta__detail-items">
								{% for phone in item.phone_numbers %}
									<div class="department-meta__detail-item">
										<div class="department-meta__detail-item-header">
											<div class="department-meta__detail-item-header-icon" aria-hidden="true">
												{{ icon('phone') }}
											</div>
											<div class="department-meta__detail-item-header-label">
												{{- phone.title -}}
											</div>
										</div>
										<div class="department-meta__detail-item-body">
											<div class="department-meta__detail-item-body-label">
												{% include '@partial-link' with {
													classes: {
														base: 'button-text'
													},
													title: phone.number,
													url: 'tel:' ~ tel(phone.number)
												} only %}
											</div>
										</div>
									</div>
								{% endfor %}
								{% if item.email %}
									<div class="department-meta__detail-item">
										<div class="department-meta__detail-item-header">
											<div class="department-meta__detail-item-header-icon" aria-hidden="true">
												{{ icon('mail') }}
											</div>
											<div class="department-meta__detail-item-header-label">
												Email Address
											</div>
										</div>
										<div class="department-meta__detail-item-body">
											<div class="department-meta__detail-item-body-label">
												{% include '@partial-link' with {
													classes: {
														base: 'button-text'
													},
													title: format_email(item.email),
													url: 'mailto:' ~ item.email
												} only %}
											</div>
										</div>
									</div>
								{% endif %}
							</div>
						</address>
					{% endif %}
					{% if item.location %}
						<div class="department-meta__detail department-meta__detail--location">
							<div class="department-meta__detail-label">
								Location
							</div>
							<div class="department-meta__detail-items">
								<div class="department-meta__detail-item">
									<div class="department-meta__detail-item-header">
										<div class="department-meta__detail-item-header-icon" aria-hidden="true">
											{{ icon('place') }}
										</div>
									</div>
									<div class="department-meta__detail-item-body">
										<div class="department-meta__detail-item-body-label">
											{{- item.location -}}
										</div>
									</div>
								</div>
							</div>
						</div>
					{% endif %}
					<div class="department-meta__detail department-meta__detail--department">
						<div class="department-meta__detail-label">
							Department
						</div>
						<div class="department-meta__detail-items">
							<div class="department-meta__detail-item">
								<div class="department-meta__detail-item-body">
									{% for department in item.departments %}
										<div class="department-meta__detail-item-body-label">
											{% include '@partial-link' with {
												classes: {
													base: 'button-text'
												},
												title: department.title,
												url: department.url
											} only %}
										</div>
									{% endfor %}
								</div>
							</div>
						</div>
					</div>
					{% if item.office_hours %}
						<div class="department-meta__detail department-meta__detail--hours">
							<div class="department-meta__detail-label">
								Office Hours
							</div>
							<div class="department-meta__detail-items">
								{% for office_hours in item.office_hours %}
									<div class="department-meta__detail-item">
										<div class="department-meta__detail-item-header">
											<div class="department-meta__detail-item-header-icon" aria-hidden="true">
												{{ icon('clock') }}
											</div>
											<div class="department-meta__detail-item-header-label">
												{{- office_hours.title -}}
											</div>
										</div>
										<div class="department-meta__detail-item-body">
											<div class="department-meta__detail-item-body-label">
												{{- office_hours.hours -}}
											</div>
										</div>
									</div>
								{% endfor %}
							</div>
						</div>
					{% endif %}
					{% if item.social_links %}
						<div class="department-meta__detail department-meta__detail--social">
							<div
								class="department-meta__detail-label"
								id="{{ id ~ '__detail-label-social' }}"
							>
								Social
							</div>
							<div class="department-meta__detail-items">
								<ul
									class="department-meta__socials"
									aria-labelledby="page-header__title {{ id ~ '__detail-label-social' }}"
								>
									{% for social in item.social_links %}
										<li class="department-meta__social" id="{{ id ~ '__social-' ~ loop.index }}">
											{% include '@partial-link' with {
												classes: {
													base: 'department-meta__social-link'
												},
												title: social.title,
												url: social.url,
												icon: social.title|lower,
												attributes: {
													'aria-labelledby': 'page-header__title' ~ ' ' ~ id ~ '__social-' ~ loop.index,
													'target': '_blank'
												}
											} only %}
										</li>
									{% endfor %}
								</ul>
							</div>
						</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Person Meta -->

No notes defined.