CCGA Component Library

Contact Details 

<!-- Contact Details -->
<div class="contact_details">
    <div class="contact_detail">
        <div class="contact_detail_inner">
            <div class="contact_detail_item">
                <div class="contact_detail_hint">
                    Issue Expertise
                </div>

                <div class="contact_detail_info_items">
                    <div class="contact_detail_info_item">
                        <a class="contact_detail_info" href="#">
                            Global Cities
                        </a>
                    </div>
                </div>
            </div>
            <div class="contact_detail_item">
                <div class="contact_detail_hint">
                    Regional Expertise
                </div>

                <div class="contact_detail_info_items">
                    <div class="contact_detail_info_item">
                        <a class="contact_detail_info" href="#">
                            Chile
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="contact_detail">
        <div class="contact_detail_inner">
            <div class="contact_detail_item">
                <div class="contact_detail_hint">
                    Contact
                </div>

                <div class="contact_detail_info_items">
                    <div class="contact_detail_info_item">
                        <a class="contact_detail_info" itemprop="link" href="#">
                            Send a Message or Question
                        </a>
                    </div>
                    <div class="contact_detail_info_item">
                        <a class="contact_detail_info" itemprop="telephone" href="tel:443-555-1234">
                            443-555-1234
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="contact_detail">
        <div class="contact_detail_inner">
            <div class="contact_detail_item">
                <div class="contact_detail_hint">
                    Social Media
                </div>

                <div class="contact_detail_social_items">
                    <div class="contact_detail_social_item">
                        <a class="contact_detail_social_link" href="https://facebook.com" aria-label="Facebook">
                            <div class="contact_detail_social_icon">

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

                            </div>
                        </a>
                    </div>
                    <div class="contact_detail_social_item">
                        <a class="contact_detail_social_link" href="https://twitter.com/IvoHDaalder" aria-label="Twitter">
                            <div class="contact_detail_social_icon">

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

                            </div>
                        </a>
                    </div>
                    <div class="contact_detail_social_item">
                        <a class="contact_detail_social_link" href="https://instagram.com" aria-label="Instagram">
                            <div class="contact_detail_social_icon">

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

                            </div>
                        </a>
                    </div>
                    <div class="contact_detail_social_item">
                        <a class="contact_detail_social_link" href="https://tiktok.com" aria-label="Tik Tok">
                            <div class="contact_detail_social_icon">

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

                            </div>
                        </a>
                    </div>
                    <div class="contact_detail_social_item">
                        <a class="contact_detail_social_link" href="https://linkedin.com" aria-label="LinkedIn">
                            <div class="contact_detail_social_icon">

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

                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<!-- END: Contact Details -->
 
<!-- Contact Details -->
<div class="contact_details">
	{% if item.expertise.length %}
		<div class="contact_detail">
			<div class="contact_detail_inner">
				{% for expertise in item.expertise %}
					<div class="contact_detail_item">
						<div class="contact_detail_hint">
							{{ expertise.label }}
						</div>

						<div class="contact_detail_info_items">
							{% for item in expertise.items %}
								<div class="contact_detail_info_item">
									<a class="contact_detail_info" href="{{ item.href }}">
										{{ item.name }}
									</a>
								</div>
							{% endfor %}
						</div>
					</div>
				{% endfor %}
			</div>
		</div>
	{% endif %}

	{% if item.contact.length %}
		<div class="contact_detail">
			<div class="contact_detail_inner">
				{% for contact in item.contact %}
					<div class="contact_detail_item">
						<div class="contact_detail_hint">
							{{ contact.label }}
						</div>

						<div class="contact_detail_info_items">
							{% for item in contact.items %}
								<div class="contact_detail_info_item">
									<a class="contact_detail_info" itemprop="{{ item.type }}" href="{{ item.href }}">
										{{ item.name }}
									</a>
								</div>
							{% endfor %}
						</div>
					</div>
				{% endfor %}
			</div>
		</div>
	{% endif %}

	{% if item.social.length %}
		<div class="contact_detail">
			<div class="contact_detail_inner">
				{% for social in item.social %}
					<div class="contact_detail_item">
						<div class="contact_detail_hint">
							{{ social.label }}
						</div>

						<div class="contact_detail_social_items">
							{% for item in social.items %}
								<div class="contact_detail_social_item">
									<a class="contact_detail_social_link" href="{{ item.href }}" aria-label="{{ item.name }}">
										<div class="contact_detail_social_icon">
											{{ icon(item.icon) }}
										</div>
									</a>
								</div>
							{% endfor %}
						</div>
					</div>
				{% endfor %}
			</div>
		</div>
	{% endif %}

	{% if item.phone.length %}
		<div class="contact_detail">
			<div class="contact_detail_inner">
				{% for phone in item.phone %}
					<div class="contact_detail_item">
						<div class="contact_detail_hint">
							{{ phone.label }}
						</div>

						<div class="contact_detail_info_items">
							{% for item in phone.items %}
								<div class="contact_detail_info_item">
									<a class="contact_detail_info" itemprop="{{ item.type }}" href="{{ item.href }}">
										{{ item.name }}
									</a>
								</div>
							{% endfor %}
						</div>
					</div>
				{% endfor %}
			</div>
		</div>
	{% endif %}
</div>
<!-- END: Contact Details -->

No notes defined.