Framework Component Library

People Meta 

<script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "Person",
        "email": "vulputate-eget@university.edu",
        "image": "https://images.fastspot.com/framework/500x500/1",
        "jobTitle": null,
        "name": "Jane Smith",
        "telephone": "(410) 555-1234",
        "url": "#"
    }
</script>

<!-- Person Meta -->
<div class="people-meta" id="people-meta-1">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="people-meta__inner">
                <div class="people-meta__body">
                    <figure class="people-meta__figure">

                        <img class="people-meta__image" srcset="https://images.fastspot.com/framework/500x500/undefined 500w, https://images.fastspot.com/framework/300x300/undefined 300w, https://images.fastspot.com/framework/100x100/undefined 100w" src="https://images.fastspot.com/framework/100x100/undefined" alt="" loading="lazy" width="100" height="100">
                    </figure>
                    <div class="people-meta__details">
                        <address class="people-meta__detail people-meta__detail--contact">
                            <div class="people-meta__detail-label">
                                Contact
                            </div>
                            <div class="people-meta__detail-items">
                                <div class="people-meta__detail-item">
                                    <div class="people-meta__detail-item-header">
                                        <div class="people-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="people-meta__detail-item-header-label">mobile</div>
                                    </div>
                                    <div class="people-meta__detail-item-body">
                                        <div class="people-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="people-meta__detail-item">
                                    <div class="people-meta__detail-item-header">
                                        <div class="people-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="people-meta__detail-item-header-label">office</div>
                                    </div>
                                    <div class="people-meta__detail-item-body">
                                        <div class="people-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="people-meta__detail-item">
                                    <div class="people-meta__detail-item-header">
                                        <div class="people-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="people-meta__detail-item-header-label">
                                            Email Address
                                        </div>
                                    </div>
                                    <div class="people-meta__detail-item-body">
                                        <div class="people-meta__detail-item-body-label">

                                            <a class="button-text
 				" href="mailto:vulputate-eget@university.edu">
                                                <span class="button-text__inner"> <span class="button-text__label">vulputate-eget<wbr>@university.edu</span>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </address>
                        <div class="people-meta__detail people-meta__detail--location">
                            <div class="people-meta__detail-label">
                                Location
                            </div>
                            <div class="people-meta__detail-items">
                                <div class="people-meta__detail-item">
                                    <div class="people-meta__detail-item-header">
                                        <div class="people-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="people-meta__detail-item-body">
                                        <div class="people-meta__detail-item-body-label">Appleseed Library<br>Room 214<br>Curabitur ullamcorper ultricies</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="people-meta__detail people-meta__detail--department">
                            <div class="people-meta__detail-label">
                                Department
                            </div>
                            <div class="people-meta__detail-items">
                                <div class="people-meta__detail-item">
                                    <div class="people-meta__detail-item-body">
                                        <div class="people-meta__detail-item-body-label">

                                            <a class="button-text
 				" href="#">
                                                <span class="button-text__inner"> <span class="button-text__label">Phasellus leo dolor</span>
                                                </span>
                                            </a>
                                        </div>
                                        <div class="people-meta__detail-item-body-label">

                                            <a class="button-text
 				" href="#">
                                                <span class="button-text__inner"> <span class="button-text__label">Ut varius tincidunt libero</span>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="people-meta__detail people-meta__detail--hours">
                            <div class="people-meta__detail-label">
                                Office Hours
                            </div>
                            <div class="people-meta__detail-items">
                                <div class="people-meta__detail-item">
                                    <div class="people-meta__detail-item-header">
                                        <div class="people-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="people-meta__detail-item-header-label">Monday</div>
                                    </div>
                                    <div class="people-meta__detail-item-body">
                                        <div class="people-meta__detail-item-body-label">9am - 5pm</div>
                                    </div>
                                </div>
                                <div class="people-meta__detail-item">
                                    <div class="people-meta__detail-item-header">
                                        <div class="people-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="people-meta__detail-item-header-label">Tuesday</div>
                                    </div>
                                    <div class="people-meta__detail-item-body">
                                        <div class="people-meta__detail-item-body-label">11am-12pm</div>
                                    </div>
                                </div>
                                <div class="people-meta__detail-item">
                                    <div class="people-meta__detail-item-header">
                                        <div class="people-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="people-meta__detail-item-header-label">Wednesday</div>
                                    </div>
                                    <div class="people-meta__detail-item-body">
                                        <div class="people-meta__detail-item-body-label">9am - 5pm</div>
                                    </div>
                                </div>
                                <div class="people-meta__detail-item">
                                    <div class="people-meta__detail-item-header">
                                        <div class="people-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="people-meta__detail-item-header-label">Thursday</div>
                                    </div>
                                    <div class="people-meta__detail-item-body">
                                        <div class="people-meta__detail-item-body-label">11am-12pm</div>
                                    </div>
                                </div>
                                <div class="people-meta__detail-item">
                                    <div class="people-meta__detail-item-header">
                                        <div class="people-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="people-meta__detail-item-header-label">Friday</div>
                                    </div>
                                    <div class="people-meta__detail-item-body">
                                        <div class="people-meta__detail-item-body-label">9am - 5pm</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="people-meta__detail people-meta__detail--social">
                            <div class="people-meta__detail-label" id="people-meta-1__detail-label-social">
                                Social
                            </div>
                            <div class="people-meta__detail-items">
                                <ul class="people-meta__socials" aria-labelledby="page-header__title people-meta-1__detail-label-social">
                                    <li class="people-meta__social" id="people-meta-1__social-1">

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

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

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

                                        <a class="people-meta__social-link
 				" aria-labelledby="page-header__title people-meta-1__social-4" target="_blank" rel="noopener" title="opens in a new window" href="#">
                                            <span class="people-meta__social-link-inner"> <span class="people-meta__social-link-label">Instagram</span>
                                                <span class="people-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>
