Merced 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/merced/500x500/1",
        "jobTitle": null,
        "name": "Jane Smith",
        "telephone": "",
        "url": "#"
    }
</script>

<!-- Person Meta -->
<div class="people-meta" id="people-meta-7">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="people-meta__inner">
                <div class="people-meta__grid">
                    <div class="people-meta__grid-item is-content">
                        <h1 class="people-meta__title">
                            Dr. John S Albana, Sr.
                        </h1>

                        <div class="people-meta__position">
                            Dean of Instruction Business Economics Edu. & Noncredit Instruction
                        </div>

                        <div class="people-meta__details">
                            <div class="people-meta__detail people-meta__detail--contact">
                                <div class="people-meta__detail-label visually_hide">
                                    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#phone" />
                                                </svg>

                                            </div>
                                            <div class="people-meta__detail-item-header-label">
                                                Phone
                                            </div>
                                        </div>

                                        <div class="people-meta__detail-item-body">
                                            <div class="people-meta__detail-item-body-label">

                                                <a href="tel:(410) 555-1234" class="people-meta__detail_link">
                                                    <span class="people-meta__detail_link_inner">
                                                        <span class="people-meta__detail_link_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#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 href="mailto:vulputate-eget@university.edu" class="people-meta__detail_link">
                                                    <span class="people-meta__detail_link_inner">
                                                        <span class="people-meta__detail_link_label">vulputate-eget@university.edu</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_at">
                                                    <use href="/images/icons.svg#at" />
                                                </svg>

                                            </div>
                                            <div class="people-meta__detail-item-header-label">
                                                Social
                                            </div>
                                        </div>
                                        <div class="people-meta__detail-item-body">
                                            <div class="people-meta__detail-item-body-label">
                                                <div class="people-meta__socials" aria-labelledby="page-header__title people-meta-7__detail-label-social">
                                                    <div class="people-meta__detail-item">
                                                        <div class="people-meta__detail-item-body">
                                                            <a href="#" class="people-meta__detail_link"><span class="people-meta__detail_link_inner"><span class="people-meta__detail_link_label">Linkedin</span></span></a>,
                                                            <a href="#" class="people-meta__detail_link"><span class="people-meta__detail_link_inner"><span class="people-meta__detail_link_label">X</span></span></a>,
                                                            <a href="#" class="people-meta__detail_link"><span class="people-meta__detail_link_inner"><span class="people-meta__detail_link_label">Facebook</span></span></a>,
                                                            <a href="#" class="people-meta__detail_link"><span class="people-meta__detail_link_inner"><span class="people-meta__detail_link_label">Instagram</span></span></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="people-meta__detail people-meta__detail--location">
                                <div class="people-meta__detail-label">
                                    <div class="people-meta__detail-label__icon">

                                        <svg class="icon icon_location">
                                            <use href="/images/icons.svg#location" />
                                        </svg>

                                    </div>

                                    <div class="people-meta__detail-label__text">Location</div>
                                </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 href="#" class="people-meta__detail_link">
                                                    <span class="people-meta__detail_link_inner">
                                                        <span class="people-meta__detail_link_label">Merced Campus</span>
                                                    </span>
                                                </a>Appleseed Library<br>Room 214<br>Curabitur ullamcorper ultricies
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="people-meta__detail people-meta__detail--hours">
                                <div class="people-meta__detail-label">
                                    <div class="people-meta__detail-label__icon">

                                        <svg class="icon icon_clock">
                                            <use href="/images/icons.svg#clock" />
                                        </svg>

                                    </div>

                                    <div class="people-meta__detail-label__text">Office Hours</div>
                                </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">
                                                Monday & Wednesday:&nbsp;9-10:30a (In-person)</div>
                                        </div>
                                    </div>
                                    <div class="people-meta__detail-item">
                                        <div class="people-meta__detail-item-body">
                                            <div class="people-meta__detail-item-body-label">
                                                Monday - Thursday:&nbsp;10:30-11a (Zoom)</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="people-meta__grid-item is-media">
                        <figure class="people-meta__figure">

                            <img class="people-meta_image" srcset="https://images.fastspot.com/merced/500x500/1 500w, https://images.fastspot.com/merced/300x300/1 300w, https://images.fastspot.com/merced/100x100/1 100w" sizes="(min-width: 1240px) 225px, (min-width: 980px) calc(4.17vw + 154px), 130px" src="https://images.fastspot.com/merced/100x100/1" alt="" loading="lazy" width="100" height="100">
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Person Meta -->
 
