Card Group: Six Up

Ready

HTML
View
Info
Notes


        
        <!-- Card Group -->
<div class="card_group component_has_radius">
    <div class="card_group_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="card_group_header_inner">
                    <h2 class="card_group_title">We don't aim to be a good school, but a great one.</h2>

                    <div class="card_group_description">
                        <p>A description for the card section. Hilbert strives to cultivate a community that respects and appreciates the dignity and uniqueness of all.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card_group_body">
        <div class="fs-row">
            <div class="fs-cell">
                <ul class="card_group_items">
                    <li class="card_group_item">
                        <figure class="card_group_item_figure">

                            <img class="card_group_item_image" srcset="https://images.fastspot.com/hilbert/300x200/1 300w, https://images.fastspot.com/hilbert/500x334/1 500w, https://images.fastspot.com/hilbert/740x494/1 740w" src="https://images.fastspot.com/hilbert/740x494/1" alt="" loading="lazy" width="740" height="494">
                        </figure>

                        <div class="card_group_item_body">
                            <h3 class="card_group_item_title">
                                <span class="card_group_item_title_label">Ornare Egestas</span>
                            </h3>

                            <div class="card_group_item_description">
                                <p>Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit</a>. Praesent eget est sed ex pretium fringilla. Vivamus ac turpis quis eros consectetur ornare.</p>
                            </div>

                            <div class="card_group_item_links_wrap">
                                <div class="card_group_item_links">
                                    <div class="card_group_item_link_item">

                                        <a href="#" class="underline_link theme_gold">
                                            <span class="underline_link_inner">
                                                <span class="underline_link_label">Life at Hilert</span><span class="icon_nowrap underline_link_icon" aria-hidden="true">&#xfeff;<svg class="icon icon_arrow_right">
                                                        <use href="/images/icons.svg#arrow_right" />
                                                    </svg></span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="card_group_item">
                        <figure class="card_group_item_figure">

                            <img class="card_group_item_image" srcset="https://images.fastspot.com/hilbert/300x200/2 300w, https://images.fastspot.com/hilbert/500x334/2 500w, https://images.fastspot.com/hilbert/740x494/2 740w" src="https://images.fastspot.com/hilbert/740x494/2" alt="" loading="lazy" width="740" height="494">
                        </figure>

                        <div class="card_group_item_body">
                            <h3 class="card_group_item_title">
                                <span class="card_group_item_title_label">Amet dolore officia</span>
                            </h3>

                            <div class="card_group_item_description">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est sed ex pretium fringilla. <a href="#">Vivamus ac turpis</a> quis eros consectetur ornare.</p>
                            </div>

                            <div class="card_group_item_links_wrap">
                                <div class="card_group_item_links">
                                    <div class="card_group_item_link_item">

                                        <a href="#" class="underline_link theme_gold">
                                            <span class="underline_link_inner">
                                                <span class="underline_link_label">Life at Hilert</span><span class="icon_nowrap underline_link_icon" aria-hidden="true">&#xfeff;<svg class="icon icon_arrow_right">
                                                        <use href="/images/icons.svg#arrow_right" />
                                                    </svg></span>
                                            </span>
                                        </a>
                                    </div>
                                    <div class="card_group_item_link_item">

                                        <a href="#" class="underline_link theme_gold">
                                            <span class="underline_link_inner">
                                                <span class="underline_link_label">Another Link</span><span class="icon_nowrap underline_link_icon" aria-hidden="true">&#xfeff;<svg class="icon icon_arrow_right">
                                                        <use href="/images/icons.svg#arrow_right" />
                                                    </svg></span>
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="card_group_item">
                        <figure class="card_group_item_figure">

                            <img class="card_group_item_image" srcset="https://images.fastspot.com/hilbert/300x200/3 300w, https://images.fastspot.com/hilbert/500x334/3 500w, https://images.fastspot.com/hilbert/740x494/3 740w" src="https://images.fastspot.com/hilbert/740x494/3" alt="" loading="lazy" width="740" height="494">
                        </figure>

                        <div class="card_group_item_body">
                            <h3 class="card_group_item_title">
                                <span class="card_group_item_title_label">Ornare Egestas</span>
                            </h3>

                            <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">
                        <figure class="card_group_item_figure">

                            <img class="card_group_item_image" srcset="https://images.fastspot.com/hilbert/300x200/4 300w, https://images.fastspot.com/hilbert/500x334/4 500w, https://images.fastspot.com/hilbert/740x494/4 740w" src="https://images.fastspot.com/hilbert/740x494/4" alt="" loading="lazy" width="740" height="494">
                        </figure>

                        <div class="card_group_item_body">
                            <h3 class="card_group_item_title">
                                <span class="card_group_item_title_label">Amet dolore officia</span>
                            </h3>

                            <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">
                        <figure class="card_group_item_figure">

                            <img class="card_group_item_image" srcset="https://images.fastspot.com/hilbert/300x200/1 300w, https://images.fastspot.com/hilbert/500x334/1 500w, https://images.fastspot.com/hilbert/740x494/1 740w" src="https://images.fastspot.com/hilbert/740x494/1" alt="" loading="lazy" width="740" height="494">
                        </figure>

                        <div class="card_group_item_body">
                            <h3 class="card_group_item_title">
                                <span class="card_group_item_title_label">Ornare Egestas</span>
                            </h3>

                            <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">
                        <figure class="card_group_item_figure">

                            <img class="card_group_item_image" srcset="https://images.fastspot.com/hilbert/300x200/2 300w, https://images.fastspot.com/hilbert/500x334/2 500w, https://images.fastspot.com/hilbert/740x494/2 740w" src="https://images.fastspot.com/hilbert/740x494/2" alt="" loading="lazy" width="740" height="494">
                        </figure>

                        <div class="card_group_item_body">
                            <h3 class="card_group_item_title">
                                <span class="card_group_item_title_label">Amet dolore officia</span>
                            </h3>

                            <div class="card_group_item_description">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est sed ex pretium fringilla. <a href="#">Vivamus ac turpis</a> quis eros consectetur ornare.</p>
                            </div>

                        </div>
                    </li>
                </ul>
            </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'
			}
		]
	} %}
