School of Social Work

Page Header

No notes defined.

<header class="pageHeader">

    <div class="pageHeader__flex">
        <div class="pageHeader__inner">
            <div class="wrap">

                <nav class="breadcrumbs">
                    <ul>
                        <li><a href="">Home</a></li>
                        <li><a href="">Placeholder Item</a></li>
                        <li><a href="">A Long Titled Third Item Might Go Here Perhaps</a></li>
                    </ul>
                </nav>
                <div class="pageHeader__title">

                    <header class="tickertape  tickertape--bg-secondary">
                        <h1 class="tickertape__highlight">
                            Reach out, raise hope, change society
                        </h1>
                    </header>

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

    </div>
</header>
 
{% set breadcrumbsTemplate = breadcrumbsTemplate ?: '@breadcrumbs' %}
{% set tickertapeTemplate = tickertapeTemplate ?: '@tickertape' %}

{% if image or imageRandom %}
	{% set modifierClasses = '  pageHeader--has-media' %}
{% endif %}

{% if video or background %}
	{% set modifierClasses = modifierClasses ~ '  pageHeader--has-bg' %}
{% endif %}

{% if overlay %}
	{% if overlay == 'left' %}
		{% set modifierClasses = modifierClasses ~ '  pageHeader--has-overlay-left' %}
	{% elseif overlay == 'right' %}
		{% set modifierClasses = modifierClasses ~ '  pageHeader--has-overlay-right' %}
	{% endif %}
{% endif %}

<header class="pageHeader{{ modifierClasses }}">

	<div class="pageHeader__flex">
		<div class="pageHeader__inner">
			<div class="wrap">

				{% if breadcrumbs != false %}
					{% include breadcrumbsTemplate with {
						list: '<ul>
					<li><a href="">Home</a></li>
					<li><a href="">Placeholder Item</a></li>
					<li><a href="">A Long Titled Third Item Might Go Here Perhaps</a></li>
				</ul>'
					} %}
				{% endif %}

				{% if title != false %}
					<div class="pageHeader__title">
						{% include tickertapeTemplate with {
							text: title ?: 'Reach out, raise hope, change society',
							textElement: titleElement ?: 'h1',
							background: titleBackground ?: 'secondary',
						} %}
					</div>
				{% endif %}
			</div>
		</div>

		{% if image or imageRandom %}
			<figure class="pageHeader__media  {{ backgroundDimmed ? 'pageHeader__media--is-dimmed' }}">
				{% if imageRandom %}
					<img class="pageHeader__mediaImg" src="https://designs.hs.to/ssw/img/banner/{{ random(7) }}.jpg" alt=""/>
				{% elseif image %}
					{{ image }}
				{% endif %}

				{% if videoButton %}
					<button class="pageHeader__revealer  pageHeader__revealer--smallScreen" href="#pageHeader__reveal">Play</button>
				{% endif %}

				{% if imageCaption %}
					<div class="pageHeader__mediaCaptionContainer">
						<div class="wrap">
							<figcaption>{{ imageCaption }}</figcaption>
						</div>
					</div>
				{% endif %}
			</figure>
		{% endif %}

		{% if quote or card or video or overlay %}
			<div class="pageHeader__overlay">
				<div class="wrap">
					<div class="pageHeader__overlayInner">
						{% if quote %}
							<figure class="pageHeader__quote">
								<blockquote class="blockquote--long">
									<q>Since coming to Ann Arbor I’ve become so much more creative and confident in myself and my abilities. This is a long quote to test the limits of the component.</q>
								</blockquote>

								<a class="pointyLink" href="#" title="Read someone's experience about the lack of proper link text">Read More</a>
							</figure>
						{% elseif card %}
							<div class="card">
								<div class="card__content">
									Some card content
								</div>
							</div>
						{% endif %}

						{% if videoButton %}
							<button class="pageHeader__revealer  pageHeader__revealer--largeScreen" href="#pageHeader__reveal">Play</button>
						{% endif %}

						{% if video %}
							<figure class="video-container">
								<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/w_P3D9e0LcQ?si=S3QBJJzwnNbw-Q5q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
												allowfullscreen></iframe>
							</figure>
						{% endif %}
					</div>
				</div>
			</div>
		{% endif %}
	</div>
</header>