JTCC Component Library

Flex Callout 

<div class="flex_callout">
    <div class="js-background flex_callout_background" data-background-options='{"source": { "1220px": "//images.fastspot.com/jtcc/1440x1080/10", "740px": "//images.fastspot.com/jtcc/1220x523/10", "500px": "//images.fastspot.com/jtcc/980x654/10", "0px": "//images.fastspot.com/jtcc/494x740/10", "980px": "//images.fastspot.com/jtcc/915x1220/10"}, "lazy": true, "alt": ""}' aria-hidden="true">
        <div class="flex_callout_background_fallback" style="background-image: url(' //images.fastspot.com/jtcc/300x129/10');"></div>
    </div>
    <div class="fs-row">
        <div class="fs-cell">
            <div class="flex_callout_inner">
                <div class="flex_callout_header">
                    <h2 class="flex_callout_title">What’s Next Up</h2>
                    <p class="flex_callout_caption">No matter your goal, Tyler is a smart choice. Earn a career-focused credential in two years or less. Or, spend two years at Tyler and transfer.</p>
                </div>
                <div class="flex_callout_content">
                    <ul class="flex_callout_links">
                        <li class="flex_callout_item">

                            <a href="#" class="flex_callout_link">
                                <span class="flex_callout_link_inner">
                                    <span class="flex_callout_link_label">Request Info</span>
                                    <span class="flex_callout_link_icon" aria-hidden="true">
                                        <span class="flex_callout_link_icon_inner">
                                            <span class="flex_callout_link_icon_space">&#xfeff;</span>

                                            <svg class="icon icon_caret_right">
                                                <use href="/images/icons.svg#caret_right" />
                                            </svg>

                                        </span>
                                    </span>
                                </span>
                            </a>
                        </li>
                        <li class="flex_callout_item">

                            <a href="#" class="flex_callout_link">
                                <span class="flex_callout_link_inner">
                                    <span class="flex_callout_link_label">Virtual Info Sessions</span>
                                    <span class="flex_callout_link_icon" aria-hidden="true">
                                        <span class="flex_callout_link_icon_inner">
                                            <span class="flex_callout_link_icon_space">&#xfeff;</span>

                                            <svg class="icon icon_caret_right">
                                                <use href="/images/icons.svg#caret_right" />
                                            </svg>

                                        </span>
                                    </span>
                                </span>
                            </a>
                        </li>
                        <li class="flex_callout_item">

                            <a href="#" class="flex_callout_link">
                                <span class="flex_callout_link_inner">
                                    <span class="flex_callout_link_label">Apply Now</span>
                                    <span class="flex_callout_link_icon" aria-hidden="true">
                                        <span class="flex_callout_link_icon_inner">
                                            <span class="flex_callout_link_icon_space">&#xfeff;</span>

                                            <svg class="icon icon_caret_right">
                                                <use href="/images/icons.svg#caret_right" />
                                            </svg>

                                        </span>
                                    </span>
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="flex_callout">
	{% render "@partial-background" with {
		class: "flex_callout",
		image: image,
		sources: {
			'0px': img("portraitClassic").sml,
			'500px': img("classic").med,
			'740px': img("ultrawide").lrg
		}
	} %}
	<div class="fs-row">
		<div class="fs-cell">
			<div class="flex_callout_inner">
				<div class="flex_callout_header">
					<h2 class="flex_callout_title">{{ title }}</h2>
					<p class="flex_callout_caption">{{ caption }}</p>
				</div>
				<div class="flex_callout_content">
					<ul class="flex_callout_links">
						{% for link in links %}
						<li class="flex_callout_item">
							{% render '@partial-link' with {
								title: link.label,
								url: link.url,
								class: "flex_callout",
								icon: "caret_right"
							} %}
						</li>
						{% endfor %}
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.