Framework Component Library

Topic Row 

<!-- Topic Row -->
<div class="topic-row">

    <div class="topic-row__inner">
        <div class="topic-row__body">
            <div class="topic-row__items">
                <div class="topic-row__item">
                    <div class="fw-container">
                        <div class="topic-row__item-inner">
                            <figure class="topic-row__item-figure">

                                <img class="topic-row__item-image" srcset="https://images.fastspot.com/framework/740x555/1 740w, https://images.fastspot.com/framework/500x375/1 500w, https://images.fastspot.com/framework/300x225/1 300w" src="https://images.fastspot.com/framework/300x225/1" alt="" loading="lazy" width="300" height="225">
                            </figure>
                            <div class="topic-row__item-wrapper">
                                <div class="topic-row__item-header">
                                    <h2 class="topic-row__item-title">Why Dream Academy?</h2>
                                </div>
                                <div class="topic-row__item-body">
                                    <div class="topic-row__item-description">
                                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla.</p>
                                    </div>
                                </div>
                                <div class="topic-row__item-links">

                                    <a class="button-paint
 				" href="#">
                                        <span class="button-paint__inner"> <span class="button-paint__label">Nam quam nunc</span>
                                        </span>
                                    </a>

                                    <a class="button-paint
 				" href="#">
                                        <span class="button-paint__inner"> <span class="button-paint__label">Blandit elit</span>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="topic-row__item-border"></div>
                </div>
                <div class="topic-row__item alt-item">
                    <div class="fw-container">
                        <div class="topic-row__item-inner">
                            <figure class="topic-row__item-figure">

                                <img class="topic-row__item-image" srcset="https://images.fastspot.com/framework/740x555/2 740w, https://images.fastspot.com/framework/500x375/2 500w, https://images.fastspot.com/framework/300x225/2 300w" src="https://images.fastspot.com/framework/300x225/2" alt="" loading="lazy" width="300" height="225">
                            </figure>
                            <div class="topic-row__item-wrapper">
                                <div class="topic-row__item-header">
                                    <h2 class="topic-row__item-title">Who We Are and What We Believe</h2>
                                </div>
                                <div class="topic-row__item-body">
                                    <div class="topic-row__item-description">
                                        <p>Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia lacinia. Nam pretium turpis et arcu.</p>
                                    </div>
                                </div>
                                <div class="topic-row__item-links">

                                    <a class="button-paint
 				" href="#">
                                        <span class="button-paint__inner"> <span class="button-paint__label">Lorem ipsum</span>
                                        </span>
                                    </a>

                                    <a class="button-paint
 				" href="#">
                                        <span class="button-paint__inner"> <span class="button-paint__label">Dolor sit amet</span>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="topic-row__item-border"></div>
                </div>
                <div class="topic-row__item">
                    <div class="fw-container">
                        <div class="topic-row__item-inner">
                            <figure class="topic-row__item-figure">

                                <img class="topic-row__item-image" srcset="https://images.fastspot.com/framework/740x555/4 740w, https://images.fastspot.com/framework/500x375/4 500w, https://images.fastspot.com/framework/300x225/4 300w" src="https://images.fastspot.com/framework/300x225/4" alt="" loading="lazy" width="300" height="225">
                            </figure>
                            <div class="topic-row__item-wrapper">
                                <div class="topic-row__item-header">
                                    <h2 class="topic-row__item-title">Metus Laoreet</h2>
                                </div>
                                <div class="topic-row__item-body">
                                    <div class="topic-row__item-description">
                                        <p>Maecenas nec odio et tempus.</p>
                                    </div>
                                </div>
                                <div class="topic-row__item-links">

                                    <a class="button-paint
 				" href="#">
                                        <span class="button-paint__inner"> <span class="button-paint__label">Nam quam nunc</span>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="topic-row__item-border"></div>
                </div>
                <div class="topic-row__item alt-item">
                    <div class="fw-container">
                        <div class="topic-row__item-inner">
                            <figure class="topic-row__item-figure">

                                <img class="topic-row__item-image" srcset="https://images.fastspot.com/framework/740x555/3 740w, https://images.fastspot.com/framework/500x375/3 500w, https://images.fastspot.com/framework/300x225/3 300w" src="https://images.fastspot.com/framework/300x225/3" alt="" loading="lazy" width="300" height="225">
                            </figure>
                            <div class="topic-row__item-wrapper">
                                <div class="topic-row__item-header">
                                    <h2 class="topic-row__item-title">Phasellus viverra nulla ut metus varius laoreet</h2>
                                </div>
                                <div class="topic-row__item-body">
                                    <div class="topic-row__item-description">
                                        <p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
                                    </div>
                                </div>
                                <div class="topic-row__item-links">

                                    <a class="button-paint
 				" href="#">
                                        <span class="button-paint__inner"> <span class="button-paint__label">Aenean tellus metus</span>
                                        </span>
                                    </a>

                                    <a class="button-paint
 				" href="#">
                                        <span class="button-paint__inner"> <span class="button-paint__label">Etiam imperdiet</span>
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="topic-row__item-border"></div>
                </div>
            </div>
        </div>
    </div>

