Merced Component Library

Call To Action 

<!-- Topic Row -->
<div class="call_to_action">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="call_to_action_inner">
                <div class="call_to_action_body">
                    <div class="js-observable call_to_action_item">
                        <div class="call_to_action_item_inner">
                            <figure class="call_to_action_item_figure" aria-hidden="true">

                                <img class="call_to_action_item_image" srcset="https://images.fastspot.com/merced/980x980/1 980w, https://images.fastspot.com/merced/740x740/1 740w, https://images.fastspot.com/merced/500x500/1 500w, https://images.fastspot.com/merced/300x300/1 300w" src="https://images.fastspot.com/merced/300x300/1" alt="" loading="lazy" width="300" height="300">
                            </figure>
                            <div class="call_to_action_item_wrapper">
                                <div class="call_to_action_item_header">
                                    <h3 class="call_to_action_item_title">Image Left Call to Action</h3>
                                    <h2 class="call_to_action_item_lead">subtitle lead-in</h2>
                                </div>
                                <div class="call_to_action_item_body">
                                    <div class="call_to_action_item_description">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus mi blandit luctus iaculis. Cras congue at ante ut blandit.</p>
                                    </div>
                                </div>
                                <div class="call_to_action_item_links">
                                    <div class="call_to_action_item_link_item">

                                        <a href="#" class="call_to_action_item_link">
                                            <span class="call_to_action_item_link_inner">
                                                <span class="call_to_action_item_link_label">Explore Offerings</span>
                                                <span class="call_to_action_item_link_icon" aria-hidden="true">
                                                    <i class="fa-regular fa-circle-chevron-right"></i>
                                                </span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Topic Row -->
 
{#
	{% include '@component-call_to_action_item-row' with {
		title: 'Title',
		description: 'Description',
		items: [
			{
				title: 'Item Title',
				image: '1',
				description: 'Item Description',
				links: [
					{
						title: 'Link Title',
						url: '#',
						icon: 'arrow_right'
					}
				]
			}
		]
	} %}
#}

<!-- Topic Row -->
<div class="call_to_action">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="call_to_action_inner">
				<div class="call_to_action_body">
					<div class="js-observable call_to_action_item{% if layout %} call_to_action_item_{{ layout }}{% endif %}">
						<div class="call_to_action_item_inner">
							{% if image %}
								<figure class="call_to_action_item_figure" aria-hidden="true">
									{% include '@component-image' with {
										class: 'call_to_action_item',
										alt: '',
										image: image,
										loading: 'lazy',
										sources: [
											img.square.med,
											img.square.sml,
											img.square.xsml,
											img.square.xxsml
										]
									} %}
								</figure>
							{% endif %}
							<div class="call_to_action_item_wrapper">
								<div class="call_to_action_item_header">
										<h3 class="call_to_action_item_title">{{ title }}</h3>
										<h2 class="call_to_action_item_lead">{{ lead }}</h2>
								</div>
								<div class="call_to_action_item_body">
									<div class="call_to_action_item_description">
										<p>{{ description }}</p>
									</div>
								</div>
								{% if links %}
									<div class="call_to_action_item_links">
										{% for link in links %}
											<div class="call_to_action_item_link_item">
												{% include '@component-link' with {
													class: 'call_to_action_item',
													title: link.title,
													url: link.url,
													icon: 'fa-regular fa-circle-chevron-right'
												} %}
											</div>
										{% endfor %}
									</div>
								{% endif %}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Topic Row -->

No notes defined.