VCUarts Component Library

Topic Row: Black 

<!-- Topic Row -->
<div class="topics topics_theme_black">
    <div class="topics_header">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="topics_header_inner">
                    <div class="topics_group_title">
                        <h2 class="topics_group_title_primary">Lorem ipsum dolor sit amet</h2>
                        <p class="topics_group_title_secondary">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu</p>
                    </div>
                    <div class="topics_group_description">
                        VCU and the School of the Arts value and celebrate diversity in all of its forms. We support thoughtful, informed and inclusive action, and are committed to empowering community values in which individuals of different perspectives, life experiences, cultural backgrounds, and social identities feel safe and welcomed.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="topics_body">
        <div class="fs-row">
            <div class="fs-cell">
                <div class="topics_body_inner">
                    <div class="topics_items">
                        <div class="topics_item">
                            <div class="topics_item_group">
                                <div class="topics_item_header">
                                    <h2 class="topics_item_title">Art Foundation Program</h2>
                                </div>
                                <div class="topics_item_body">
                                    <p class="topics_item_description">The Art Foundation Program (AFO) is the first year experience for students who want to major in Craft/Material Studies. The skills you'll develop are required to declare a Craft/Materials Studies major.</p>
                                </div>
                            </div>
                            <div class="topics_item_actions">
                                <div class="topics_item_action">

                                    <a href="#" class="topics_item_link">
                                        <span class="topics_item_link_inner">
                                            <span class="topics_item_link_label">Learn About AFO</span><span class="icon_nowrap topics_item_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="topics_item_action">

                                    <a href="#" class="topics_item_link">
                                        <span class="topics_item_link_inner">
                                            <span class="topics_item_link_label">How to Apply</span><span class="icon_nowrap topics_item_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>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Topic Row -->
 
{#
	{% include '@component-topic-row' with {
		page_nav_id: '',
		theme: 'color',
		title: 'Title Primary',
		secondary_title: 'Title Secondary',
		description: 'Description',
		items: [
			{
				title: 'Title',
				description: 'Description',
				links: [
					{
						url: '#',
						label: 'label',
						aria: 'aria'
					}
				]
			}
		]
	} %}
#}

<!-- Topic Row -->
<div class="{% if page_nav_id %}js-page-nav-component {% endif %}topics topics_theme_{{ theme }}"{% if page_nav_id %} id="{{ page_nav_id }}"{% endif %}>
	{% if title or secondary_title or description %}
		<div class="topics_header">
			<div class="fs-row">
				<div class="fs-cell">
					<div class="topics_header_inner">
						{% if title or secondary_title %}
							<div class="topics_group_title">
								{% if title %}
									<h2 class="topics_group_title_primary">{{ title }}</h2>
								{% endif %}
								{% if secondary_title %}
									<p class="topics_group_title_secondary">{{ secondary_title }}</p>
								{% endif %}
							</div>
						{% endif %}
						{% if description %}
							<div class="topics_group_description">
								{{ description }}
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
	{% endif %}
	<div class="topics_body">
		<div class="fs-row">
			<div class="fs-cell">
				<div class="topics_body_inner">
					<div class="topics_items">
						{% for item in items %}
							<div class="topics_item">
								<div class="topics_item_group">
									<div class="topics_item_header">
										<h2 class="topics_item_title">{{ item.title }}</h2>
									</div>
									<div class="topics_item_body">
										<p class="topics_item_description">{{ item.description }}</p>
									</div>
								</div>
								<div class="topics_item_actions">
									{% for link in item.links %}
										<div class="topics_item_action">
											{% include '@partial-link' with {
												class: 'topics_item',
												title: link.label,
												url: link.url,
												icon: 'arrow_right',
												aria: link.aria,
												nowrap: true
											} %}
										</div>
									{% endfor %}
								</div>
							</div>
						{% endfor %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END: Topic Row -->

No notes defined.