JHU Sustainability Component Library

Direct Action 

<div class="direct_action">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="direct_action_inner">
                <div class="direct_action_head">
                    <div class="direct_action_title_wrap">
                        <h2 class="direct_action_title">
                            I want to...
                        </h2>

                        <div class="direct_action_title_icon">

                            <svg class="icon icon_angle_down">
                                <use href="/images/icons.svg#angle_down" />
                            </svg>

                        </div>
                    </div>
                </div>

                <div class="direct_action_content">
                    <div class="direct_action_items">
                        <div class="direct_action_item">

                            <a href="#" class="direct_action_link ">
                                <span class="direct_action_link_inner">
                                    <span class="direct_action_link_label">Take A Sustainability Course</span>
                                    <span class="direct_action_link_icon" aria-hidden="true">

                                        <svg class="icon icon_arrow_right_outline_white">
                                            <use href="/images/icons.svg#arrow_right_outline_white" />
                                        </svg>

                                    </span>
                                </span>
                            </a>
                        </div>
                        <div class="direct_action_item">

                            <a href="#" class="direct_action_link ">
                                <span class="direct_action_link_inner">
                                    <span class="direct_action_link_label">Meet Faculty Researchers</span>
                                    <span class="direct_action_link_icon" aria-hidden="true">

                                        <svg class="icon icon_arrow_right_outline_white">
                                            <use href="/images/icons.svg#arrow_right_outline_white" />
                                        </svg>

                                    </span>
                                </span>
                            </a>
                        </div>
                        <div class="direct_action_item">

                            <a href="#" class="direct_action_link ">
                                <span class="direct_action_link_inner">
                                    <span class="direct_action_link_label">Explore Research At Hopkins</span>
                                    <span class="direct_action_link_icon" aria-hidden="true">

                                        <svg class="icon icon_arrow_right_outline_white">
                                            <use href="/images/icons.svg#arrow_right_outline_white" />
                                        </svg>

                                    </span>
                                </span>
                            </a>
                        </div>
                        <div class="direct_action_item">

                            <a href="#" class="direct_action_link ">
                                <span class="direct_action_link_inner">
                                    <span class="direct_action_link_label">Take A Sustainability Course</span>
                                    <span class="direct_action_link_icon" aria-hidden="true">

                                        <svg class="icon icon_arrow_right_outline_white">
                                            <use href="/images/icons.svg#arrow_right_outline_white" />
                                        </svg>

                                    </span>
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{# {% include "@component-direct-action" with {
	title: 'I want to...',
	items: [
		{
			title: 'Take A Sustainability Course',
			href: '#'
		},
		{
			title: 'Meet Faculty Researchers',
			href: '#'
		},
		{
			title: 'Explore Research At Hopkins',
			href: '#'
		},
		{
			title: 'Take A Sustainability Course',
			href: '#'
		}
	]
} %} #}

<div class="direct_action">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="direct_action_inner">
				{% if title %}
					<div class="direct_action_head">
						<div class="direct_action_title_wrap">
							<h2 class="direct_action_title">
								{{ title }}
							</h2>

							<div class="direct_action_title_icon">
								{{ icon('angle_down') }}
							</div>
						</div>
					</div>
				{% endif %}

				<div class="direct_action_content">
					<div class="direct_action_items">
						{% for item in items %}
							<div class="direct_action_item">
								{% include "@partial-link" with {
									class: "direct_action",
									title: item.title,
									url: item.href,
									icon: "arrow_right_outline_white"
								} %}
							</div>
						{% endfor %}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.