Office of Diversity and Inclusion Component Library

Support Finder List Item 

<div class="support_finder_list_item">
    <a href="" class="support_finder_list_item_link">
        <div class="support_finder_list_item_figure">

            <img class="support_finder_list_item_image" srcset="https://images.fastspot.com/jhu-odi/740x494/4 740w, https://images.fastspot.com/jhu-odi/500x334/4 500w, https://images.fastspot.com/jhu-odi/300x200/4 300w" sizes="(min-width: 980px) 290px, 90vw" src="https://images.fastspot.com/jhu-odi/300x200/4" alt="" loading="lazy" width="300" height="200">
        </div>

        <div class="support_finder_list_item_content">
            <div class="support_finder_list_item_cat">

            </div>

            <h3 class="support_finder_list_item_title">
                History of Inclusion at Hopkins
            </h3>

            <div class="support_finder_list_item_desc">
                Sign up for 4 workshops (1.5 hours each) and become a better ally for the lesbian, gay, bisexual, transgender, and queer (LGBTQ+) community.
            </div>

            <div class="support_finder_list_item_link_wrap">
                <span class="support_finder_list_item_link_wrap_icon">

                    <svg class="icon icon_external">
                        <use href="/images/icons.svg#external" />
                    </svg>

                </span>

                <span class="support_finder_list_item_link_wrap_label">
                    Sponsor Label
                </span>
            </div>
        </div>
    </a>
</div>
 
{#
	{% include '@partial-support-finder-list-item' with {
		item: {
			image: 6,
			category: 'Category',
			title: 'Title',
			url: '#',
			date: '2019-01-01 17:00:00',
			author: 'Author',
			description: 'Description',
			sponsored_label: "Sponsor Label"
		}
	} %}
#}

<div class="support_finder_list_item">
	<a href="{{ item.url }}" class="support_finder_list_item_link">
		<div class="support_finder_list_item_figure">
			{% include '@partial-image' with {
				class: 'support_finder_list_item',
				alt: '',
				image: item.image,
				loading: 'lazy',
				sources: [
					img.classic.sml,
					img.classic.xsml,
					img.classic.xxsml
				],
				sizes: [
					'(min-width: 980px) 290px',
					'90vw'
				]
			} %}
			{% if item.fw_date.month and item.fw_date.day  %}
				<div class="support_finder_list_item_date">
					<span class="support_finder_list_item_date_month">{{ item.fw_date.month }}</span>
					<span class="support_finder_list_item_date_day">{{ item.fw_date.day }}</span>
				</div>
			{% endif %}
		</div>

		<div class="support_finder_list_item_content">
			<div class="support_finder_list_item_cat">
				{{ item.fw_type|join(' ') }}
			</div>

			<h3 class="support_finder_list_item_title">
				{{ item.title }}
			</h3>

			{% if item.fw_type == 'Events' %}
			<div class="support_finder_list_item_time">
				{{ item.fw_time }}
			</div>
			{% endif %}
			
			<div class="support_finder_list_item_desc">
				{{ item.description }}
			</div>

			{% if item.sponsored_label %}
				<div class="support_finder_list_item_link_wrap">
					<span class="support_finder_list_item_link_wrap_icon">
						{{ icon("external") }}
					</span>

					<span class="support_finder_list_item_link_wrap_label">
						{{ item.sponsored_label }}
					</span>
				</div>
			{% else %}
				<div class="support_finder_list_item_link_wrap">
					<span class="support_finder_list_item_link_wrap_icon">
						{{ icon("arrow_right") }}
					</span>
				</div>
			{% endif %}
		</div>
	</a>
</div>

No notes defined.