MSMU Component Library

Page Header: News Detail 

<div class="page_header page_header_no_subnav page_header_news_detail">
    <div class="page_header_inner">

        <div class="page_header_content_wrapper">

            <div class="page_breadcrumb">
                <div class="page_breadcrumb_inner">

                    <div class="breadcrumb">
                        <nav class="breadcrumb_nav" aria-labelledby="breadcrumb_nav_title">
                            <div class="breadcrumb_nav_header">
                                <h2 class="breadcrumb_nav_title" id="breadcrumb_nav_title">You are here:</h2>
                            </div>
                            <ol class="breadcrumb_list" aria-labelledby="breadcrumb_nav_title">
                                <li class="breadcrumb_item breadcrumb_item_home">
                                    <a href="page-home.html">
                                        <span>
                                            <span class="breadcrumb_pill_icon" aria-hidden="true">
                                                <svg class="icon icon_home">
                                                    <use href="/images/icons.svg#home" />
                                                </svg>
                                            </span>
                                            <span>Home</span>
                                        </span>
                                    </a>
                                    <span class="breadcrumb_divider" aria-hidden="true">/</span>
                                </li>
                                <li class="breadcrumb_item">
                                    <a href="#">
                                        <span>
                                            <span>Navigation Level</span>
                                        </span>
                                    </a>
                                    <span class="breadcrumb_divider" aria-hidden="true">/</span>
                                </li>
                                <li class="breadcrumb_item">
                                    <a href="#">
                                        <span>
                                            <span>Parent Level</span>
                                        </span>
                                    </a>
                                    <span class="breadcrumb_divider" aria-hidden="true">/</span>
                                </li>
                                <li class="breadcrumb_item">
                                    <span>
                                        <span>
                                            <span></span>
                                        </span>
                                    </span>
                                </li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="page_header_shapes">
        <div class="shape_one"></div>
        <div class="shape_two"></div>
    </div>
</div>
 
{#
	{% include '@partial-page-header' with {
		page: page
	} %}
#}
<div class="page_header page_header_no_subnav page_header_news_detail">
	<div class="page_header_inner">

		<div class="page_header_content_wrapper">
			{% if page.image or page.video %}
			<div class="fs-row">
				<div class="fs-cell page_header_content_wrapper_cell">
			{% endif %}

			{% if page.breadcrumbNav != false  %}
			<div class="page_breadcrumb">
				<div class="page_breadcrumb_inner">
					{% render '@navigation-breadcrumb' with {
						page: page,
						modifier: '',
						links: page.breadcrumbNav,
						icon_home: 'home',
						icon_divider: 'angle_right',
						icon_end: ''
					} %}
				</div>
			</div>
			{% endif %}

			{% if 'layout_detail' not in page.classes and page.image %}
			<div class="page_header_media">
				<div class="page_header_media_inner">
					<figure class="page_header_figure">
						{% include '@partial-picture' with {
							class: 'page_header',
							image: page.image,
							alt: '',
							loading: 'eager',
							default: img.square.xsml,
							sources: {
								'1394px': img.ultrawide.xlrg,
								'1220px': img.wide.xlrg,
								'980px': img.wide.lrg,
								'740px': img.wide.med,
								'500px': img.full.sml
							}
						} %}
					</figure>
				</div>
			</div>
			{% endif %}

			{% if page.title or page.description %}
			<div class="page_intro">
				{% if not page.image %}
				<div class="fs-row">
					<div class="fs-cell fs-lg-10 fs-lg-justify-center">
				{% endif %}
						<div class="page_intro_inner">
							{% if page.title %}
							<h1 class="page_title" id="page_title" tabindex="-1">{{ page.title }}</h1>
							{% endif %}
						</div>
				{% if not page.image and not page.video %}
					</div>
				</div>
				{% endif %}
			</div>
			{% endif %}

			{% if page.image or page.video %}
				</div>
			</div>
			{% endif %}
		</div>
	</div>
	<div class="page_header_shapes">
		<div class="shape_one"></div>
		<div class="shape_two"></div>
	</div>
</div>

No notes defined.