Methodist University Component Library

Visual Ctas 

<!-- Visual CTA Row -->
<div class="visual_ctas">
    <div class="visual_ctas_header">
        <h2 class="visual_ctas_title">A Community On and Off Campus</h2>
    </div>
    <div class="visual_ctas_inner">
        <div class="visual_ctas_figures">
            <figure class="visual_ctas_figure" aria-hidden="true">

                <picture class="visual_ctas_picture">
                    <source media="(min-width: 1394px)" srcset="https://images.fastspot.com/methodist-university/1220x686/1">
                    <source media="(min-width: 1200px)" srcset="https://images.fastspot.com/methodist-university/1220x915/1">
                    <source media="(min-width: 740px)" srcset="https://images.fastspot.com/methodist-university/980x980/1">
                    <source media="(min-width: 500px)" srcset="https://images.fastspot.com/methodist-university/740x740/1">
                    <img class="visual_ctas_image" src="//images.fastspot.com/methodist-university/555x740/1" alt="" loading="lazy" width="555px" height="740px">
                </picture>
            </figure>
            <figure class="visual_ctas_figure" aria-hidden="true">

                <picture class="visual_ctas_picture">
                    <source media="(min-width: 1394px)" srcset="https://images.fastspot.com/methodist-university/1220x686/2">
                    <source media="(min-width: 1200px)" srcset="https://images.fastspot.com/methodist-university/1220x915/2">
                    <source media="(min-width: 740px)" srcset="https://images.fastspot.com/methodist-university/980x980/2">
                    <source media="(min-width: 500px)" srcset="https://images.fastspot.com/methodist-university/740x740/2">
                    <img class="visual_ctas_image" src="//images.fastspot.com/methodist-university/555x740/2" alt="" loading="lazy" width="555px" height="740px">
                </picture>
            </figure>
        </div>
        <div class="visual_ctas_body">
            <div class="fs-row">
                <div class="fs-cell">
                    <div class="visual_ctas_items">
                        <div class="visual_ctas_item">
                            <div class="visual_ctas_item_inner">
                                <h3 class="visual_ctas_item_title">Immerse Yourself In Campus Life</h3>
                                <div class="visual_ctas_item_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_ctas_action">

                                    <a href="#" class="visual_ctas_item_link">
                                        <span class="visual_ctas_item_link_inner">
                                            <span class="visual_ctas_item_link_label">Campus Life</span>
                                            <span class="visual_ctas_item_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 class="visual_ctas_item">
                            <div class="visual_ctas_item_inner">
                                <h3 class="visual_ctas_item_title">Engage with Fayetteville</h3>
                                <div class="visual_ctas_item_description">
                                    <p>Located in southeastern North Carolina and home to Fort Bragg, Fayetteville has the friendly feel of an All-American hometown combined with the cultural and entertainment perks of bigger cities.</p>
                                </div>
                                <div class="visual_ctas_action">

                                    <a href="#" class="visual_ctas_item_link">
                                        <span class="visual_ctas_item_link_inner">
                                            <span class="visual_ctas_item_link_label">Fayetteville</span>
                                            <span class="visual_ctas_item_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>
    </div>
</div>
<!-- END: Visual CTA Row -->
 
<!-- Visual CTA Row -->
<div class="visual_ctas">
  <div class="visual_ctas_header">
    <h2 class="visual_ctas_title">{{ title }}</h2>
  </div>
  <div class="visual_ctas_inner">
    <div class="visual_ctas_figures">
      {% for item in items %}
        <figure class="visual_ctas_figure" aria-hidden="true">
          {% include "@partial-picture" with {
            class: "visual_ctas",
            alt: "",
            image: item.image,
            loading: 'lazy',
            default: img.portraitFull.sml,
            sources: {
              '1394px': img.wide.lrg,
              '1200px': img.full.lrg,
              '740px': img.square.med,
              '500px': img.square.sml
            }
          } %}
        </figure>
      {% endfor %}
    </div>
    <div class="visual_ctas_body">
      <div class="fs-row">
        <div class="fs-cell">
          <div class="visual_ctas_items">
            {% for item in items %}
              <div class="visual_ctas_item">
                <div class="visual_ctas_item_inner">
                  <h3 class="visual_ctas_item_title">{{ item.title }}</h3>
                  <div class="visual_ctas_item_description">
                    <p>{{ item.description }}</p>
                  </div>
                    <div class="visual_ctas_action">
                    {% include '@partial-link' with {
                      class: 'visual_ctas_item',
                      title: item.link.title,
                      url: item.link.url,
                      icon: item.link.icon
                    } %}
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- END: Visual CTA Row -->

No notes defined.