CCGA Component Library

Contact Block 

<div class="manual_contact_block">

    <div class="manual_contact_block_label">
        <h2 class="manual_contact_block_label_text">Contact Us</h2>
    </div>

    <div class="manual_contact_block_header">
        <h3 class="manual_contact_block_name">
            <a href="#" class="manual_contact_block_name_link">
                <span class="manual_contact_block_name_link_label">Michele Acuto</span>
                <span class="manual_contact_block_name_link_icon">
                    <svg class="icon icon_arrow_right">
                        <use href="/images/icons.svg#arrow_right" />
                    </svg>
                </span>
            </a>
        </h3>
        <span class="manual_contact_block_title">Nonresident Senior Fellow, Global Cities</span>
    </div>

    <figure class="manual_contact_block_figure">
        <span class="lazy_image_wrapper manual_contact_block_figure_image_wrapper">
            <img class="js-lazy js-lazyload manual_contact_block_figure_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/the-chicago-council-on-global-affairs/100x100/6" data-srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/100x100/6 100w, //images.fastspot.com/the-chicago-council-on-global-affairs/300x300/6 300w" alt="">
        </span>
        <noscript>
            <img class="manual_contact_block_figure_image" src="https://images.fastspot.com/the-chicago-council-on-global-affairs/300x300/6" srcset="//images.fastspot.com/the-chicago-council-on-global-affairs/300x300/6 300w, //images.fastspot.com/the-chicago-council-on-global-affairs/100x100/6 100w" sizes="100vw" alt="">
        </noscript>
    </figure>

    <div class="manual_contact_block_contact_info">
        <div class="manual_contact_block_contact_detail manual_contact_block_contact_phone">
            <div class="manual_contact_block_contact_label">Phone</div>
            <a href="tel:+1 312-821-7525" class="manual_contact_block_contact_link">+1 312-821-7525</a>
        </div>

        <div class="manual_contact_block_contact_detail manual_contact_block_contact_connect">
            <div class="manual_contact_block_contact_label">Contact</div>
            <a href="#" class="manual_contact_block_contact_link">Send a Message or Question</a>
        </div>

        <div class="manual_contact_block_contact_detail manual_contact_block_contact_social">
            <div class="manual_contact_block_contact_label">Connect</div>

            <div class="manual_contact_block_contact_social_items">
                <div class="manual_contact_block_contact_social_item">
                    <a class="manual_contact_block_contact_social_link" href="https://facebook.com" aria-label="">
                        <div class="manual_contact_block_contact_social_icon">

                            <svg class="icon icon_facebook">
                                <use href="/images/icons.svg#facebook" />
                            </svg>

                        </div>
                    </a>
                </div>
                <div class="manual_contact_block_contact_social_item">
                    <a class="manual_contact_block_contact_social_link" href="https://twitter.com/IvoHDaalder" aria-label="">
                        <div class="manual_contact_block_contact_social_icon">

                            <svg class="icon icon_twitter">
                                <use href="/images/icons.svg#twitter" />
                            </svg>

                        </div>
                    </a>
                </div>
                <div class="manual_contact_block_contact_social_item">
                    <a class="manual_contact_block_contact_social_link" href="https://instagram.com" aria-label="">
                        <div class="manual_contact_block_contact_social_icon">

                            <svg class="icon icon_instagram">
                                <use href="/images/icons.svg#instagram" />
                            </svg>

                        </div>
                    </a>
                </div>
                <div class="manual_contact_block_contact_social_item">
                    <a class="manual_contact_block_contact_social_link" href="https://tiktok.com" aria-label="">
                        <div class="manual_contact_block_contact_social_icon">

                            <svg class="icon icon_tiktok">
                                <use href="/images/icons.svg#tiktok" />
                            </svg>

                        </div>
                    </a>
                </div>
                <div class="manual_contact_block_contact_social_item">
                    <a class="manual_contact_block_contact_social_link" href="https://linkedin.com" aria-label="">
                        <div class="manual_contact_block_contact_social_icon">

                            <svg class="icon icon_linkedin">
                                <use href="/images/icons.svg#linkedin" />
                            </svg>

                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="manual_contact_block">

	{% if label %}
	<div class="manual_contact_block_label">
		<h2 class="manual_contact_block_label_text">{{ label }}</h2>
	</div>
	{% endif %}

	<div class="manual_contact_block_header">
		<h3 class="manual_contact_block_name">
			<a href="#" class="manual_contact_block_name_link">
				<span class="manual_contact_block_name_link_label">{{ name }}</span>
				<span class="manual_contact_block_name_link_icon">{{ icon("arrow_right") }}</span>
			</a>
		</h3>
		<span class="manual_contact_block_title">{{ title }}</span>
	</div>

	<figure class="manual_contact_block_figure">
		{% render "@partial-image" with {
			class: "manual_contact_block_figure",
			alt: "",
			image: image,
			sources: [
				img.square.xxsml,
				img.square.thumb
			]
		} %}
	</figure>

	<div class="manual_contact_block_contact_info">
		{% if phone %}
		<div class="manual_contact_block_contact_detail manual_contact_block_contact_phone">
			<div class="manual_contact_block_contact_label">Phone</div>
			<a href="tel:{{ phone }}" class="manual_contact_block_contact_link">{{ phone }}</a>
		</div>
		{% endif %}

		{% if connect %}
		<div class="manual_contact_block_contact_detail manual_contact_block_contact_connect">
			<div class="manual_contact_block_contact_label">Contact</div>
			<a href="{{ connect.url }}" class="manual_contact_block_contact_link">{{ connect.label }}</a>
		</div>
		{% endif %}

		{% if social %}
		<div class="manual_contact_block_contact_detail manual_contact_block_contact_social">
			<div class="manual_contact_block_contact_label">Connect</div>

			<div class="manual_contact_block_contact_social_items">
				{% for item in social %}
					<div class="manual_contact_block_contact_social_item">
						<a class="manual_contact_block_contact_social_link" href="{{ item.href }}" aria-label="{{ item.name }}">
							<div class="manual_contact_block_contact_social_icon">
								{{ icon(item.icon) }}
							</div>
						</a>
					</div>
				{% endfor %}
			</div>
		</div>
		{% endif %}
	</div>
</div>

No notes defined.