Heinz History Center Component Library

Card Group Membership Item 

<div class="card_membership">
    <div class="card_membership_grid">
        <div class="card_membership_grid_item is_media">
            <figure class="card_membership_figure">

                <img class="card_membership_image" srcset="https://images.fastspot.com/generic/980x654/ 980w, https://images.fastspot.com/generic/740x494/ 740w, https://images.fastspot.com/generic/500x334/ 500w, https://images.fastspot.com/generic/300x200/ 300w" sizes="(min-width: 780px) 691px, calc(96.09vw - 39px)" src="https://images.fastspot.com/generic/300x200/" alt="" loading="lazy" width="300" height="200">
            </figure>
        </div>

        <div class="card_membership_grid_item is_content">
            <div class="card_membership_content">
                <h2 class="card_membership_title">

                </h2>

                <div class="card_membership_price">
                    <strong>$</strong> per year
                </div>

                <div class="card_membership_description">

                </div>

                <div class="card_membership_links_wrap">
                    <div class="card_membership_links">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{% set heading_level = title ? "h3" : "h2" %}

<div class="card_membership">
	<div class="card_membership_grid">
		<div class="card_membership_grid_item is_media">
			<figure class="card_membership_figure">
				{% include '@partial-image' with {
					class: 'card_membership',
					alt: '',
					image: item.image,
					loading: 'lazy',
					sources: [
						img.classic.med,
						img.classic.sml,
						img.classic.xsml,
						img.classic.xxsml
					],
					sizes: [
						"(min-width: 780px) 691px",
						"calc(96.09vw - 39px)"
					]
				} %}
			</figure>
		</div>

		<div class="card_membership_grid_item is_content">
			<div class="card_membership_content">
				<{{ heading_level }} class="card_membership_title">
					{{ item.title }}
				</{{ heading_level }}>

				<div class="card_membership_price">
					<strong>${{ item.price }}</strong> per year
				</div>

				<div class="card_membership_description">
					{{ item.description }}
				</div>

				<div class="card_membership_links_wrap">
					<div class="card_membership_links">
						{% for link in item.links %}
							<a class="card_membership_link" href="{{ link.url }}">
								{{ link.label }}
							</a>
						{% endfor %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.