Rawlings Conservatory Component Library

Card Group 

<div class="c-card-group">
    <div class="o-container">
        <div class="c-card-group__head">
            <h2 class="c-card-group__title t-heading-h4">
                What's Happening?
            </h2>
        </div>

        <div class="c-card-group__content">
            <div class="c-card-group__cols">
                <div class="c-card-group__col">
                    <div class="p-card-group-item">
                        <figure class="p-card-group-item__fig">
                            <img src="https://source.unsplash.com/pDGNBK9A0sk/800x1075" alt="Flower">
                        </figure>

                        <div class="p-card-group-item__title-wrap">
                            <h3 class="p-card-group-item__title t-heading-h5">
                                <a href="#" class="p-card-group-item__title-link">
                                    Corpse Flower
                                </a>
                            </h3>
                        </div>

                        <div class="p-card-group-item__desc">
                            <div class="rich-text">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vulputate imperdiet eros. Mauris quis iaculis est.</p>
                            </div>
                        </div>

                        <div class="p-card-group-item__foot">
                            <span class="t-caption-text">
                                May 2020 - Sept 2020
                            </span>
                        </div>
                    </div>
                </div>
                <div class="c-card-group__col">
                    <div class="p-card-group-item">
                        <figure class="p-card-group-item__fig">
                            <img src="https://source.unsplash.com/pDGNBK9A0sk/800x1075" alt="Flower">
                        </figure>

                        <div class="p-card-group-item__title-wrap">
                            <h3 class="p-card-group-item__title t-heading-h5">
                                <a href="#" class="p-card-group-item__title-link">
                                    Another Flower
                                </a>
                            </h3>
                        </div>

                        <div class="p-card-group-item__desc">
                            <div class="rich-text">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vulputate imperdiet eros. Mauris quis iaculis est.</p>
                            </div>
                        </div>

                        <div class="p-card-group-item__foot">
                            <span class="t-caption-text">
                                May 2020 - Sept 2020
                            </span>
                        </div>
                    </div>
                </div>
                <div class="c-card-group__col">
                    <div class="p-card-group-item">
                        <figure class="p-card-group-item__fig">
                            <img src="https://source.unsplash.com/pDGNBK9A0sk/800x1075" alt="Flower">
                        </figure>

                        <div class="p-card-group-item__title-wrap">
                            <h3 class="p-card-group-item__title t-heading-h5">
                                <a href="#" class="p-card-group-item__title-link">
                                    Final Flower
                                </a>
                            </h3>
                        </div>

                        <div class="p-card-group-item__desc">
                            <div class="rich-text">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vulputate imperdiet eros. Mauris quis iaculis est.</p>
                            </div>
                        </div>

                        <div class="p-card-group-item__foot">
                            <span class="t-caption-text">
                                May 2020 - Sept 2020
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="c-card-group__foot">
            <a href="#" class="c-card-group__cta t-heading-h5">
                See all events +
            </a>
        </div>
    </div>
</div>
 
<div class="c-card-group">
	<div class="o-container">
		<div class="c-card-group__head">
			<h2 class="c-card-group__title t-heading-h4">
				{{ title }}
			</h2>
		</div>

		<div class="c-card-group__content">
			<div class="c-card-group__cols">
				{% for item in items %}
					<div class="c-card-group__col">
						{% render "@partial-card-group-item" with item %}
					</div>
				{% endfor %}
			</div>
		</div>

		<div class="c-card-group__foot">
			<a href="#" class="c-card-group__cta t-heading-h5">
				See all events +
			</a>
		</div>
	</div>
</div>

No notes defined.