St. George's University Component Library

Cta Media Content: Two Columns 

<div class="cta_media">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="cta_media_inner">
                <figure class="cta_media_figure">

                    <img class="cta_media_image" srcset="https://images.fastspot.com/generic/980x552/2 980w, https://images.fastspot.com/generic/740x416/2 740w, https://images.fastspot.com/generic/500x282/2 500w, https://images.fastspot.com/generic/300x169/2 300w" src="https://images.fastspot.com/generic/300x169/2" alt="" loading="lazy" width="300" height="169">
                    <a class="cta_media_video_trigger js-video-appender" href="https://www.youtube.com/watch?v=RmS2O2kpfVM">
                        <span class="cta_media_video_play">
                            <span class="cta_media_video_play_icon">
                                <svg class="icon icon_play">
                                    <use href="/images/icons.svg#play" />
                                </svg>
                            </span>
                            <span class="cta_media_video_play_label">Watch Video</span>
                        </span>
                    </a>
                </figure>
                <div class="cta_media_wrapper">
                    <h2 class="cta_media_title">Explore Our Campus Map</h2>
                    <span class="cta_media_description">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</span>

                    <a href="#" class="cta_media_link">
                        <span class="cta_media_link_inner">
                            <span class="cta_media_link_label">View the Map</span><span class="icon_nowrap cta_media_link_icon" aria-hidden="true">&#xfeff;
                                <svg class="icon icon_caret_right">
                                    <use href="/images/icons.svg#caret_right" />
                                </svg>
                            </span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="cta_media">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="cta_media_inner">
				<figure class="cta_media_figure">
					{% include '@partial-image' with {
						class: 'cta_media',
						alt: '',
						image: image,
						loading: 'lazy',
						sources: [
							img.wide.med,
							img.wide.sml,
							img.wide.xsml,
							img.wide.xxsml
						]
					} %}
					{% if video %}
					<a class="cta_media_video_trigger js-video-appender" href="{{ video }}">
						<span class="cta_media_video_play">
							<span class="cta_media_video_play_icon">{{ icon("play") }}</span>
							<span class="cta_media_video_play_label">Watch Video</span>
						</span>
					</a>
					{% endif %}
				</figure>
				<div class="cta_media_wrapper">
					<h2 class="cta_media_title">{{ title }}</h2>
					{% if description %}
						<span class="cta_media_description">{{ description }}</span>
					{% endif %}
					{% if link %}
						{% include '@partial-link' with {
							class: 'cta_media',
							title: link.label,
							url: link.url,
							icon: link.icon,
							nowrap: true
						} %}
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.