JTCC Component Library

Story: Standalone 

<div class="story theme_turquoise layout_standalone">
    <figure class="story_figure has_wide_image">
        <a class="story_figure_link" href="" aria-label="Read more about Getting Ready for a Successful Spring Semester" 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/12" data-srcset="//images.fastspot.com/jtcc/740x494/12 740w, //images.fastspot.com/jtcc/980x654/12 980w" alt="">
            </span>
            <noscript>
                <img class="story_image" src="https://images.fastspot.com/jtcc/980x654/12" srcset="//images.fastspot.com/jtcc/980x654/12 980w, //images.fastspot.com/jtcc/740x494/12 740w" sizes="100vw" alt="">
            </noscript>
        </a>
    </figure>
    <div class="story_wrapper">
        <div class="story_label">Featured News</div>
        <h2 class="story_title">

            <a href="#" class="story_title_link">
                <span class="story_title_link_inner">
                    <span class="story_title_link_label">Getting Ready for a Successful Spring Semester</span>
                </span>
            </a>
        </h2>
        <div class="story_description">
            <p>It’s a new year, and a new semester is about to begin. While this is an exciting time, it can also be a hectic time for students. Here are a few tips to help you get ready for spring.</p>
        </div>

        <a href="#" class="story_discovery_link">
            <span class="story_discovery_link_inner">
                <span class="story_discovery_link_label">Read The 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.