<component v-slot="hero" is="hero" class="hero hero--default">
<a class="hero__banner" href="/">
<svg class="" viewBox="0 0 226.8 48.8">
<path class="st1" d="M47.3 38.8h2.8v8.8c0 .4-.1.5-.5.5H32.5v-9.3h2.6v-1.5s-.1-.2-.2-.2h-9.2v1.7h2.6v9.3H10.9v-9.3h2.8v-7.4H8.6c-.2 0-.5-.1-.7-.3-1.6-1.4-3.2-2.7-4.8-4.1-.2-.2-.3-.4-.3-.6V9.8H0V.5h17.4v9.2h-2.6v6.8h9.6V9.7h-2.5V.5h17.4v9.3h-2.8v6.8h13c.4 0 .5.1.5.5v8.8h-2.8v13ZM16.1 8.4V1.8H1.3v6.6h2.2c.4 0 .6.2.6.6v16.7c0 .3.1.5.3.7 1.3 1.1 2.6 2.3 3.9 3.4.2.2.5.3.7.3h5.9v10.1h-2.8v6.6h14.8v-6.7h-2.6v-4.3h12v4.3h-2.6v6.6h14.8v-6.6h-2.8V24.5h2.8v-6.7H35V8.3h2.8V1.8H23v6.6h2.5v9.4H13.2V8.7c0-.3.1-.3.4-.3h2.3Z" />
<path class="st1" d="M23.2 41.4h2.6v4.1H13.5v-4.1h2.8V23.3h-2.8v-4.2h12.3v4.1h-2.5v6.7h14.5v-6.7h-2.6V19h12.3v4.1h-2.8v18.1h2.8v4.1H35.2v-4.1h2.6v-6.8H23.2v6.8Z" />
<path class="st1" d="M27 24.6V7.2h-2.6V3h12.3v4.1h-2.8v17.8c0 .4-.1.7-.4.9-1.1.9-2.1 1.8-3.1 2.7-.1 0-.3.2-.4.2H24.4v-4.2H27ZM15 24.5v4.3H9.5c-.2 0-.4 0-.5-.2-1.2-1-2.3-1.9-3.4-2.9-.2-.1-.2-.5-.2-.7V7.1H2.6V3h12.3v4.1h-2.2c-.4 0-.5.1-.5.5v16.5c0 .4.1.5.4.4H15ZM36.4 25.1v3.6h-4.1c1.4-1.2 2.7-2.4 4.1-3.6Z" />
<path d="M74.5 48.4V.3h2.7v48h-2.7Z" style="fill:#fff;fill-rule:evenodd" />
<path class="st1" d="M97.4 26.5h4.9c.1 1.5 1.6 2.3 4.7 2.3s3.2-.5 3.2-1.3-1.7-1.2-3.8-1.4c-3.4-.4-7.9-.8-7.9-3.8s3.2-4.8 8-4.8 9.1 1.9 9.4 5.2h-4.7c-.2-1.4-1.9-2.3-4.7-2.3s-3 .5-3 1.2 1.9 1.2 4.1 1.4c3.4.4 7.6.9 7.6 3.8s-4.2 4.9-8.4 4.9-9.1-1.8-9.4-5.2ZM124.2 21h-6.8l.7-3.2h18.4l-.7 3.2H129l-2.2 10.3h-4.9l2.2-10.3ZM136.5 25.3c0-.5 0-.9.2-1.4.8-3.9 5-6.4 10.2-6.4s9.1 2.4 9.1 6.4 0 .9-.2 1.4c-.8 3.9-5 6.4-10.2 6.4s-9.1-2.4-9.1-6.4Zm14.4-.5V24c0-2-1.7-3.2-4.3-3.2s-4.6 1.4-5 3.6v.8c0 2 1.7 3.2 4.3 3.2s4.6-1.4 5-3.6ZM159.7 17.8h10.9c3.3 0 5.2 1.6 5.2 4v.9c-.5 2.7-2.9 4.2-6.1 4.2h-7.1l-.9 4.4h-4.8l2.9-13.5Zm4.1 3.1-.6 3h5.8c1.4 0 2-.9 2-1.8s-.6-1.2-1.8-1.2h-5.4ZM112.3 6.4c-.2-1.7-1.8-3.1-4.2-3.1s-4.5 1.3-4.9 3.5v.9c0 2 1.6 3.2 4.2 3.2s4-1 4.8-2.9h4.9c-1.2 4-4.8 6.2-10 6.2s-8.8-2.5-8.8-6.3 0-.9.1-1.4c.8-4 4.8-6.6 10-6.6s8.7 2.5 8.9 6.4h-4.9ZM126.2.4h5.3l4.8 13.5h-5l-.8-2.5h-7.7l-1.8 2.5h-5.3L126.2.4Zm-1.4 8.2h4.8L128.2 4l-3.4 4.6ZM140.9.4h5.1l2.9 4.4 2.9 4.4.9-4.4.9-4.4h4.2l-2.9 13.5h-5.2l-2.9-4.4-2.9-4.4-.9 4.4-.9 4.4h-4.2L140.8.4ZM159.1 6c1.7 0 2.5-.7 2.8-2h-2.4l.8-3.6h4.7l-.7 3.4c-.6 2.6-2.5 4.1-5.6 4l.4-1.8ZM173.1 3.6h-6.8l.7-3.2h18.4l-.7 3.2h-6.8l-2.2 10.3h-4.9L173 3.6ZM101.8 35h2.2l-1.2 5.8h10.6l1.2-5.8h2.2l-2.9 13.5h-2.2l1.3-6.1h-10.6l-1.3 6.1h-2.2l2.9-13.5ZM117.6 42.6c0-.5 0-1 .2-1.5.8-4 4.8-6.4 9.2-6.4s8 2.3 8 6.2 0 1-.2 1.5c-.8 4-4.8 6.4-9.2 6.4s-8-2.3-8-6.2Zm15.1-.5c0-.4.1-.8.1-1.1 0-2.9-2.5-4.6-5.9-4.6s-6.4 1.8-7 5c0 .4-.1.8-.1 1.1 0 2.9 2.5 4.6 5.9 4.6s6.3-1.8 7-5ZM137.1 43c0-.5 0-1 .2-1.6l1.4-6.5h4.8l-1.4 6.8v.8c0 1.8 1.5 2.7 3.5 2.7s3.8-1.1 4.2-3.2l1.5-7.2h4.7l-1.6 7.3c-.9 4.1-4.3 6.5-9.2 6.5s-8.1-2.1-8.1-5.8ZM156.5 43.6h4.9c.1 1.5 1.6 2.3 4.7 2.3s3.2-.5 3.2-1.3-1.7-1.2-3.8-1.4c-3.4-.4-7.9-.8-7.9-3.8s3.2-4.8 8-4.8 9.1 1.9 9.4 5.2h-4.7c-.2-1.4-1.9-2.3-4.7-2.3s-3 .5-3 1.2 1.9 1.2 4.1 1.4c3.4.4 7.6.9 7.6 3.8s-4.2 4.9-8.4 4.9-9.1-1.8-9.4-5.2ZM182.5 36.6h-6.9l.3-1.6H192l-.3 1.6h-7l-2.5 11.8H180l2.5-11.8ZM191.1 42.6c0-.5 0-1 .2-1.5.8-4 4.8-6.4 9.2-6.4s8 2.3 8 6.2 0 1-.2 1.5c-.8 4-4.8 6.4-9.2 6.4s-8-2.3-8-6.2Zm15.1-.5c0-.4.1-.8.1-1.1 0-2.9-2.5-4.6-5.9-4.6s-6.4 1.8-7 5c0 .4-.1.8-.1 1.1 0 2.9 2.5 4.6 5.9 4.6s6.3-1.8 7-5ZM212.3 35h2.5l3.9 5.6 3.9 5.7 1.2-5.7L225 35h2l-2.9 13.5h-2.5l-3.9-5.6-3.9-5.7-1.2 5.7-1.2 5.6h-2l2.9-13.5Z" />
</svg>
</a>
<button @click="hero.toggleLoop()" class="hero__play-btn">
<svg class="" viewBox="0 0 12 18">
<path d="M0 18V0l12 9.5L0 18Z" />
</svg>
<svg class="" viewBox="0 0 11 18">
<path d="M0 0h3v18H0zM8 0h3v18H8z" />
</svg>
</button>
<div class="hero__overlay">
<div class="hero__inner grid">
<div class="hero__main">
<div class="context context--hero context--align-left context--light">
<h2 class="context__heading">Innovation that makes real world impact</h2>
<p>University of Houston's top-ranked academic programs develop interdisciplinary leaders who strengthen society through innovation and tackle challenges that impact people most. UH continues to transform momentum into real-world impact, proving that our force is unstoppable.</p>
<div class="button-group">
</div>
</div>
</div>
</div>
</div>
<video class="hero__loop object-cover" autoplay muted loop>
<source src="../../videos/loop.mp4" type="video/mp4">
</video>
<picture>
<source media="(min-width:768px)" srcset="https://via.placeholder.com/960x540">
<img class="w-full object-cover" src="https://via.placeholder.com/960x540" alt="Test alt" />
</picture>
</component>
{% import "macros.twig" as macros %}
{% import "icons.twig" as icons %}
{% if in_component_library %}
{% set context = '@context' %}
{% set videoComponent = '@video' %}
{% else %}
{% set context = 'context.twig' %}
{% set videoComponent = 'video.twig' %}
{% endif %}
<component
v-slot="hero"
is="hero"
class="hero hero--{{ type|default('default') }}{% if video %} hero--with-video{% endif %}"
>
<a class="hero__banner" href="/">
{{ icons.icon('logo', '') }}
</a>
{% if loop %}
<button @click="hero.toggleLoop()" class="hero__play-btn">
{{ icons.icon('play', '') }}
{{ icons.icon('pause', '') }}
</button>
{% endif %}
<div class="hero__overlay">
<div class="hero__inner grid">
<div class="hero__main">
{% include context with {
size: 'hero',
align: 'left',
type: (video) or (loop) ? 'light' : 'default',
heading: heading,
subheading: subheading,
paragraphs: paragraphs,
button: {
type: (video) or (loop) ? 'inverse' : 'default',
title: button.title,
url: button.url
},
} %}
</div>
</div>
</div>
{% if loop %}
<video class="hero__loop object-cover" autoplay muted loop>
<source src="{{ loop|path }}" type="video/mp4">
</video>
{{ macros.picture(
'w-full object-cover',
image.srcset,
image.src,
image.sizes.Hero,
image.sizes.Hero_mobile,
image.alt,
in_component_library
) }}
{% elseif video %}
{% include videoComponent with video %}
{% else %}
{{ macros.picture(
'w-full object-cover',
image.srcset,
image.src,
image.sizes.Hero,
image.sizes.Hero_mobile,
image.alt,
in_component_library
) }}
{% endif %}
</component>
{
"in_component_library": true,
"heading": "Innovation that makes real world impact",
"paragraphs": "<p>University of Houston's top-ranked academic programs develop interdisciplinary leaders who strengthen society through innovation and tackle challenges that impact people most. UH continues to transform momentum into real-world impact, proving that our force is unstoppable.</p>",
"buttons": [
{
"button": {
"title": "Active",
"url": "https://welcometruth.com/"
}
},
{
"button": {
"title": "Active",
"url": "https://welcometruth.com/"
}
}
],
"image": {
"srcset": "https://via.placeholder.com/960x540",
"src": "https://via.placeholder.com/960x540",
"alt": "Test alt"
},
"loop": "/videos/loop.mp4"
}
<template>
<div ref="hero" class="hero">
<slot
:toggleLoop="toggleLoop"
/>
</div>
</template>
<script>
export default {
methods: {
toggleLoop() {
const hero = this.$refs.hero;
const loop = hero.querySelector('.hero__loop');
const playBtn = hero.querySelector('.hero__play-btn');
if (loop.paused) {
loop.play();
playBtn.classList.remove('paused');
} else {
loop.pause();
playBtn.classList.add('paused');
}
}
}
}
</script>
.hero {
position: relative;
height: 90vh;
overflow: hidden;
&--with-video {
height: auto;
padding-bottom: 0;
}
&__banner {
position: absolute;
top: 0;
left: 0;
z-index: 101;
display: inline-flex;
justify-content: center;
align-items: center;
width: 350px;
height: 85px;
background-color: $red;
clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
svg {
width: 230px;
fill: $white;
}
}
&__play-btn {
position: absolute;
top: 30px;
right: 30px;
z-index: 101;
padding: 0;
appearance: none;
background-color: transparent;
border: 0;
cursor: pointer;
&.paused {
svg:nth-child(1) {
display: block;
}
svg:nth-child(2) {
display: none;
}
}
svg {
max-height: 24px;
width: 16px;
fill: $white;
&:nth-child(1) {
display: none;
}
&:nth-child(2) {
display: block;
}
}
}
&__overlay {
position: absolute;
top: 0;
left: 0;
z-index: 20;
display: flex;
align-items: flex-end;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}
&__main {
grid-column: span 12 / span 12;
margin-bottom: 30px;
@include breakpoint(medium) {
grid-column: span 8 / span 8;
margin-bottom: 60px;
}
@include breakpoint(large) {
grid-column: span 5 / span 5;
}
}
&__loop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
min-width: 100%;
min-height: 100%;
background-repeat: repeat;
background-size: cover;
transform: translateX(-40%);
@include breakpoint(medium) {
display: block;
transform: none;
}
}
.video__btn {
display: none;
}
}
No notes defined.