VCUarts Component Library

Topic Row: Blue 

<!-- Topic Row -->
<div class="topics topics_theme_blue">
    <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.