</div>
<!-- END: Person Meta -->
 
{#
	{% include '@component-people-meta' with {
		item: {
			image: '1',
			alt: '',
			phone_numbers: [
				{
					title: 'Phone Label',
					type: 'Phone Type',
					number: '(410) 555-1234'
				}
			],
			office_hours: [
				{
					title: 'Monday',
					hours: '9am - 5pm'
				}
			],
			email: 'email@address.com',
			location: 'Location',
			departments: [
				{
					url: '#',
					title: 'department'
				}
			],
			social_links: [
				{
					title: 'Linkedin',
					url: '#'
				}
			]
		}
	} %}
#}

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

<script type="application/ld+json">
	{{
		{
			'@context': 'http://schema.org',
			'@type': 'Person',
			'email': item.email,
			'image': 'https://images.fastspot.com/' ~ config.images ~ '/' ~ img.square.xsml.width ~ 'x' ~ img.square.xsml.width ~ '/' ~ item.image,
			'jobTitle': item.job_title,
			'name': item.name,
			'telephone': item.phone_numbers|column('number')[1],
			'url': '#'
		}|json_encode
	 }}
</script>

<!-- Person Meta -->
<div class="people-meta" id="{{ id }}">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="people-meta__inner">
				<div class="people-meta__body">
					{% if item.image %}
						<figure class="people-meta__figure">
							{% include '@partial-image' with {
								class: 'people-meta__image',
								alt: alt,
								image: image,
								crop: 'square',
								max: 'xsml'
							} only %}
						</figure>
					{% endif %}
					<div class="people-meta__details">
						{% if item.phone_numbers or item.email %}
							<address class="people-meta__detail people-meta__detail--contact">
								<div class="people-meta__detail-label">
									Contact
								</div>
								<div class="people-meta__detail-items">
									{% for phone in item.phone_numbers %}
										<div class="people-meta__detail-item">
											<div class="people-meta__detail-item-header">
												<div class="people-meta__detail-item-header-icon" aria-hidden="true">
													{{ icon('phone') }}
												</div>
												<div class="people-meta__detail-item-header-label">
													{{- phone.title -}}
												</div>
											</div>
											<div class="people-meta__detail-item-body">
												<div class="people-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="people-meta__detail-item">
											<div class="people-meta__detail-item-header">
												<div class="people-meta__detail-item-header-icon" aria-hidden="true">
													{{ icon('mail') }}
												</div>
												<div class="people-meta__detail-item-header-label">
													Email Address
												</div>
											</div>
											<div class="people-meta__detail-item-body">
												<div class="people-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="people-meta__detail people-meta__detail--location">
								<div class="people-meta__detail-label">
									Location
								</div>
								<div class="people-meta__detail-items">
									<div class="people-meta__detail-item">
										<div class="people-meta__detail-item-header">
											<div class="people-meta__detail-item-header-icon" aria-hidden="true">
												{{ icon('place') }}
											</div>
										</div>
										<div class="people-meta__detail-item-body">
											<div class="people-meta__detail-item-body-label">
												{{- item.location -}}
											</div>
										</div>
									</div>
								</div>
							</div>
						{% endif %}
						<div class="people-meta__detail people-meta__detail--department">
							<div class="people-meta__detail-label">
								Department
							</div>
							<div class="people-meta__detail-items">
								<div class="people-meta__detail-item">
									<div class="people-meta__detail-item-body">
										{% for department in item.departments %}
											<div class="people-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="people-meta__detail people-meta__detail--hours">
								<div class="people-meta__detail-label">
									Office Hours
								</div>
								<div class="people-meta__detail-items">
									{% for office_hours in item.office_hours %}
										<div class="people-meta__detail-item">
											<div class="people-meta__detail-item-header">
												<div class="people-meta__detail-item-header-icon" aria-hidden="true">
													{{ icon('clock') }}
												</div>
												<div class="people-meta__detail-item-header-label">
													{{- office_hours.title -}}
												</div>
											</div>
											<div class="people-meta__detail-item-body">
												<div class="people-meta__detail-item-body-label">
													{{- office_hours.hours -}}
												</div>
											</div>
										</div>
									{% endfor %}
								</div>
							</div>
						{% endif %}
						{% if item.social_links %}
							<div class="people-meta__detail people-meta__detail--social">
								<div class="people-meta__detail-label" id="{{ id ~ '__detail-label-social' }}">
									Social
								</div>
								<div class="people-meta__detail-items">
									<ul
										class="people-meta__socials"
										aria-labelledby="page-header__title {{ id ~ '__detail-label-social' }}"
									>
										{% for social in item.social_links %}
											<li class="people-meta__social" id="{{ id ~ '__social-' ~ loop.index }}">
												{% include '@partial-link' with {
													classes: {
														base: 'people-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>
</div>
<!-- END: Person Meta -->

No notes defined.