JTCC Component Library

Page Header: Description 

<div class="page_header">
    <div class="page_header_inner">
        <div class="page_header_body">
            <div class="breadcrumb">
                <div class="fs-row">
                    <div class="fs-cell">
                        <div class="breadcrumb_inner">

                            <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_label">Home</span>
                                                <span class="breadcrumb_pill_icon">
                                                    <svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg>
                                                </span>
                                            </span>
                                        </a>
                                    </li>
                                    <li class="breadcrumb_item">
                                        <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                            <span class="breadcrumb_pill_inner">
                                                <span class="breadcrumb_pill_label">Navigation Level</span>
                                                <span class="breadcrumb_pill_icon">
                                                    <svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg>
                                                </span>
                                            </span>
                                        </a>
                                    </li>
                                    <li class="breadcrumb_item">
                                        <a class="breadcrumb_pill breadcrumb_pill_link" href="#">
                                            <span class="breadcrumb_pill_inner">
                                                <span class="breadcrumb_pill_label">Parent Level</span>
                                                <span class="breadcrumb_pill_icon">
                                                    <svg class="icon icon_caret_right">
                                                        <use href="/images/icons.svg#caret_right" />
                                                    </svg>
                                                </span>
                                            </span>
                                        </a>
                                    </li>
                                    <li class="breadcrumb_item">
                                        <span class="breadcrumb_pill">
                                            <span class="breadcrumb_pill_inner">
                                                <span class="breadcrumb_pill_label">Page Title</span>
                                            </span>
                                        </span>
                                    </li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page_intro">
                <div class="fs-row">
                    <div class="fs-cell fs-lg-10 fs-xl-9">
                        <div class="page_intro_inner">
                            <h1 class="page_title" itemprop="name">Contact Us</h1>
                            <p class="page_description" itemprop="description">Keeping connected to the JTCC community is an important way that we can provide student support, and we are always here to help – whether you are looking to get involved or looking to visit us. Just reach out!</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="page_header{% if stretch %} theme_stretch{% endif %}">
	<div class="page_header_inner">
		<div class="page_header_body">
			{% if breadcrumbNav != false  %}
				<div class="breadcrumb">
					<div class="fs-row">
						<div class="fs-cell">
							<div class="breadcrumb_inner">
								{% render "@navigation-breadcrumb" %}
							</div>
						</div>
					</div>
				</div>
			{% endif %}
			{% if title or description %}
				<div class="page_intro">
					<div class="fs-row">
						<div class="fs-cell fs-lg-10 fs-xl-9">
							<div class="page_intro_inner">
								{% if title %}
									<h1 class="page_title" itemprop="name">{{ title }}</h1>
								{% endif %}
								{% if description %}
									<p class="page_description" itemprop="description">{{ description }}</p>
								{% endif %}
							</div>
						</div>
					</div>
				</div>
			{% endif %}
		</div>
	</div>
</div>

No notes defined.