DRBU Component Library

Highlight Card Group: Dark 

<section id="highlight-card-group-3" class="highlight_card_group theme_dark card_count_4" aria-labelledby="highlight-card-group-3_title">
    <header class="highlight_card_group_header">
        <div class="fs-row fs-lg-justify-center">
            <div class="fs-cell fs-xl-10">
                <div class="highlight_card_group_inner">
                    <h2 id="highlight-card-group-3_title" class="highlight_card_group_title">
                        What Makes DRBU Unique?
                    </h2>
                </div>
            </div>
        </div>
    </header>

    <div class="highlight_card_group_body">
        <div class="fs-row">
            <div class="fs-cell">
                <ul class="highlight_card_group_items">
                    <div class="highlight_card_group_item">
                        <figure class="highlight_card_group_item_figure">
                            <img class="highlight_card_group_item_image" src="../../placeholders/highlight-card-group/images/image-dark-1.png" alt="some alt text" />
                        </figure>

                        <div class="highlight_card_group_item_content">
                            <h3 class="highlight_card_group_item_title">
                                Discussion-based Classes
                            </h3>

                            <div class="highlight_card_group_item_desc">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
                            </div>
                        </div>
                    </div>
                    <div class="highlight_card_group_item">
                        <figure class="highlight_card_group_item_figure">
                            <img class="highlight_card_group_item_image" src="../../placeholders/highlight-card-group/images/image-dark-2.png" alt="some alt text" />
                        </figure>

                        <div class="highlight_card_group_item_content">
                            <h3 class="highlight_card_group_item_title">
                                Great Books Curriculum
                            </h3>

                            <div class="highlight_card_group_item_desc">
                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
                            </div>
                        </div>
                    </div>
                    <div class="highlight_card_group_item">
                        <figure class="highlight_card_group_item_figure">
                            <img class="highlight_card_group_item_image" src="../../placeholders/highlight-card-group/images/image-dark-3.png" alt="some alt text" />
                        </figure>

                        <div class="highlight_card_group_item_content">
                            <h3 class="highlight_card_group_item_title">
                                Tight-knight Community
                            </h3>

                            <div class="highlight_card_group_item_desc">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
                            </div>
                        </div>
                    </div>
                    <div class="highlight_card_group_item">
                        <figure class="highlight_card_group_item_figure">
                            <img class="highlight_card_group_item_image" src="../../placeholders/highlight-card-group/images/image-dark-4.png" alt="some alt text" />
                        </figure>

                        <div class="highlight_card_group_item_content">
                            <h3 class="highlight_card_group_item_title">
                                Contemplative Exercises
                            </h3>

                            <div class="highlight_card_group_item_desc">
                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                            </div>
                        </div>
                    </div>
                </ul>
            </div>
        </div>
    </div>
</section>
 
{% set id = uniqid("highlight-card-group") %}

{% if items|length % 3 == 0 %}
	{% set card_count = 3 %}
{% elseif items|length < 3 %}
	{% set card_count = 2 %}
{% else %}
	{% set card_count = 4 %}
{% endif %}

<section
	id="{{ id }}"
	class="highlight_card_group theme_{{ theme }} card_count_{{ card_count }}"
	aria-labelledby="{{ id }}_title"
>
	<header class="highlight_card_group_header">
		<div class="fs-row fs-lg-justify-center">
			<div class="fs-cell fs-xl-10">
				<div class="highlight_card_group_inner">
					<h2 id="{{ id }}_title" class="highlight_card_group_title">
						{{ title }}
					</h2>
				</div>
			</div>
		</div>
	</header>

	<div class="highlight_card_group_body">
		<div class="fs-row">
			<div class="fs-cell">
				<ul class="highlight_card_group_items">
					{% for item in items %}
						<div class="highlight_card_group_item">
							<figure class="highlight_card_group_item_figure">
								<img
									class="highlight_card_group_item_image"
									src="{{ item.image|path }}"
									alt="{{ item.image_alt_text }}"
								/>
							</figure>

							<div class="highlight_card_group_item_content">
								<h3 class="highlight_card_group_item_title">
									{{ item.title }}
								</h3>

								{% if item.description %}
									<div class="highlight_card_group_item_desc">
										<p>{{ item.description }}</p>
									</div>
								{% endif %}
							</div>
						</div>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
</section>

No notes defined.