St. George's University Component Library

Page Header: News Detail 

<div class="page_news_header page_header_news_detail">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="page_news_header_inner">
                <div class="page_breadcrumb">

                    <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 class="breadcrumb_pill breadcrumb_pill_link" href="page-home.html">
                                        <span class="breadcrumb_pill_inner">
                                            <span class="breadcrumb_pill_icon" aria-hidden="true">
                                                <svg class="icon icon_home">
                                                    <use href="/images/icons.svg#home" />
                                                </svg>
                                            </span>
                                            <span class="breadcrumb_pill_label">Home</span>
                                        </span>
                                    </a>
                                    <span class="breadcrumb_divider" aria-hidden="true">
                                        <svg class="icon icon_minus">
                                            <use href="/images/icons.svg#minus" />
                                        </svg>
                                    </span>
                                </li>
                                <li class="breadcrumb_item">
                                    <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                        <span class="breadcrumb_pill_inner">
                                            <span class="breadcrumb_pill_label">Life at St. George's</span>
                                        </span>
                                    </a>
                                    <span class="breadcrumb_divider" aria-hidden="true">
                                        <svg class="icon icon_minus">
                                            <use href="/images/icons.svg#minus" />
                                        </svg>
                                    </span>
                                </li>
                                <li class="breadcrumb_item">
                                    <span class="breadcrumb_pill">
                                        <span class="breadcrumb_pill_inner">
                                            <span class="breadcrumb_pill_label"></span>
                                        </span>
                                    </span>
                                    <span class="breadcrumb_end" aria-hidden="true">
                                        <svg class="icon icon_angle_down">
                                            <use href="/images/icons.svg#angle_down" />
                                        </svg>
                                    </span>
                                </li>
                            </ol>
                        </nav>
                    </div>
                </div>
                <h1 class="page_title" id="page_title" tabindex="-1"></h1>
                <div class="page_news_intro_wrapper">
                    <div class="page_news_intro_group">
                    </div>
                    <div class="page_news_cta">
                        <figure class="page_news_cta_figure">

                            <img class="page_news_cta_image" srcset="https://images.fastspot.com/generic/740x416/ 740w, https://images.fastspot.com/generic/500x282/ 500w, https://images.fastspot.com/generic/300x169/ 300w, https://images.fastspot.com/generic/x/ w" src="https://images.fastspot.com/generic/x/" alt="page.cta.alt" loading="eager" width="" height="">
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="page_news_header page_header_news_detail">
	<div class="fs-row">
		<div class="fs-cell">
			<div class="page_news_header_inner">
				{% if page.breadcrumbNav != false  %}
					<div class="page_breadcrumb">
						{% render '@navigation-breadcrumb' with {
							page: page,
							modifier: '',
							links: page.breadcrumbNav,
							icon_home: 'home',
							icon_divider: 'minus',
							icon_end: 'angle_down'
						} %}
					</div>
				{% endif %}
				<h1 class="page_title" id="page_title" tabindex="-1">{{ page.title }}</h1>
				<div class="page_news_intro_wrapper">
					<div class="page_news_intro_group">
						{% if page.description %}
							<p class="page_description">{{ page.description }}</p>
						{% endif %}
						{% if page.duration %}
							<p class="page_duration">{{ page.duration }}</p>
						{% endif %}
					</div>
					<div class="page_news_cta">
						<figure class="page_news_cta_figure">
							{% include '@partial-image' with {
								class: 'page_news_cta',
								alt: 'page.cta.alt',
								image: page.cta.image,
								loading: 'eager',
								sources: [
									img.wide.sml,
									img.wide.xsml,
									img.wide.xxsml,
									img.wide.thumb
								]
							} %}
						</figure>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

No notes defined.