#}

<!-- Card Group -->
<div class="card_group component_has_radius">
	{% if title or description %}
		<div class="card_group_header">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="card_group_header_inner">
						<h2 class="card_group_title">{{ title }}</h2>

						{% 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">
				<ul class="card_group_items">
					{% for item in items %}
						<li class="card_group_item">
							<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'
								} %}
							</figure>

							<div class="card_group_item_body">
								<h3 class="card_group_item_title">
									<span class="card_group_item_title_label">{{ item.title }}</span>
								</h3>

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

								{% if item.links|length %}
									<div class="card_group_item_links_wrap">
										<div class="card_group_item_links">
											{% for link in item.links %}
												<div class="card_group_item_link_item">
													{% include '@partial-link' with {
														title: link.title,
														url: link.url,
														target: '',
														class: 'underline',
														theme: 'gold',
														js: false,
														icon: 'arrow_right',
														aria: '',
														nowrap: true
													} %}
												</div>
											{% endfor %}
										</div>
									</div>
								{% endif %}
							</div>
						</li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</div>
<!-- END: Card Group -->

Handle: @component-card-group--six-up
Variants (6): Six Up , Five Up , Four Up , Three Up , Two Up , One Up
Preview:
- With layout
- Component only
Filesystem Path: src/twig/components/card-group/card-group.twig
References (3): @component-card-group, @partial-image, @partial-link
Referenced by (13): @component-card-group--five-up, @component-card-group--four-up, @component-card-group--three-up, @component-card-group--two-up, @component-card-group--one-up, @template-general-content, @template-general-content--dark_blue, @template-general-content--light_blue, @template-general-content--purple, @template-general-content--alert, @template-general-content--landing, @template-general-content--video, @template-general-content--bg

No notes defined.