<div class="bux-container">
<section class="bux-interior-hero bux-interior-hero--with-image">
<div class="bux-interior-hero__image-wrapper">
<img class="bux-interior-hero__image" src="/images/placeholders/osu-bux-5.jpg" alt="Graduates performing the O-H-I-O pose" />
<div class="bux-interior-hero__header-container">
<h1 class="bux-h1 bux-interior-hero__header">H1 page title</h1>
</div>
</div>
<p class="bux-interior-hero__intro-text">[Optional] Intro text dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor sed odio ut vesti bulum. Morbi a sapien et ligula egestas interdum et. Satapien et ligula egestast.</p>
</section>
</div>
{#
Interior Page Hero
The Interior Page Title Hero introduces the page by containing the required H1 page title along with optional
introduction text that summarizes the goals of the page. The image is also optional, but it's recommended to provide
an engaging visual to support the content on the page.
#}
<div class="bux-container">
<section class="bux-interior-hero{% if image.src %} bux-interior-hero--with-image{% endif %}">
{% if image.src %}
<div class="bux-interior-hero__image-wrapper">
<img class="bux-interior-hero__image" src="{{ image.src }}" alt="{{ image.alt }}" />
<div class="bux-interior-hero__header-container">
<h1 class="bux-h1 bux-interior-hero__header">{{ header }}</h1>
</div>
</div>
{% else %}
<h1 class="bux-h1 bux-interior-hero__header">{{ header }}</h1>
{% endif %}
{% if intro %}
<p class="bux-interior-hero__intro-text">{{ intro }}</p>
{% endif %}
</section>
</div>
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
header: H1 page title
image:
src: /images/placeholders/osu-bux-5.jpg
alt: Graduates performing the O-H-I-O pose
intro: >-
[Optional] Intro text dolor sit amet, consectetur adipiscing elit.
Pellentesque porttitor sed odio ut vesti bulum. Morbi a sapien et ligula
egestas interdum et. Satapien et ligula egestast.
.bux-interior-hero {
display: flex;
flex-direction: column;
@include breakpoint(md) {
gap: calc($ts-20 - 0.6rem);
}
}
.bux-interior-hero--with-image {
@include breakpoint(md) {
gap: $ts-20;
}
}
.bux-interior-hero__image-wrapper {
position: relative;
}
.bux-interior-hero__image {
object-fit: cover;
aspect-ratio: 16/9;
}
.bux-interior-hero__header-container {
@include breakpoint(md) {
position: absolute;
bottom: -0.6rem;
padding: $sp-24 $sp-24 0 0;
background-color: #fff;
}
padding: $sp-16 0 0 0;
}
.bux-interior-hero__header {
margin: 0;
}
.bux-interior-hero__intro-text {
font-family: $sans;
font-size: $ts-22;
line-height: $ts-lg;
@include breakpoint(md) {
font-size: $ts-md;
line-height: $ts-36;
padding-bottom: $sp-32;
}
font-weight: 600;
color: $gray-dark-40;
padding-bottom: $sp-16;
border-bottom: 0.125rem solid $gray-light-80;
}
No notes defined.