<div class="basic-page-header basic-page-header--music">
<div class="basic-page-header__summary basic-page-header__summary--music">
<div class="basic-page-header__breadcrumb">
<nav aria-label="Breadcrumb navigation" class="breadcrumbs breadcrumbs--music">
<ul class="breadcrumbs__list">
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__item-link">
Home</a><span class="breadcrumbs__separator"><svg aria-hidden="true" class="icon-right-triangle" xmlns="http://www.w3.org/2000/svg" width="6" height="8" viewBox="0 0 6 8">
<path class="_mark" fill="#AEB4BA" fill-rule="evenodd" d="M0 0l6 4-6 4z"/>
</svg>
</span>
</li>
<li class="breadcrumbs__item">
<span class="breadcrumbs__item-current">
Programs & Applying
</span>
</li>
</ul>
</nav>
</div>
<h1 class="basic-page-header__title">
Basic page header
</h1>
<div class="basic-page-header__intro-text">
Lorem <strong>ipsum dolor</strong> <em>sit amet</em>, <a href='#'>consectetuer</a> adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
</div>
</div>
</div>
<div class="basic-page-header basic-page-header--{{ siteUnit }}">
<div class="basic-page-header__summary basic-page-header__summary--{{ siteUnit }}">
{% if breadcrumbs %}
<div class="basic-page-header__breadcrumb">
{% include "partials/breadcrumbs/breadcrumbs.twig" %}
</div>
{% endif %}
<h1 class="basic-page-header__title">
{{ post.title }}
</h1>
{% if post.introText %}
<div class="basic-page-header__intro-text">
{{ post.introText }}
</div>
{% endif %}
</div>
</div>
{
"siteUnit": "music",
"departmentName": "Music",
"background": "light",
"breadcrumbs": [
{
"title": "Home",
"url": "#"
},
{
"title": "Programs & Applying",
"url": "#"
}
],
"post": {
"title": "Basic page header",
"introText": "Lorem <strong>ipsum dolor</strong> <em>sit amet</em>, <a href='#'>consectetuer</a> adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis."
}
}
.basic-page-header
breakpoint = 1000px
--header-background-color cloud
background-color var(--header-background-color)
position relative
fluid(padding-bottom, 500px, maxContentWidth, 48px, 64px)
&--college
--header-background-color white
&--college &__title
color charcoalLightest
&--durp
border-top 8px solid illiniOrange
&--music
--header-background-color almaMaterDark
&--music &__title
color white
&--music &__intro-text
&--music &__intro-text p
color rgba(255,255,255,0.75)
$backgroundExtension
background-color var(--header-background-color)
content ''
position absolute
top: -8px;
bottom 0
width 100vw
&:before
@extend $backgroundExtension
left 100%
&:after
@extend $backgroundExtension
right 100%
&--durp:before
border-top: 24px solid illiniOrange;
&--durp:after
border-top: 8px solid illiniOrange;
&__breadcrumb
display none
margin-bottom 32px
+above(breakpoint)
display block
&__summary
padding-top 88px
+above(breakpoint)
padding-top 64px
position relative
&--durp
&:before
background-color illiniOrange
content ""
display block
position absolute
top 0
left 0
height 16px
width 100vw
+below(breakpoint)
left 0
right 0
&__title
@extends $secondaryTitle
&__intro-text
margin-top 16px
@extends $inlineFormatting
& p
@extends $headline3
&:not(:last-child)
margin-bottom 16px
There are no notes for this item.