</div>
<!-- END: Topic Row -->
 
{#
	{% include '@component-topic-row' with {
		group_title: 'Title',
		group_description: 'Description',
		items: [
			{
				title: 'Item Title',
				image: '1',
				alt: '',
				description: 'Item Description',
				links: [
					{
						title: 'Link Title',
						url: '#'
					}
				]
			}
		]
	} %}
#}

{% set id = uniqid('topic-row') %}
{% set has_group_title = group_title is not empty %}
{% set heading_level = heading_level ?? 2 %}
{% set base_tag = has_group_title ? 'section' : 'div' %}
{% set group_heading_tag = 'h' ~ (heading_level) %}
{% set item_heading_tag = has_group_title ? 'h' ~ (heading_level + 1) : 'h' ~ (heading_level) %}

<!-- Topic Row -->
<{{ base_tag }}
	class="topic-row"
	{% if group_title %}
		aria-labelledby="{{ id ~ '__title' }}"
	{% endif %}
	{% if group_description %}
		aria-describedby="{{ id ~ '__description' }}"
	{% endif %}
>

	<div class="topic-row__inner">
		{% if group_title or group_description %}

			<div class="fw-container">
				<div class="topic-row__header">
					{% if group_title %}
						<{{ group_heading_tag }}
							class="topic-row__title"
							id="{{ id ~ '__title' }}"
						>
							{{- group_title -}}
						</{{ group_heading_tag }}>
					{% endif %}
					{% if group_description %}
						<div
							class="topic-row__description"
							id="{{ id ~ '__description' }}"
						>
							<p>{{ group_description }}</p>
						</div>
					{% endif %}
				</div>
			</div>

		{% endif %}
		<div class="topic-row__body">
			<div class="topic-row__items">
				{% for item in items %}
					<div class="topic-row__item{% if loop.index is even %} alt-item{% endif %}">
						<div class="fw-container">
							<div class="topic-row__item-inner">
								{% if item.image %}
									<figure class="topic-row__item-figure">
										{% include '@partial-image' with {
											class: 'topic-row__item-image',
											image: item.image,
											alt: item.alt,
											loading: 'lazy',
											crop: 'full',
											max: 'sml'
										} only %}
									</figure>
								{% endif %}
								<div class="topic-row__item-wrapper">
									<div class="topic-row__item-header">
										<{{ item_heading_tag }} class="topic-row__item-title">
											{{- item.title -}}
										</{{ item_heading_tag }}>
									</div>
									{% if item.description %}
										<div class="topic-row__item-body">
											<div class="topic-row__item-description">
												<p>{{ item.description }}</p>
											</div>
										</div>
									{% endif %}
									{% if item.links %}
										<div class="topic-row__item-links">
											{% for link in item.links %}
												{% include '@partial-link' with {
													classes: {
														base: 'button-paint',
													},
													title: link.title,
													url: link.url,
													icon: null
												} only %}
											{% endfor %}
										</div>
									{% endif %}
								</div>
							</div>
						</div>
						<div class="topic-row__item-border"></div>
					</div>
				{% endfor %}
			</div>
		</div>
	</div>

</{{ base_tag }}>
<!-- END: Topic Row -->

No notes defined.