Methodist University Component Library

Visual Cta 

<!-- Visual CTA Row -->
<div class="visual_cta">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="visual_cta_inner">
                <div class="visual_cta_body">
                    <figure class="visual_cta_figure" aria-hidden="true">

                        <picture class="visual_cta_picture">
                            <source media="(min-width: 1200px)" srcset="https://images.fastspot.com/methodist-university/1220x686/2">
                            <source media="(min-width: 740px)" srcset="https://images.fastspot.com/methodist-university/980x552/2">
                            <source media="(min-width: 500px)" srcset="https://images.fastspot.com/methodist-university/740x740/2">
                            <img class="visual_cta_image" src="//images.fastspot.com/methodist-university/555x740/2" alt="" loading="lazy" width="555px" height="740px">
                        </picture>
                    </figure>
                    <div class="visual_cta_wrapper">
                        <h2 class="visual_cta_title">Immerse Yourself In Campus Life</h2>
                        <div class="visual_cta_description">
                            <p>With over 140 student clubs and organizations, honor societies, and recreational sports to choose from, we are committed to helping students find their niche on campus.</p>
                        </div>
                        <div class="visual_cta_action">

                            <a href="#" class="visual_cta_link">
                                <span class="visual_cta_link_inner">
                                    <span class="visual_cta_link_label">Campus Life</span>
                                    <span class="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="visual_cta">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="visual_cta_inner">
				<div class="visual_cta_body">
          <figure class="visual_cta_figure" aria-hidden="true">
            {% include '@partial-picture' with {
              class: 'visual_cta',
              alt: '',
              image: image,
              loading: 'lazy',
              default: img.portraitFull.sml,
              sources: {
                '1200px': img.wide.lrg,
                '740px': img.wide.med,
                '500px': img.square.sml
              }
            } %}
          </figure>
          <div class="visual_cta_wrapper">
            <h2 class="visual_cta_title">{{ title }}</h2>
            <div class="visual_cta_description">
              <p>{{ description }}</p>
            </div>
            {% if link %}
              <div class="visual_cta_action">
                {% include '@partial-link' with {
                  class: 'visual_cta',
                  title: link.title,
                  url: link.url,
                  icon: link.icon
                } %}
              </div>
            {% endif %}
          </div>
        </div>
			</div>
		</div>
	</div>
</div>
<!-- END: Visual CTA Row -->

No notes defined.