JTCC Component Library

Story: Default 

<div class="story theme_blush">
    <figure class="story_figure has_classic_image">
        <a class="story_figure_link" href="" aria-label="Read more about Careers that Matter" tabindex="-1">
            <span class="lazy_image_wrapper story_image_wrapper">
                <img class="js-lazy js-lazyload story_image" data-sizes="auto" src="/images/placeholder.png" data-src="https://images.fastspot.com/jtcc/740x494/6" data-srcset="//images.fastspot.com/jtcc/740x494/6 740w, //images.fastspot.com/jtcc/980x654/6 980w" alt="">
            </span>
            <noscript>
                <img class="story_image" src="https://images.fastspot.com/jtcc/980x654/6" srcset="//images.fastspot.com/jtcc/980x654/6 980w, //images.fastspot.com/jtcc/740x494/6 740w" sizes="100vw" alt="">
            </noscript>
        </a>
    </figure>
    <div class="story_wrapper">
        <h2 class="story_title">

            <a href="#" class="story_title_link">
                <span class="story_title_link_inner">
                    <span class="story_title_link_label">Careers that Matter</span>
                </span>
            </a>
        </h2>
        <div class="story_description">
            <p>While she helps fill the marketplace demand for skilled nurses, Anissa Ellis is living out her dream: a career that matters. After completing clinical rotations at two local hospitals and earning her associate degree in nursing at Tyler, she’s now a branch director with a home health company, helping nurses to make the biggest impact and difference possible in lives across the area.</p>
        </div>

        <a href="#" class="story_discovery_link">
            <span class="story_discovery_link_inner">
                <span class="story_discovery_link_label">Read Her Story</span>
                <span class="story_discovery_link_icon" aria-hidden="true">
                    <span class="story_discovery_link_icon_inner">
                        <span class="story_discovery_link_icon_space">&#xfeff;</span>

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

                    </span>
                </span>
            </span>
        </a>
    </div>
</div>
 
<div class="story theme_{{ item.theme }}{% if item.layout %} layout_{{ item.layout }}{% endif %}">
	<figure class="story_figure{% if item.classicImage %} has_classic_image{% elseif item.wideImage %} has_wide_image{% endif %}">
		<a class="story_figure_link" href="{{ item.url }}" aria-label="Read more about {{ item.title }}" tabindex="-1">
			{% if item.classicImage %}
			{% render "@partial-image" with {
				class: "story",
				alt: "",
				image: item.classicImage,
				sources: [
					img("classic").med,
					img("classic").sml
				]
			} %}
			{% elseif item.wideImage %}
			{% render "@partial-image" with {
				class: "story",
				alt: "",
				image: item.wideImage,
				sources: [
					img("classic").med,
					img("classic").sml
				]
			} %}
			{% endif %}
		</a>
	</figure>
	<div class="story_wrapper">
		{% if item.label %}
		<div class="story_label">{{ item.label }}</div>
		{% endif %}
		<h2 class="story_title">
			{% render "@partial-link" with {
				class: "story_title",
				title: item.title,
				url: item.url
			} %}
		</h2>
		<div class="story_description">
			<p>{{ item.description }}</p>
		</div>
		{% render '@partial-link' with {
			title: item.link,
			url: "#",
			class: "story_discovery",
			icon: "caret_right"
		} %}
	</div>
</div>

No notes defined.