DRBU Component Library

Highlight Card Group: One Up 

<section id="highlight-card-group-7" class="highlight_card_group theme_ card_count_2" aria-labelledby="highlight-card-group-7_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-7_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-light-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>
                </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.