Methodist University Component Library

Random 

<div class="random">
    <div class="random_header">
        <div class="fs-row">
            <div class="fs-cell fs-lg-8 fs-lg-justify-center">
                <div class="random_header_inner">
                    <h2 class="random_title">Get to Know Methodist</h2>
                    <div class="random_description">
                        <p>The beauty of our campus and friendliness of our community will win you over.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="random_body">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="random_items">
                    <div class="random_item">
                        <!-- 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 -->
                    </div>
                    <div class="random_item">

                        <!-- Random Story Row -->
                        <div class="random_story">
                            <div class="random_story_inner">
                                <figure class="random_story_figure" aria-hidden="true">

                                    <svg class="icon icon_globe">
                                        <use href="/images/icons.svg#globe" />
                                    </svg>

                                </figure>
                                <div class="random_story_wrapper">
                                    <div class="random_story_description">
                                        <p>Whether it’s on campus or around the country, we are proud of the over 12,000 Methodist alumni seeking to make the world a better place.</p>
                                    </div>
                                    <div class="random_story_caption">
                                        <p>We foster a lifelong connection between the university and its alumni, no matter where their lives take them.</p>
                                    </div>
                                    <div class="random_story_action">

                                        <a href="#" class="random_story_link">
                                            <span class="random_story_link_inner">
                                                <span class="random_story_link_label">Explore Stories</span>
                                                <span class="random_story_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>
                        <!-- END: Random Story -->
                    </div>
                    <div class="random_item">

                        <!-- Card Group -->
                        <div class="random_facts">
                            <div class="random_facts_description">
                                <p>The Methodist University is a place to find your adult self, do what you love, prepare for a life filled with meaning and purpose, and empower others to do the same.</p>
                            </div>
                            <ul class="random_facts_items">
                                <li class="random_facts_item">
                                    <div class="random_facts_item_figure">
                                        <span class="random_facts_item_icon">

                                            <svg class="icon icon_friends">
                                                <use href="/images/icons.svg#friends" />
                                            </svg>

                                        </span>
                                        <h3 class="random_facts_item_stat">12:1</h3>
                                    </div>
                                    <div class="random_facts_item_description">
                                        <p>student-to-faculty ratio</p>
                                    </div>
                                </li>
                                <li class="random_facts_item">
                                    <div class="random_facts_item_figure">
                                        <span class="random_facts_item_icon">

                                            <svg class="icon icon_pie">
                                                <use href="/images/icons.svg#pie" />
                                            </svg>

                                        </span>
                                        <h3 class="random_facts_item_stat">97%</h3>
                                    </div>
                                    <div class="random_facts_item_description">
                                        <p>of classes have fewer than 30 students</p>
                                    </div>
                                </li>
                                <li class="random_facts_item">
                                    <div class="random_facts_item_figure">
                                        <span class="random_facts_item_icon">

                                            <svg class="icon icon_globe">
                                                <use href="/images/icons.svg#globe" />
                                            </svg>

                                        </span>
                                        <h3 class="random_facts_item_stat">190+</h3>
                                    </div>
                                    <div class="random_facts_item_description">
                                        <p>study abroad opportunities each year</p>
                                    </div>
                                </li>
                            </ul>
                            <div class="random_facts_action">

                                <a href="#" class="random_facts_link">
                                    <span class="random_facts_link_inner">
                                        <span class="random_facts_link_label">Explore Stats & Facts</span>
                                        <span class="random_facts_link_icon" aria-hidden="true">

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

                                        </span>
                                    </span>
                                </a>
                            </div>
                        </div>
                        <!-- END: Card Group -->
                    </div>
                    <div class="random_item">
                        <!-- 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 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="random">
  <div class="random_header">
    <div class="fs-row">
      <div class="fs-cell {{ cell }}">
        <div class="random_header_inner">
          {% if title %}
            <h2 class="random_title">{{ title }}</h2>
          {% endif %}
          {% if description %}
            <div class="random_description">
              <p>{{ description }}</p>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  <div class="random_body">
    <div class="fs-row">
      <div class="fs-cell">
        <div class="random_items">
          <div class="random_item">
            {% render '@component-random-visual-cta' %}
          </div>
          <div class="random_item">
            {% render '@component-random-story' %}
          </div>
          <div class="random_item">
            {% render '@component-random-facts' %}
          </div>
          <div class="random_item">
            {% render '@component-random-visual-cta' %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

No notes defined.