JHU Carey Centers Component Library

Card Group: Two Up Green Electric 

<!-- Card Group -->
<div class="card_group theme_site_theme theme_accent">
    <div class="card_group_background">
        <img class="card_group_background_image" src="/images/demo-lines.png">
    </div>

    <div class="card_group_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="card_group_header_inner">
                    <h2 class="card_group_title">Card Group Headline</h2>
                    <div class="card_group_description">
                        <p>Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card_group_body">
        <div class="fs-row">
            <div class="fs-cell">

                <div class="embla embla__default-controls js-carousel-embla" data-carousel-embla='{"loop":false,"slidesToScroll":1,"align":"center","breakpoints":{"(min-width: 980px)":{"active":false}}}'>
                    <div id="card-group-viewport-5" class="embla__viewport js-carousel-embla-viewport">

                        <ul class="card_group_items embla__container js-carousel-embla-container" aria-label="Card Group Headline">
                            <li class="card_group_item embla__slide">
                                <div class="card_group_item_body">
                                    <h3 class="card_group_item_title">
                                        <span class="card_group_item_title_label">Ornare Egestas</span>
                                    </h3>

                                    <figure class="card_group_item_figure">

                                        <img class="card_group_item_image" srcset="https://images.fastspot.com/generic/740x494/1 740w, https://images.fastspot.com/generic/500x334/1 500w, https://images.fastspot.com/generic/300x200/1 300w" sizes="(min-width: 1400px) 375px, (min-width: 1220px) 320px, (min-width: 980px) calc(-2.27vw + 271px), (min-width: 780px) 657px, (min-width: 360px) calc(94.5vw - 77px), 244px" src="https://images.fastspot.com/generic/300x200/1" alt="" loading="lazy" width="300" height="200">
                                    </figure>
                                    <div class="card_group_item_description">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est sed ex pretium fringilla. Vivamus ac turpis quis eros consectetur ornare.</p>
                                    </div>
                                </div>
                            </li>
                            <li class="card_group_item embla__slide">
                                <div class="card_group_item_body">
                                    <h3 class="card_group_item_title">
                                        <span class="card_group_item_title_label">Ipsum Dolor Sit Amet</span>
                                    </h3>

                                    <figure class="card_group_item_figure">

                                        <img class="card_group_item_image" srcset="https://images.fastspot.com/generic/740x494/2 740w, https://images.fastspot.com/generic/500x334/2 500w, https://images.fastspot.com/generic/300x200/2 300w" sizes="(min-width: 1400px) 375px, (min-width: 1220px) 320px, (min-width: 980px) calc(-2.27vw + 271px), (min-width: 780px) 657px, (min-width: 360px) calc(94.5vw - 77px), 244px" src="https://images.fastspot.com/generic/300x200/2" alt="" loading="lazy" width="300" height="200">
                                    </figure>
                                    <div class="card_group_item_description">
                                        <p>Donec ullamcorper nulla non metus auct. Praesent eget est sed ex pretium fringilla. <a href="#">Vivamus ac turpis</a> porta sem malesuada magna mollis euismod.</p>
                                    </div>
                                </div>
                            </li>
                        </ul>

                    </div>
                    <div class="card_group_controls embla__controls" aria-controls="card-group-viewport-5">
                        <div class="embla__dots js-carousel-embla-dots"></div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
<!-- END: Card Group -->
 
{#
	{% include '@component-card-group' with {
		title: 'Title',
		description: 'Description',
		items: [
			{
				image: '1',
				title: 'Item Title',
				description: 'Item Description'
			}
		]
	} %}
#}

{% set carousel_json = {
	loop: false,
	slidesToScroll: 1,
	align: 'center',
	breakpoints: {
		'(min-width: 980px)': { active: false }
	}
}|json_encode %}

{% set uuid_viewport = uniqid("card-group-viewport") %}

<!-- Card Group -->
<div class="card_group theme_site_theme theme_accent">
	{% if background %}
		<div class="card_group_background">
			<img class="card_group_background_image" src="{{ background }}">
		</div>
	{% endif %}

	{% if title or description %}
		<div class="card_group_header">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="card_group_header_inner">
						{% if title %}
							<h2 class="card_group_title">{{ title }}</h2>
						{% endif %}
						{% if description %}
							<div class="card_group_description">
								<p>{{ description }}</p>
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	{% endif %}
	<div class="card_group_body">
		<div class="fs-row">
			<div class="fs-cell">







				<div class="embla embla__default-controls js-carousel-embla" data-carousel-embla='{{ carousel_json }}'>
					<div
						id="{{ uuid_viewport }}"
						class="embla__viewport js-carousel-embla-viewport"
					>

						<ul class="card_group_items embla__container js-carousel-embla-container" {% if title %} aria-label="{{ title }}" {% endif %}>
							{% for item in items %}
								<li class="card_group_item embla__slide">
									<div class="card_group_item_body">
										{% if item.title %}
											<h3 class="card_group_item_title">
												<span class="card_group_item_title_label">{{ item.title }}</span>
											</h3>
										{% endif %}

										<figure class="card_group_item_figure">
											{% include '@partial-image' with {
												class: 'card_group_item',
												alt: item.alt,
												image: item.image,
												loading: 'lazy',
												crop: 'classic',
												max: 'sml',
												sizes: [
													'(min-width: 1400px) 375px',
													'(min-width: 1220px) 320px',
													'(min-width: 980px) calc(-2.27vw + 271px)',
													'(min-width: 780px) 657px',
													'(min-width: 360px) calc(94.5vw - 77px)',
													'244px',
												]
											} %}
										</figure>
										<div class="card_group_item_description">
											<p>{{ item.description }}</p>
										</div>
									</div>
								</li>
							{% endfor %}
						</ul>

					</div>
					<div class="card_group_controls embla__controls" aria-controls="{{ uuid_viewport }}">
						<div class="embla__dots js-carousel-embla-dots"></div>
					</div>

				</div>







			</div>
		</div>
	</div>
</div>
<!-- END: Card Group -->

No notes defined.