Methodist University Component Library

Random Visual Cta 

<!-- Visual CTA Row -->
<div class="random_visual_cta">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="random_visual_cta_inner">
                <div class="random_visual_cta_body">
                    <figure class="random_visual_cta_figure" aria-hidden="true">

                        <img class="random_visual_cta_image" srcset="https://images.fastspot.com/methodist-university/980x980/2 980w, https://images.fastspot.com/methodist-university/740x740/2 740w" src="https://images.fastspot.com/methodist-university/740x740/2" alt="" loading="lazy" width="740" height="740">
                    </figure>
                    <div class="random_visual_cta_wrapper">
                        <h3 class="random_visual_cta_title">See everything Methodist has to offer.</h3>
                        <div class="random_visual_cta_action">

                            <a href="#" class="random_visual_cta_link">
                                <span class="random_visual_cta_link_inner">
                                    <span class="random_visual_cta_link_label">Explore Photos</span>
                                    <span class="random_visual_cta_link_icon" aria-hidden="true">

                                        <svg class="icon icon_chevron_right">
                                            <use href="/images/icons.svg#chevron_right" />
                                        </svg>

                                    </span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Visual CTA Row -->
 
<!-- Visual CTA Row -->
<div class="random_visual_cta">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="random_visual_cta_inner">
				<div class="random_visual_cta_body">
          <figure class="random_visual_cta_figure" aria-hidden="true">
            {% include '@partial-image' with {
              class: 'random_visual_cta',
              alt: '',
              image: image,
              loading: 'lazy',
              sources: [
                img.square.med,
                img.square.sml
              ]
            } %}
          </figure>
          <div class="random_visual_cta_wrapper">
            <h3 class="random_visual_cta_title">{{ title }}</h3>
            <div class="random_visual_cta_action">
              {% include '@partial-link' with {
                class: 'random_visual_cta',
                title: link.title,
                url: link.url,
                icon: link.icon
              } %}
            </div>
          </div>
        </div>
			</div>
		</div>
	</div>
</div>
<!-- END: Visual CTA Row -->

No notes defined.