Merced Component Library

Call To Action: 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 call_to_action_item_reversed">
                        <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/2 980w, https://images.fastspot.com/merced/740x740/2 740w, https://images.fastspot.com/merced/500x500/2 500w, https://images.fastspot.com/merced/300x300/2 300w" src="https://images.fastspot.com/merced/300x300/2" 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 Right Call to Action with Multiple Links and More Example Content</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, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</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">Primary Link #1</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 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">Primary Link #2</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.