{#
	{% include '@component-people-meta' with {
		item: {
			image: '1',
			alt: '',
			phone_number: [
				{
					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': '',
			'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__grid">
					<div class="people-meta__grid-item is-content">
						<h1 class="people-meta__title">
							Dr. John S Albana, Sr.
						</h1>

						<div class="people-meta__position">
							Dean of Instruction Business Economics Edu. & Noncredit Instruction
						</div>

						<div class="people-meta__details">
							{% if item.phone_number or item.email %}
								<div class="people-meta__detail people-meta__detail--contact">
									<div class="people-meta__detail-label visually_hide">
										Contact
									</div>

									<div class="people-meta__detail-items">
										{% if item.phone_number %}
											<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
													</div>
												</div>

												<div class="people-meta__detail-item-body">
													<div class="people-meta__detail-item-body-label">
														{% include '@component-link' with {
															class: 'people-meta__detail',
															title: item.phone_number,
															url: 'tel:' ~ item.phone_number
														} only %}
													</div>
												</div>
											</div>
										{% endif %}

										{% 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 '@component-link' with {
															class: "people-meta__detail",
															title: item.email,
															url: 'mailto:' ~ item.email
														} only %}
													</div>
												</div>
											</div>
										{% endif %}

										{% if item.social_links %}
											<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('at') }}
													</div>
													<div class="people-meta__detail-item-header-label">
														Social
													</div>
												</div>
												<div class="people-meta__detail-item-body">
													<div class="people-meta__detail-item-body-label">
														<div
															class="people-meta__socials"
															aria-labelledby="page-header__title {{ id ~ '__detail-label-social' }}"
														>
															<div class="people-meta__detail-item">
																<div class="people-meta__detail-item-body">
																	{% spaceless %}
																		{% for social in item.social_links %}
																			{% include '@component-link' with {
																				class: 'people-meta__detail',
																				title: social.title,
																				url: social.url,
																			} only %}{% if not loop.last %}, {% endif %}
																		{% endfor %}
																	{% endspaceless %}
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										{% endif %}
									</div>
								</div>
							{% endif %}

							{% if item.location %}
								<div class="people-meta__detail people-meta__detail--location">
									<div class="people-meta__detail-label">
										<div class="people-meta__detail-label__icon">
											{{ icon("location") }}
										</div>

										<div class="people-meta__detail-label__text">Location</div>
									</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">
													{% include '@component-link' with {
														class: 'people-meta__detail',
														title: "Merced Campus",
														url: "#",
													} only %}

													{{- item.location -}}
												</div>
											</div>
										</div>
									</div>
								</div>
							{% endif %}
							
							{% if item.office_hours %}
								<div class="people-meta__detail people-meta__detail--hours">
									<div class="people-meta__detail-label">
										<div class="people-meta__detail-label__icon">
											{{ icon("clock") }}
										</div>

										<div class="people-meta__detail-label__text">Office Hours</div>
									</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-body">
													<div class="people-meta__detail-item-body-label">
														{{ office_hours.title }}:&nbsp;{{- office_hours.hours -}}
													</div>
												</div>
											</div>
										{% endfor %}
									</div>
								</div>
							{% endif %}
						</div>
					</div>

					<div class="people-meta__grid-item is-media">
						{% if item.image %}
							<figure class="people-meta__figure">
								{% include '@component-image' with {
									class: 'people-meta',
									alt: alt,
									image: item.image,
									sources: [
										img.square.xsml,
										img.square.xxsml,
										img.square.thumb
									],
									sizes: [
										"(min-width: 1240px) 225px",
										"(min-width: 980px) calc(4.17vw + 154px)",
										"130px"
									]
								} %}
							</figure>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Person Meta -->

No notes defined.