DRBU Component Library

Contact Info: Theme Brand Green 

<!-- Contact Info -->
<div class="contact_block theme_brand_green">
    <script type="application/ld+json">
        {
            '@context': 'http://schema.org',
            '@type': 'Person',
            'email': 'mailto:w.chen@drbu.edu',
            'image': '1',
            'jobTitle': 'Director of Admissions and Financial Aid',
            'name': 'Wayne Chen',
            'telephone': '',
            'url': '#'
        }
    </script>
    <div class="fs-row">
        <div class="fs-cell">
            <div class="contact_block_inner">
                <div class="contact">
                    <div class="contact_wrapper">
                        <div class="contact_header">
                            <div class="contact_label">Contact Us</div>
                            <div class="contact_header_wrapper">
                                <div class="contact_info">
                                    <h2 class="contact_name">

                                        <a href="#" class="contact_name_link">
                                            <span class="contact_name_link_inner">
                                                <span class="contact_name_link_label">Wayne Chen</span>
                                                <span class="contact_name_link_icon" aria-hidden="true">

                                                    <svg class="icon icon_arrow_right">
                                                        <use href="/images/icons.svg#arrow_right" />
                                                    </svg>

                                                </span>
                                            </span>
                                        </a>
                                    </h2>
                                    <div class="contact_title">Director of Admissions and Financial Aid</div>
                                </div>
                                <div class="contact_media contact_media_sm">
                                    <figure class="contact_figure">

                                        <img class="contact_image" srcset="https://images.fastspot.com/framework/500x500/1 500w, https://images.fastspot.com/framework/300x300/1 300w" src="https://images.fastspot.com/framework/300x300/1" alt="" loading="lazy" width="300" height="300">
                                    </figure>
                                </div>
                            </div>
                        </div>
                        <div class="contact_details">
                            <div class="contact_detail contact_phone_numbers">
                                <div class="contact_detail_info">
                                    <div class="contact_detail_icon">
                                        <svg class="icon icon_phone">
                                            <use href="/images/icons.svg#phone" />
                                        </svg>
                                    </div>
                                    <a class="contact_detail_info_link" href="tel:7076217000">(707) 621-7000</a>
                                </div>
                            </div>
                            <div class="contact_detail">
                                <div class="contact_detail_info">
                                    <div class="contact_detail_icon">
                                        <svg class="icon icon_email">
                                            <use href="/images/icons.svg#email" />
                                        </svg>
                                    </div>
                                    <a class="contact_detail_info_link" href="mailto:w.chen@drbu.edu">w.chen@drbu.edu</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="contact_media contact_media_lg">
                        <figure class="contact_figure">

                            <img class="contact_image" srcset="https://images.fastspot.com/framework/740x740/1 740w, https://images.fastspot.com/framework/500x500/1 500w" src="https://images.fastspot.com/framework/500x500/1" alt="" loading="lazy" width="500" height="500">
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Contact Info -->
 
{#
	{% include '@component-contact-info' with {
		item: {
			name: 'Full Name',
			job_title: 'Director of Department',
			image: '1',
			phone_numbers: [
				{
					label: 'mobile',
					type: 'telephone',
					number: '(410) 555-1234'
				}
			],
			email: 'name@university.edu',
			location: '1234 Maple Bacon Ln.<br>Baltimore, MD 21211',
			office_hours: [
				{
					label: 'Monday',
					hours: '9am - 5pm'
				}
			],
			social_links: [
				{
					title: 'LinkedIn',
					url: '#'
				}
			]
		}
	} %}
#}

<!-- Contact Info -->
<div class="contact_block theme_{{ theme }}">
	<script type="application/ld+json">
		{
			'@context': 'http://schema.org',
			'@type': 'Person',
			'email': 'mailto:{{ item.email }}',
			'image': '{{ item.image }}',
			'jobTitle': '{{ item.job_title }}',
			'name': '{{ item.name }}',
			'telephone': '{{ item.phone_numbers[0].number }}',
			'url': '#'
		}
	</script>
	<div class="fs-row">
		<div class="fs-cell">
			<div class="contact_block_inner">
				<div class="contact">
					<div class="contact_wrapper">
						<div class="contact_header">
							<div class="contact_label">Contact Us</div>
							<div class="contact_header_wrapper">
								<div class="contact_info">
									<h2 class="contact_name">
										{% if item.link %}
											{% include '@partial-link' with {
												class: 'contact_name',
												title: item.name,
												url: item.link.url,
												icon: item.link.icon
											} %}
										{% else %}
											{{ item.name }}
										{% endif %}
									</h2>
									{% if item.job_title %}
										<div class="contact_title">{{ item.job_title }}</div>
									{% endif %}
								</div>
								<div class="contact_media contact_media_sm">
									{% if item.image %}
										<figure class="contact_figure">
											{% include '@partial-image' with {
												class: 'contact',
												alt: '',
												image: item.image,
												loading: 'lazy',
												sources: [
													img.square.xsml,
													img.square.xxsml
												]
											} %}
										</figure>
									{% endif %}
								</div>
							</div>
						</div>
						<div class="contact_details">
							{% if item.phone_numbers|length %}
								<div class="contact_detail contact_phone_numbers">
									{% for phone_number in item.phone_numbers %}
										<div class="contact_detail_info">
											<div class="contact_detail_icon">{{ icon('phone') }}</div>
											<a class="contact_detail_info_link" href="tel:{{ tel(phone_number.phone_number) }}">{{ phone_number.phone_number }}</a>
										</div>
									{% endfor %}
								</div>
							{% endif %}
							{% if item.email %}
								<div class="contact_detail">
									<div class="contact_detail_info">
										<div class="contact_detail_icon">{{ icon('email') }}</div>
										<a class="contact_detail_info_link" href="mailto:{{ item.email }}">{{ item.email }}</a>
									</div>
								</div>
							{% endif %}
						</div>
					</div>
					<div class="contact_media contact_media_lg">
						{% if item.image %}
							<figure class="contact_figure">
								{% include '@partial-image' with {
									class: 'contact',
									alt: '',
									image: item.image,
									loading: 'lazy',
									sources: [
										img.square.sml,
										img.square.xsml
									]
								} %}
							</figure>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Contact Info -->

No notes defined.