JHU Carey Centers Component Library

Resource List Item 

<div class="resource_list_item_wrapper">
    <div class="resource_list_item_header">
        <h2 class="resource_list_item_title">

            <a href="#" class="resource_list_item_title_link">
                <span class="resource_list_item_title_link_inner">
                    <span class="resource_list_item_title_link_label"></span>
                </span>
            </a>
        </h2>
        <div class="resource_list_item_pretitle"></div>
    </div>
    <div class="resource_list_item_link_wrapper">

        <a href="#" class="button button_shadow resource_list_item_link theme_default">
            <span class="button_inner resource_list_item_link_inner">
                <span class="button_label resource_list_item_link_label"></span>
            </span>
        </a>
    </div>
</div>
 
{% if item.image %}
	<figure class="resource_list_item_figure">
		<a class="resource_list_item_figure_link" href="{{ item.url }}" aria-label="Read more about {{ item.title }}" tabindex="-1">
			{% include '@partial-image' with {
				class: 'resource_list_item',
				alt: item.alt,
				image: item.image,
				loading: 'lazy',
				crop: 'full',
				max: 'med',
				sizes: [
					'(min-width: 1400px) 430px',
					'(min-width: 1220px) 375px',
					'(min-width: 980px) 300px',
					'(min-width: 780px) 691px',
					'(min-width: 380px) calc(96.05vw - 39px)',
					'calc(31.67vw + 193px)',
				]
			} %}

			<span class="resource_list_item_figure_icon">{{ icon(item.icon) }}</span>
		</a>
	</figure>
{% endif %}
<div class="resource_list_item_wrapper">
	<div class="resource_list_item_header">
		<h2 class="resource_list_item_title">
			{% include '@partial-link' with {
				class: 'resource_list_item_title',
				title: item.title,
				url: item.url
			} %}
		</h2>
		<div class="resource_list_item_pretitle">{{ item.category }}</div>
	</div>
	{% if item.description %}
		<p class="resource_list_item_description">{{ item.description }}</p>
	{% endif %}
	<div class="resource_list_item_link_wrapper">
		{% include "@partial-link-button" with {
			class: 'resource_list_item',
			title: item.link_text,
			url: item.url,
		} %}
	</div>
</div>

No notes defined.